02560 Web Graphics and Scientific Visualization

Week 10

This example enables the user to cut a volume dataset at an arbitrary angle (DV, Sec. 8.1) and visualizes the slice using the rainbow colour map (DV, Sec. 5.2).

The basic WebGL code is based on the WebGL Programming Guide (GL, especially seventh and eight subsections of Chapter 10: "Switching Shaders" and "Use What You've Drawn as a Texture Image"). To ray march the volume for cutting and visualization, we use the Depth Example from Week 9. To have 3D textures without WebGL 1.0 support for them, we use the same approach as we used for animated textures in the Globe Example. Further discussion of WebGL limitations and extensions is in the Week 10 worksheet.

The volume visualization algorithm employed in this example is ported to WebGL from VoxelRay by Andreas Bærentzen. The ray marching loop in the GLSL code of the original VoxelRay implementation has been modified slightly as GLSL ES, which is used for WebGL shaders, does not support dynamic loops. Internet Explorer 11 (IE11) seems to not support true looping at all. My guess is that loops are unrolled, as loops running over many iterations result in long shader compile times and shader programs which easily exceed the maximum complexity allowed in a WebGL shader. This means that if we extend this volume visualization example to include isosurface extraction and more advanced intensity projections (DV, Sec. 10.2), we must sacrifice IE11 support to have proper visualization quality.

Volume Example

By Jeppe Revall Frisvad (based on GL, DV, and VoxelRay)

Mouse control: orbit - left button, zoom - middle button, pan - right button.

Keyboard options: move slicing plane further away - [+], move slicing plane closer - [-].

Please use a browser that supports HTML5 canvas.