Ray Tracing in JavaScript

I wanted to learn a little about ray tracing, and I’m kind of obsessed with javascript at the moment so i cranked out this little gem. I’m planning to add more features to it when I get a chance, but for now you can set the parameters for the sphere and location of the light source. Press ‘Trace’ to get an image on the canvas (which may take a few seconds).

Sorry, it looks like your browser doesn’t support the canvas elemenet.
Sphere x : y: z: c: color:
Light Source x: y: z:
(This might take a while)

The camera is at (0,0,1000) and the viewing window is the X-Y plane. You are looking “down” on the ball.

Based on the algorithm described here.

I’ll be putting the code up on GitHub once I clean it up a little. The tracer is pure JS, but I used knockout for the controls. Data binding is the worst.

I also want to add more features to it, like different shapes, translucency, and reflection. At that point it may become too slow to run in the browser, at least at this resolution.

I need to figure out how to write bitmaps in node. That’s going to be a bit of a challenge since there doesn’t appear to be an existing implementation and the asynchronous file API is awkward for streaming data to disk.

Comments