Interactive graphics labs
Learn graphics by moving the numbers.
A transform is not a table of sixteen numbers — it is a motion, so here the numbers are under your fingers, and the matrix, the geometry and the pixels move together.
- interactive labs
- 8interactive labs
- curated resources
- 37curated resources
- stock images
- 0stock images
Rendering right now — the projection lab with its controls taken away. The cyan wireframe is a camera’s view frustum, breathing as its field of view changes.
The labs
Each one isolates a single idea and gives you the controls to 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
The end of the sequence, for now
8 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.
Pick a technology
The same scene, four ways — WebGL, WebGPU, Three.js and vgpu rendering one identical scene, so the only thing you are comparing is the code.
WebGL
~42 linesBrowser API · GLSL
The baseline. Everything on this site runs on it.
WebGPU
~58 linesBrowser API · WGSL
The successor. Stricter, far more capable, and finally shipping.
Three.js
~22 linesLibrary · scene graph
A scene, not a pipeline. The default answer for most 3D on the web.
vgpu
~12 linesLibrary · WebGPU + WGSL
A small typed layer over WebGPU that also runs headless.
Learn
Then read the best of what everyone else has written.
The labs cover the spine. For the rest there is a curated path of 37 resources across graphics and game development — courses, books, interactive explainers and tools, each with a line on why it earns your evenings, arranged so every stage makes the next one easier. Most are free. Every link is checked.
Open the reading pathNo framework in the way
Raw WebGL and WebGPU, and a few hundred lines of matrix maths. The plumbing a scene graph would hide is the actual subject, so none of it is hidden.
The maths is on screen
Every lab shows the live matrix next to the render. The coloured columns in the readout are the coloured axes on the canvas — the same thing, twice.
Checked, not asserted
The matrix library ships with a numeric test suite. Claims about how a projection behaves are verified on every commit rather than written down and hoped for.