I've spent the last couple of weeks learning about the art and science of Ray Tracing. Ray tracing, for those who aren't familiar is one technique for generating 3d computer graphics. Ray tracing isn't the fastest way to generate 3d images but it's appeal lies in both the realistic effects that can be achieved and in the elegance of simplicity of the technique. This technique is used in movies and for photo-realistic architectural renderings.
Without getting too much into the weeds, ray tracing works by going through each pixel of the resulting 2d image and shooting a virtual light ray into the scene and tracing it's path by reflecting it off surfaces to determine which color to set the pixel. It's that simple really. For a simple scene consisting of spheres and planes we can use some basic geometry with vectors to calculate intersection points with objects. To determine shadows, we similarly shoot a ray from an object to our virtual light source and check if there are any intersections in between and therefore the object is in shadow.
I started out with this great example, Literate Raytracer by Tom MacWright. The explanations in the code comments really made sense to me. I extended Tom's code to add some additional features such as support for planes, checkerboard textures and some improved reflections, to get more familiar with the techniques. There's some outstanding content available at https://www.scratchapixel.com/. If you want to learn more about Raytracing or computer graphics in general, it would be a great place to start.
This seems to vary per browser but as a rough, not scientific result, here's what I was getting in Firefox Quantum 61.0.2:
- WebAssembly: 22.0fps
You can play with my Ray tracer by getting the code on Github or there's a fun interactive example here where you can compare the performance on your own machine.
I'm sure I've missed some things out here, so feel free to leave a comment below or ping me on twitter @mt_harrison.