Path tracing a cornell box in Javascript
Last Saturday I have released my little javascript pathtracer that rendered a very simple scene. This time I want to show off some of the more advanced effects that can be simulated nicely using path tracing. I decided to set up a scene similar to the well known Cornell Box to demonstrate effects such as soft shadows, color bleeding, reflection, refraction and caustics. I did not include Depth of Field in this experiment because it didn't fit the scene well in my opinion.
The experiment
Click the image to start the rendering. Warning, this experiment is slow. Run it using a fast web browser (google chrome) and be a little bit patient. Opera won't work because it doesn't support web workers.
You might also want to check out my previous path tracing experiment.
Path tracing
Path tracing is a way of solving the rendering equation using monte carlo integration. It is a form of ray tracing. According to wikipedia 'Path tracing is the simplest, most physically-accurate and slowest rendering method'. Sounds like the perfect target for a javascript experiment!
Implementation
The implementation is basically an extended version of the path tracer in my last post. It is using html5 web workers to render the image on up to 4 cores without locking up the page. One of the cool things I came up with is jittering the points on the view plane for each pixel to get rid of aliasing. I also changed the color of the light to that of warm sunlight (~5400k). I probably got the fresnel equations wrong and generally things are quite rough. I'm not an expert in the field of raytracing and I probably did a lot of things in a suboptimal way. But feel free to have a look at the source code (~300 LOC) and ask questions. I think the code should be quite easy to understand.
Please write a comment if you've got anything to say. If you think my experiments are interesting, follow me on twitter or subscribe to my atom feed.
Jonas Wagner
Really impressive work! Your rendering suite could serve as a cool benchmarking tool for browsers.
Comment by Pascal — 5/20/10 11:49 AM | # - re
Works fine with Opera 10.60.
Comment by Sho — 7/8/10 8:28 PM | # - re
Cool. Looks like opera supports webworkers now.
Comment by Jonas Wagner — 7/10/10 7:18 AM | # - re
ellen page naked www.ciaraworld.com/us/node/7693 ellen page sexy
Comment by geossylofsvor — 7/30/10 11:38 PM | # - re
erin andrews nude in hotel www.enjoyincubus.com/us/node/96301 nude video of espn reporter erin andrews
Comment by KEPAREREERT — 7/31/10 1:39 AM | # - re
lindsay lohan fully nude www.michaeljackson.com/us/blog/lindsay-lohan-nude lindsay lohan nude videos
Comment by IodilaassittY — 7/31/10 4:58 AM | # - re
I am very happy to look your blog.i am chinese.I am a student of Jiangxi university of science and technology . The english is not my mother tongue，too.I hope i can learn more soft knowledge form here.
Comment by riyun zhu — 4/7/11 4:16 PM | # - re
This is incredible! It looks as real as a real photo... :)
Comment by Derek — 7/29/11 10:36 PM | # - re
Great Work,
Can you tell me how to add a simple 3DFace or a mesh to the rendering scene with your code?
I am developing a rendered for simple OBJ files on html5.
Comment by Eyal — 9/16/11 9:13 AM | # - re
Theoretically: Just implement a new shape, practically it will slow down to a complete crawl. ;)
Comment by Jonas Wagner — 9/16/11 9:49 AM | # - re
Ported to C++. About 100 times (or more) faster :D
Comment by Frizi — 10/25/11 11:40 PM | # - re
just take a look. 258000 samples rendered in one second (between redraw), operating on doubles (because floats are not enough). dl.dropbox.com/u/14935971/permanent/pathtracer-early.png
Comment by Frizi — 10/25/11 11:45 PM | # - re
To render Obj=> implement the triangle primitive, then make an importer, won't be hard todo. About the jiltered noise to avoid aliasing: yes, it's cheap, but doesn't work very well, try a simple multidimensianal (3) noise + super sampling, you'll have better antialiazing + better noise coverage resulting in faster convergeance of the final (noisefree) render.
Comment by thxraph — 12/21/11 4:39 PM | # - re