Thursday, September 20, 2012
WebGL Volumetric Renderer
Live code: iamnop.com/volumetric
(Does not run Windows. Unknown bug with shader compiling.)
Video: http://www.youtube.com/watch?v=VPhnwOpmUqY
GitHub: https://github.com/nopjia/WebGL-Volumetric
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.
Subscribe to:
Post Comments (Atom)
Care push this example onto github ? :)
ReplyDeleteThe code is actually already on GitHub. Check the updated link above. Thanks for remind me.
ReplyDeleteNice work! :)
ReplyDeleteHi,
ReplyDeleteFor me it does not display bunny instead it displays the fps and some empty volume
Yes. This demo doesn't work consistently across platforms. For example, it doesn't work at all on Windows.
ReplyDeleteIt 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.
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.
ReplyDeleteok the reason was definitely texture. On my hardware, resizing the volume image to nearest power of two fixed the issue. Works fine now.
ReplyDeleteIs it slice based or is it a raytracer? I cant figure how you handle multiple lights in realtime?
ReplyDeleteThis is a raytracer. I perform lighting computation the brute-force way, calculating lighting per each ray march step.
ReplyDelete