Labs
Printed matrices hold still. These do not.
One idea per lab, written out and then handed to you: each is an essay with the argument in the prose and figures that isolate one control at a time, and the full instrument at the foot of the page. Everything runs live in your browser, and dragging inside a canvas orbits the camera. The two labs with no camera to orbit — a particle field drawn straight in clip space, and a full-screen shader — say so themselves.
They are numbered, and the numbering is not decoration: each one assumes the ideas of the one before it. Start anywhere you like — but if a lab refers to something it has not explained, the lab it came from is the previous number.
A matrix does not care which API multiplies it, so most labs are built on WebGL — it runs everywhere, and the concepts transfer unchanged to WebGPU. Where a lab genuinely cannot be built on WebGL, it says so and uses WebGPU instead. Which to reach for is its own question, and the technology guide answers it.
The Model Matrix
Open →Move, turn and stretch an object by dragging the numbers that do it, and watch the matrix fill in as you go.
- translate
- rotate
- scale
- composition order
- basis vectors
Projection & the Frustum
Open →See the camera’s frustum as an object in the world, and the picture it produces, side by side.
- perspective
- orthographic
- near / far
- clip space
- field of view
Coordinate Spaces
Open →Follow one vertex from model space to the pixel it lands on, one stage at a time.
- model space
- view space
- clip space
- NDC
- viewport
Light & Normals
Open →Move a light around a surface and watch the shading model respond, term by term.
- normals
- lambert
- specular
- inverse-transpose
Textures & Sampling
Open →Wrap, filter and mip a texture, and see what each sampler setting actually costs you.
- UV coordinates
- filtering
- mipmaps
- wrap modes
Compute & Particles
Open →A hundred thousand particles moved entirely by the GPU, with no per-particle work on the CPU at all.
- compute shader
- storage buffers
- workgroups
- WGSL
- instancing
Draw Calls & Instancing
Open →Draw the same object ten thousand times and watch where the time actually goes.
- instancing
- draw calls
- instance_index
- CPU cost
Colour & Gamma
Open →Split one lit sphere down the middle and light the two halves in different colour spaces.
- sRGB
- linear light
- gamma
- encode / decode
Depth & Transparency
Open →Make z-fighting happen on purpose, then fix it from the frustum — and find out why transparency needs sorting.
- depth buffer
- z-fighting
- blending
- draw order
Write a Shader
Open →An editable fragment shader that recompiles as you type, with the driver’s own errors underneath.
- fragment shader
- GLSL
- compile errors
- uniforms
The end of the sequence, for now
10 labs, each one assuming the one before it. What comes after them is written down rather than implied — including the things that were proposed and turned down, with the reason.