Render Quest
Human Quest · ToolsInteractive 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
- 10interactive labs
- curated resources
- 37curated resources
- stock images
- 0stock images
How a lab works
One idea, and the controls to it.
Pick one idea
10 labs in sequence, each one assuming the one before it.
Move the numbers
Drag a matrix and watch the geometry move. The numbers driving the render sit beside it, live.
Know where it stops
Every lab ends with what you can now do, and what it did not teach you.
The labs
10 labs, one idea each.
Start here
The Model Matrix
Move, turn and stretch an object by dragging the numbers that do it, and watch the matrix fill in as you go.
What you should come away withWhy a matrix chain reads right to left, and why the columns are the object’s own axes.
Open the lab →Projection & the Frustum
See the camera’s frustum as an object in the world, and the picture it produces, side by side.
Open the lab →Coordinate Spaces
Follow one vertex from model space to the pixel it lands on, one stage at a time.
Open the lab →Light & Normals
Move a light around a surface and watch the shading model respond, term by term.
Open the lab →Textures & Sampling
Wrap, filter and mip a texture, and see what each sampler setting actually costs you.
Open the lab →Compute & Particles
A hundred thousand particles moved entirely by the GPU, with no per-particle work on the CPU at all.
Open the lab →Draw Calls & Instancing
Draw the same object ten thousand times and watch where the time actually goes.
Open the lab →Colour & Gamma
Split one lit sphere down the middle and light the two halves in different colour spaces.
Open the lab →Depth & Transparency
Make z-fighting happen on purpose, then fix it from the frustum — and find out why transparency needs sorting.
Open the lab →Write a Shader
An editable fragment shader that recompiles as you type, with the driver’s own errors underneath.
Open the lab →The end of the sequence, for now
10 labs, each one assuming the one before it. What comes after them is written down, including what was proposed and turned down, with the reason.
Pick a technology
The same scenes, four ways.
Two reference scenes on every page. WebGL and WebGPU run them here; Three.js and vgpu are shown as code. What differs is only what you write around them.
WebGL
Runs hereBrowser API · GLSL
The baseline. Everything on this site runs on it.
WebGPU
Runs hereBrowser API · WGSL
The successor. Stricter, far more capable, and finally shipping.
Three.js
Code onlyLibrary · scene graph
A scene, not a pipeline. The default answer for most 3D on the web.
vgpu
Code onlyLibrary · 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. Most are free. Every link is checked.
Open the reading pathHow it is built
An instrument, not a brochure.
No 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 numbers are on screen
Every lab puts the numbers driving the render next to it, live: the matrix, the depth budget, the measured cost of a frame.
Checked, not asserted
The matrix library ships with a numeric test suite. Claims about how a projection behaves are verified on every commit.
Lab 01 · The Model Matrix
Start by moving one number.
Found a mistake, bad arithmetic, a figure that will not run? Open an issue. Stuck on a lab? Ask in Discussions. Both reach me, and both are public.