A tutorial beside the program
ShadyTracer, inside out
ShadyTracer is a path tracer that runs in your browser: it makes a picture by following rays of light backwards from the camera, bouncing them around the scene at random, and averaging what they find. This tutorial is how it works, from the first ray to every trick that makes it fast: rays, distances, light, glass, noise, photons, haze and the graphics card. For anyone who wants to understand ShadyTracer's code, build their own renderer, or improve this one.
◇What you need
A little programming: JavaScript's variables, loops, functions and arrays are enough to follow the code, and the text says what each excerpt does. School maths: algebra, Pythagoras, sin, cos and tan, and arrows (vectors) with an x and a y. No calculus, and no ray tracing, optics or graphics-card programming: the chapters start from nothing. The harder maths waits in fold-outs marked The maths, and every chapter reads without them.
◇Where to start
Read chapter 1, Rays make a picture, then chapter 2, Shapes as distances. Chapter 14, Aim at the light, can be read straight after them: it says what it borrows from the chapters in between, which are not written yet. To see the program itself, open ShadyTracer in a browser with WebGPU (a recent Chrome or Edge, on a computer with a graphics card).
◇The map
Thirty-four chapters in ten parts, in reading order. The filled stations are written; the rest are planned, each with a line on what it will cover. Every chapter has the same shape: the question, the idea with a live figure, the maths in a fold-out, the real code, the tricks and what they cost, what went wrong before, things to try, and where to read more.
◇Reading the figures
Most figures are drawn in a flat world: a slice of a scene, so it can be drawn and dragged; a few are 3D, and turn when you drag them. Within a style, the same colour and line mean the same thing in every figure: the key here is drawn in the style you are viewing. Circled crosses (⊕) are handles: drag them. Paragraphs with a dot beside them move the figure next to them when you scroll to them (or click them).
Words with a dotted underline are in the glossary, the list of every word the tutorial explains; hover or tap one for a short explanation. Code shown on a page is read from ShadyTracer's own files when you open the page, with a link to the exact lines.
◇How sure is each claim?
The people who write ShadyTracer hold every statement to one question: do I know this, or do I think it? The tutorial marks the difference the same way, with a stamp, wherever it matters (mostly when it is about speed). Point at a stamp on any page for what it means.
Someone ran it on real hardware and wrote the number down. The page says who, on which graphics card, and where it is recorded.
The code does this, and the page links the line. It says what the code does, never what it costs.
A reasonable guess, not yet tested. The page says what would test it.
These pages come in several styles, each light or dark: the Style menu at the top right switches the style, the Dark / Light button beside it between dark and light pages, and the styles page shows every style with its key. Your choice is kept on this device.