The present and future of post production business and technology

Realtime Raytracing with Javascript

Realtime Raytracing with Javascript in a browser Open standards rule!

The debate over HTML5 really doesn’t do the question justice. It’s not just HTML5 and the Video Tag, it’s that plus the Canvas tag (allows all sorts of manipulations of the screen, including images and video), CSS (for styling and animation as well) and Javascript for the brains. But people keep doing really interesting things with Javascript way beyond what has been done in Flash.

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.