Thursday, June 3rd, 2010

Realtime ray tracing^H^H^H^H^H^H texture mapping with JavaScript

Category: Examples

<>p>We have posted about ray tracing before, and now we have another example by Jonas Wagner:

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.

You can check out the code to see how it all works. What frame rates are you getting?

Posted by Dion Almaer at 6:47 am

3.2 rating from 6 votes


Comments feed TrackBack URI

It’s actually real raytracing not just texture mapping. You can tell from the ;)

Comment by 29a — June 4, 2010

This is very cool but definitely far from seeing actual real-world use. I was getting 11-12 fps in Chrome on medium setting (though it’s Pentium4 machine with 2GB of RAM and WinXP, so it’s probably better on something beefier).

Comment by iliad — June 4, 2010

Do people understand what ^H means nowadays?

Comment by ExtAnimal — June 5, 2010

16fps in Opera on medium setting, 5 on high

Comment by YangombiUmpakati — August 18, 2010

Leave a comment

You must be logged in to post a comment.