This page uses WebGL2, which will be enabled by default in chrome 56 in January 2017.
To enable WebGL2 before then, or on other browsers, see this link:
How to use WebGL2
Drag the mouse to rotate the volume.
Draw Bounding Box:
How It's Rendered
The rendering is done by doing a ray trace of the bounding cube to see which rays enter the volume.
The rays that hit the cube then ray march from the start of the cube to the end of the cube, taking samples of the values as fog density. If a fog density value is above the surface threshold, it considers a surface hit and shades it. The fog amount hit during the trace is applied to the color calculated for the ray.
Instead of doing the initial ray trace, the cube could be rendered with triangles so that it would become a rasterization process instead of a full screen raytrace vs a box. The ray marching would still be done in the pixel shader like it is now. The ray marching could be improved by using the gradient to take varying sized steps instead of constant sized steps.
There is some non smoothness of the normals (seen best in the specular highlight) and the surface positions that is due to the fact that the texture interpolator works in X.8 fixed point numbers. You can verify this by using the software interpolated dreeg selection to see it smooth out.
The GPU texture sampler is used to calculate the fog density value of the volume at a given u,v,w (or x,y,z) position. All volumes are stored in a 3d 2x2x2 texture using varying amounts of color channels. See the source code or blog post for more information!