Thursday, September 20, 2012

WebGL Volumetric Renderer


Live code:
(Does not run Windows. Unknown bug with shader compiling.)



As a small side project, I implemented volumetric ray casting in WebGL. The idea is to ray cast a 3D texture, which should be very fast since OpenGL texture lookups are highly optimized; however, this is not doable since 3D textures are not allowed in WebGL.

During SIGGRAPH 2012, I met Luis Kabongo from VICOMTech, who showed me their implementation of a WebGL volume renderer, which they use for medical imaging. They made it possible by, instead of using a 3D texture, using a 2D texture atlas, which is made up of 2D texture slices. This is a very simple solution. I immediate took this idea and implemented my own version.

VICOMTech's volume renderer is for simply viewing 3D datasets, so they implemented it using alpha compositing with no lighting.

I took it a step further for my own renderer and implemented physically-based volume rendering. The lighting model is based on light transmittance. I introduced multiple lights into the scene and use exponential fall-off to calculate transmittance.

As a result, the renderer features physically-based lighting, volumetric shadows, and support for multiple lights. The results turned out very nicely.


  1. Care push this example onto github ? :)

  2. The code is actually already on GitHub. Check the updated link above. Thanks for remind me.

  3. Hi,
    For me it does not display bunny instead it displays the fps and some empty volume

  4. Yes. This demo doesn't work consistently across platforms. For example, it doesn't work at all on Windows.

    It really depends on the hardware and OS you're running. I couldn't pinpoint what it is exactly, though it might be the texture size. Different OSes and hardware all have varying limitations, and it's rather difficult to write a rather computationally intensive demo to work on all of them. I can say that if you run this on Mac/Linux with decent graphics hardware, it will run fine.

  5. Thanks for your response. Actually i can have this debugged for you on windows since I have worked on this area before. Seems to me that the texture upload is not working properly. Let me see if I can fix it.

  6. ok the reason was definitely texture. On my hardware, resizing the volume image to nearest power of two fixed the issue. Works fine now.

  7. Is it slice based or is it a raytracer? I cant figure how you handle multiple lights in realtime?

  8. This is a raytracer. I perform lighting computation the brute-force way, calculating lighting per each ray march step.