Implementing a Ray Tracer in JavaScript

Peter Shirley has a small book, called Raytracing in one weekend which is exactly as the title says: implementing a ray tracer in one weekend. And yes, you can do it in one weekend. And do it in whatever language you choose. They book is really good as a introduction to ray tracing and I strongly recommend it.

/rt-dia.png

Sometime ago I decided to do an implementation in Javascript. Why JavaScript? I wanted to do something in the browser whilst trying to see how well does JavaScript performs.

I was positively impressed by most browser implementations of JavaScript, as least performance-wise. If you think pure-JavaScript is the browser is not efficient, then compare the speed against a pure-Python implementation running on the standard CPython interpreter. Its a bit shocking (and not in a good way for the Python side).

I am not commenting here about language design, just performance.

OK, you can see my implementation in action online here. The code is available on my weekend-raytrace repository.

While JavaScript is faster than expected, this is still ray-tracing implemented on the browser in a couple of days, so adjust your expectations accordingly!

/rt-red.png

The code is designed in a way that allows you to understand all the steps: From simply writing to an HTML step, to the final image: 16 steps in total, clearly separated.

/rt-final.png