Hello! This is the online handbook for Dylan Beattie’s JavaScript ray-tracer workshop.

The handbook includes instructions and code samples for each part of the workshop, for attendees who want to follow along with the live coding exercises and build their own JavaScript ray tracer.

Contents

• 1: Creating the Radiance application

  Creating the project structure, and running it on your local machine using vite or spark.

• 2.2: Working with Colors

  Introducing the HTML canvas element and the browser APIs we can use to work with it.

• 2.3: Procedural Rendering

  Introducing the HTML canvas element and the browser APIs we can use to work with it.

• 2.1: The HTML Canvas API

  Introducing the HTML canvas element and the browser APIs we can use to work with it.

• 3.1: Vectors and the 3D Coordinate System

  In which we learn about vectors, 3D coordinate systems, and some neat JavaScript stuff like how to create immutable data structures using private class fields.

• 3.3: Rays, Scenes, and the Camera

  Modelling light rays using vectors.

• 3.4: Rendering an Empty Scene

  In this section we'll create a scene containing only a camera and a background color, and run a test render to check that everything we've got so far is working properly.

• 4: Shapes

  Let's add some shapes to our ray-tracer.

• 5: Lights and Shading

  In this section, we'll add lights to our scene, and learn how to shade the surface of a sphere.

• 6: Planes and Boxes

  We add support for two new shapes - an infinite plane, and a rectangular box.

• 7: Shadows

  Adding support for shadows

• 8: Specular Highlights

  Adding support for specular highlights. That's the technical term for "shiny spots".

• 9: Reflections

  Adding reflections so we can model mirrors and reflective surfaces

• 10: Web Workers

  In this module, we move all our rendering into a background worker process so that our browser doesn't become unresponsive while a scene is rendering.

• 11: Using ImageData

  In this module, we look at how to use advanced data structures to optimise the performance of our web workers.

• 12: Multiple Workers

  In this module, we dramatically speed up our tracer by creating multiple workers, runing each worker on a different CPU core, and combining the results into a single image.

• 13: Patterns

  Extending materials so we can use patterns like checkerboards and stripes.

• 13: Going Further

  Topics and features for further explanation