I Have Ray Tracing!

I spent this past week figuring out how to set up a framework using Three.js for rendering. More specifically I looked at the following:

1. How to set up a working mouse-controlled camera
2. How a shader is setup and used from Three.js
3. How to pass variables to the shader from Three.js
4. Learn OpenGL shading language (GLSL)

Along the way, I realized that there is very little documentation on Three.js. The API is a work in progress, and Google searches return nothing more than a handful of basic tutorials.

After a few hours of poking around, I finally found the places that I can use for reference. They are not as great as APIs but they will work:

1. A large collection of Three.js examples written by the author himself (http://mrdoob.github.com/three.js/)
2. The actual source code on github, which is as close to an API as I could find.(https://github.com/mrdoob/three.js/tree/master/src)

In addition to those sources, I looked at two specific related WebGL implementations to see how the framework is setup:

1. Ray Tracing (http://people.mozilla.com/~sicking/webgl/ray.html). Simple and easy to understand. I actually emailed the author to inquire further about his framework.
2. Path Tracing (http://madebyevan.com/webgl-path-tracing/). Amazing implementation and the original source of my inspiration. Builds the scene into the shader dynamically using Javascript, very fancy.

Relying mainly on the two existing implementations, I designed and implemented my framework. The rendered image will be displayed as a texture on a quad; thus, there isn't much on the WebGL side at all. As far as WebGL knows, there is only a one simple geometry in the scene. This is implemented as a quad facing in the positive z direction to a static camera.

The quad acts like a screen, and the custom shader on this quad is where all the rendering happens. The shader will look at some the actual scene to be rendered, performs the necessary computations, and outputs an final image onto the quad.

At the moment, I implemented a camera from Three.js that is controlled by the mouse, and I used the base code from the ray tracing example in my shader to set up ray tracing and a simple dummy scene. The result is successful. I have real-time ray tracing and an interactive camera. The results can be viewed here: http://iamnop.co.cc/webgl, and here is a screenshot (since I realized that I am constantly changing the code on the page.)

For next week, I will need to first build my scene graph. At the moment, I have not decided how or where I am going to implement the scene to be rendered, whether it would be built on Three.js's scene graph with values that are passed to the shader, or whether it would be build and used within the shader itself, which is what the two existing implementation did.

Once I have a proper scene graph set up, I can finally start working on rendering with global illumination. I will mainly rely on one of Hendrik Jensen's sources that I have. They are thorough and include all necessary implementation details and mathematical formulas.