This was the second project I completed for my intermediate graphics class and my introduction to ray tracing. The goal of this project was to create a simple ray tracer with implicitly defined shapes such as spheres, cubes, and cylinders with various types of materials that are illuminated using the Phong reflection model. The ray tracer also features recursive reflections, soft shadows, transparency, and shape tranformations such translation, rotation, and scaling along any given axis. The ray tracer was built using typescript and WebGL, and features a wire mesh preview of the scene that exactly matches the ray traced result to help set up the scene and the camera. As with the particle system project, this project also uses dat.gui to create a control panel that allows the user to change every adjustable parameter including resolution, super sampling rate, and light position and color.

Note that with this ray tracer, all of the computation is done using javascript, which is single threaded. As a result, it is fairly slow – each of the example images that follow took several minutes to render. Also, all of the code for this project was written from scratch including the code to set up the camera (in the rasterized and ray traced views), handle input controls, create the wire meshes, compute the implicit shapes and their normals, etc. While that did significantly add to the complexity of the project, having to do so was invaluable as an educational tool to get experience with every aspect of the pipeline. With that said, this is far from a realistic renderer, most notably because it uses the phong reflection model and does not conserve energy.

A complete writeup for the project can be found here.

You can view the project itself here.

Other Renders

Render of the glass and mirror scene. A render of the ‘Glass & Mirror’ scene showcasing a glass sphere on the left and a mirror sphere on the right.

Render of the spherical gems scene. A render of the ‘Spherical Gems’ scene showcasing spheres of different gem materials with various transformations applied to them.

Render of the shiny metals scene. A render of the ‘Shiny Metals’ scene showcasing the reflectance of different metals using the phong reflectance model.

Render of the Cubes (re-oriented) scene. A render of the ‘Cubes (Re-oriented)’ scene showcasing the headlamp feature.

Renders of the Complex scene with different shadow settings. A render of the ‘Complex’ scene cropped to showcase different implementations of soft shadows from area lights. The left and middle images show the effect of treating the area light source as several individual point light sources with low resolution (left) and higher resolution (middle). The right image showcases stochastically sampling the area light.