Short notes, each paired with one interactive demo. The note explains the concept; the demo is where it lands. Drag things.
the maths everything else assumes
For the pure-maths intuition — cos/sin, what a dot is, cross, SDFs — see ../math/trig-and-vector-heuristics.md. This note is the same few operations seen from inside a renderer or a…
how a mesh becomes pixels
Everything a GPU draws takes the same conveyor belt: vertices in one end, lit pixels out the other, each station doing one job and handing the result on. Knowing the order is how you…
A vertex is quoted in six different spaces on its way to the screen, and every matrix in the chain is just a change of address. The geometry never changes, only what the numbers are…
Rasterization is where a triangle stops being three points and becomes pixels; the depth buffer stops those pixels stacking up in the wrong order. Both are fixed hardware you never…
the programs that decide colour
A shader is a tiny program the GPU runs once per thing: once per vertex, or once per fragment (a candidate pixel). You don't write the loop over pixels — you write the body of it, and…
Shading answers one question per pixel: how much light leaves this surface towards my eye? Lambert, Phong, PBR are just different guesses at that answer. The inputs are always the same:…
A texture is an image; a sample is asking "what colour is the image at this spot?" Everything hard about textures comes from the gap between the grid the image is stored on and the grid…
the passes on top
Opaque geometry is order-independent: the depth buffer decides who wins, so you can submit draws in whatever order is fastest. A transparent surface gives that up. Its result depends on…
Render the scene to a texture instead of to the screen and the frame stops being geometry: it becomes an image you can do arithmetic on. Draw one full-screen quad, sample that texture in…
Render the scene from the light's point of view and keep only the depths. Then, while shading a pixel, ask: is anything closer to the light than I am? If yes, something is blocking the…
making things collide and move
Every collision test answers one question: do these two shapes overlap, and if so, by how much and along which direction? The "how much" is the penetration depth, the "which direction"…
Detection told you two bodies overlap, by how much, and along which normal. Response has two jobs, in this order: get them un-overlapped, then fix their velocities so they stop moving…
Integration answers "given this thing's velocity and acceleration, where is it next frame?" It is three lines of code, and which three decides whether your springs settle or detonate.…
Testing every object against every other is n²/2 tests, and n² is a cliff. 200 objects is 20,000 tests a frame — fine. 2,000 objects is two million, and 2,000 is not a big level. The job…
asking what a pixel sees
Rasterization asks, for each triangle, which pixels does this cover. Raytracing asks, for each pixel, what does this pixel see — then asks it again from wherever the answer landed. A…
Classic raytracing (14-raytracing.md) solves "where does this ray hit?" with algebra, so it needs an intersection equation per shape type. Raymarching declines to solve it: it walks…
orientation, and values moving over time
Storing where a thing is takes three numbers and no argument. Storing which way it faces takes a choice, and the choice has consequences: pitch-and-yaw is simple and breaks at the poles,…
Moving a value from where it is to where it should be, over time. Note 12 is about simulating motion under forces; this is about authoring it — a tab sliding out, a camera settling…