Initial Photon Scattering

Finally, after many battles, I have simple photon scattering.

First, I ported my existing intersection code from the shader to Javascript. I realize that this is code duplication, but I feel that it is necessary since I see that photon mapping should be done on the CPU side. (Also, this is a question that should be addressed later.) Next I moved the scene list over to Javascript, which is then passed down to the shader. Here, I didn't handle shape types -- for shapes, I have lists of positions, radii, and colors; I didn't want to add another for types. So at the moment photon scattering only works with spheres. To support cubes, I'm planning to pass a different list down to the shader for each shape. Probably not a good idea for extensibility, but it is the most efficient in terms of memory.

Then I performed photon scattering by shooting rays, storing their position and color as they hit objects, and recursing on the reflected rays. At this point, I don't have the correct power/color computation. I'm only directly storing color as they are absorbed, just to see if I can do it correctly.

Next step would be to do correct photon scattering, which involves correct power adjustment and Russian Roulette method for absorption.

Here is a screen shot of photons visualized over a ray traced scene. The color showing is the color of the previous reflected surface, and each photon can be traced correctly.

More Frustration...

Three.js has many useful built-in classes. It even has a Ray class and a Scene class complete with objects, meshes, and intersection code.

Today I was trying to use the built in intersection functionality for photon scattering. Turns out, I spent +5 hours (and counting) trying to figure it out. It should be very simple but for some reason I am not getting any intersections.

I've been posting questions on github asking for help. Here's what's going on:
https://github.com/mrdoob/three.js/issues/680

Passing Arrays to Shader

Finally, I have decided to do photon scattering on the CPU side.

Therefore I would need to figure out how to pass an array of photons to the shader after they have been scattered. Today I spent 4 hours trying to figure out how do pass arrays to the shader.

Since you cannot pass arrays as uniforms into the shader itself, I would need to construct a texture out of photon data and sample it for values. I'm not sure that I could construct a texture and pass it to the shader in Three.js, so I rebuilt my existing Three.js renderer in just pure WebGL, since I know I can construct a texture in OpenGL.

After 4 hours, I figured things out and completed a version of my renderer on WebGL. However, at that point, I also found out that you can pass arrays to the shader in Three.js very easily, just like passing any other types of data.

So it looks like I just wasted 4 hours that I could've spent on the actual photon scattering.

Where to Build Photon Map?

As I sat down to carefully read about photon mapping and think it through, one big question popped up that is stopping me from moving on:

Where should I be building this photon map?

The photon map is view independent, and is static unless something in the scene changes. Thus, it makes sense to build it on the CPU side (Javascript) then pass it down to the shader to do per-pixel ray tracing. However, I have read a few articles (including John CIS565 lecture) that mentions constructing the photon map on the shader, and how it can give a better performance.

Right now, CPU side construction makes more logical sense to me. However, if I choose to do this, I would have to re-implement all the intersection code for shapes, and move the scene from shader back to Javascript, which will be a bit more work. I also will need to look into how I can pass non-primitive data structures down to the shader.

Anyone who knows anything about this please advise?

I haz a Cornell Box!

Ray traced. Reflection depth 2. Results look correct. Should be ready for the next step.

The code is live at http://iamnop.co.cc/webgl