Realtime Raytracing in Javascript!

Yes we can! Thanks to the performance of modern javascript engines like V8 it is now possible to do realtime raytracing in javascript.

Demo

This demo requires a quick modern browser with support for the canvas tag and a fast computer. Google chrome seems to work best. Firefox is too slow. If it doesn't work make sure that your browser is not zooming in (hit ctrl+0 in chrome and firefox).

How it works

The frames are renderer using a technique called raytracing. The environment is mapped using cube mapping. I store all the values of the cubemap as floats. I increase the definition range by multiplying all values bigger than 0.95 with 2. This makes sure that the bright parts of the image are also very bright in the reflections. You can think of this as faking hdr. I do not calculate any lighting, it is all coming from the environment map. To make the animation look a bit more fluid and hide the aliasing I apply some fake motion blur by blending the current frame with the previous one. Feel free to ask questions if you want to know more.

Source

You can view the sourcecode here: rtrt.js. Feel free to copy from it, but please let me know if you use it for something cool. :) Also beware that the code is pretty hacky and unpolished.

Other Experiments

Be sure to check out my other experiments too. If you like what you saw you should subscribe to my newsfeed or follow me on twitter.

Credits

The environment map was created by Paul Debevec of the ICT Graphics lab. You can find his collection of light probes here. Thanks for letting me use it.