Five
Chapters

A hands-on path from the first line of shader code to the math of raymarching a 3D scene, and then out into real projects. Each chapter is a single page of prose and interactive diagrams. They build on one another — read them in order for the clearest arc, or jump to the one you already have the pieces for.

1. 01

   The Pixel

   A shader that answers one question at every pixel — what color lives here? — and from those answers, a shape appears. Output color, pixel position, distance fields, the threshold that makes a circle, and the mix that paints it.

   Available
2. 02

   Time and Repetition

   A shader that answers a different question every frame, and the same question a thousand times across a grid. u_time, sin, symmetry via abs, tiling via fract.

   Available
3. 03

   Randomness and Noise

   Hash functions and noise. Why a grid stops looking like a grid once every cell can pick its own number. Value noise, gradient noise, FBM, and domain warping.

   Available
4. 04

   The Third Dimension

   A shader stops answering "what color?" and starts answering "how far?" — the shift that turns a flat canvas into a 3D scene. Sphere-tracing, signed distance fields, normals, diffuse light, and smooth blending.

   Available
5. 05

   Connections

   A shader becomes part of something larger. Three.js gives it 3D geometry to wear; Tone.js gives it audio to react to; and the same patterns open up for any framework that calls GLSL.

   Forthcoming

Back to the Playground