Interactive graphics labs
Learn graphics by moving the numbers.
A transform is not a table of sixteen numbers — it is a motion, and you cannot see a motion on a static page. So here you drag the numbers themselves and watch the matrix, the geometry and the pixels change together.
- interactive labs
- 4interactive labs
- curated resources
- 37curated resources
- stock images
- 0stock images
Live WebGL, 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
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 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.