Glossary

The words, without the hand-waving.

61 terms this site actually uses, defined in plain language. 54 of them link to a lab that demonstrates the idea, because the fastest definition of “perspective divide” is a slider that performs one. 51 of those links open the lab with the controls already set to show the term, and say what to look at when they land.

Aliasing See it happen · Textures & Sampling: What happens when a signal is sampled too sparsely to represent it — jagged edges, and the crawling shimmer on a detailed texture seen at a distance. Mipmaps and anti-aliasing are two different answers to it.; What to look atNothing here is moving and the far half of the plane has still broken into rings and speckle: hundreds of texels land in one pixel, and nearest hands back whichever one the pixel centre happened to hit.; See alsoMipmap Filtering Rasterisation
Alpha blending See it happen · Depth & Transparency: Combining a fragment with what is already in the framebuffer, weighted by its alpha. It is not commutative — red over green is not green over red — which is why translucent geometry has to be sorted back to front, on the CPU, every frame.; What to look atSorted, the overlap reads red over green over blue, which is where the panes actually are. Unsorted it read the other way round — the same three panes, combined in a different order, are a different picture.; See alsoDraw order Depth buffer Fragment
Attribute: Per-vertex input to a vertex shader — position, normal, colour, texture coordinate. Each vertex gets its own value, read from a buffer you describe the layout of.; See alsoUniform Varying Vertex
Backface culling: Discarding triangles that face away from the camera before they are rasterised, decided by winding order. Roughly halves the work on a closed shape, and makes a model with inconsistent winding look full of holes.; See alsoWinding order Rasterisation
Basis vectors See it happen · The Model Matrix: The three vectors a transform sends the x, y and z axes to. They are literally the first three columns of the matrix, which is why colouring those columns and colouring the axes on screen shows the same thing twice.; What to look atThe green arm is two and a half times the length of the other two, and the matrix’s middle column reads 0, 2.5, 0. The arm and the column are the same three numbers.; See alsoModel matrix Homogeneous coordinates Vertex
Batching See it · Draw Calls & Instancing: Merging things that would have been separate draw calls into one — same material, same buffer, submitted together. Instancing is the case where the merged objects are identical; batching more generally is why engines fight so hard to keep materials uniform.; See alsoDraw call Instancing
Clip space See it happen · Coordinate Spaces: Where vertices land after the projection matrix and before the perspective divide. Coordinates are homogeneous — a point survives clipping when each of x, y and z lies within ±w. Still a pyramid at this point, not a cube.; What to look atThe blend parked at the clip-space end: w has stopped being 1 and reads 3.714, which is exactly how far in front of the camera the vertex was.; See alsoNDC Perspective divide Homogeneous coordinates
Compile error See it happen · Write a Shader: A shader that the driver refused. The message names a line and a reason, and is the single most useful thing on screen when a shader goes wrong — but only if something is showing it to you, which is why a failed shader usually presents as an unexplained black surface instead.; What to look atA vec3 assigned to a vec4, and a missing semicolon. The driver’s own message appears under the editor with the line number, renumbered back past the preamble you cannot see.; See alsoShader GLSL Fragment shader
Composition order See it happen · The Model Matrix: The order matrices are multiplied in, which is not commutative and reads right to left: in T · R · S the scale reaches the vertex first. Swap two and the object goes somewhere else entirely.; What to look atThe same rotation and the same translation on both sides, composed the two ways round: at the end of the slider the two cubes stand 2.03 units apart.; See alsoModel matrix Basis vectors
Compute shader See it happen · Compute & Particles: A shader that is not part of the drawing pipeline. It has no vertices and no fragments — just a grid of invocations reading and writing buffers. WebGL has no such stage at all.; What to look atA hundred and twenty thousand particles, every one of them stepped by a single dispatch each frame. There are no vertices and no fragments in that pass — only a grid of invocations over a buffer.; See alsoWorkgroup Storage buffer Shader
CPU-bound See it happen · Draw Calls & Instancing: When the frame time is set by how fast the CPU can prepare and submit work rather than by how fast the GPU can execute it. The tell is that reducing triangles changes nothing while reducing draw calls changes everything.; What to look atA thousand draw calls for 12,000 triangles, which no GPU would notice. Take the count up and the frame time follows the calls; the triangles have nothing to do with it.; See alsoDraw call Instancing
Depth buffer See it happen · Depth & Transparency: A per-pixel record of how far away the nearest thing drawn so far is, so a fragment behind it can be discarded. Also called the z-buffer. It is why opaque geometry can be drawn in any order and still occlude correctly — and, because it only ever answers "what is nearest", why translucent geometry cannot.; What to look atWith writing off the two panes behind come back. They had been failing the depth test and being discarded — the buffer doing exactly its job, on the one kind of geometry it cannot help.; See alsoZ-fighting Depth precision Alpha blending Fragment
Depth precision See it happen · Depth & Transparency: How finely the depth buffer can distinguish distances. It is distributed hyperbolically rather than evenly: most of the range is spent close to the camera, so the near plane governs precision far away and the far plane barely matters at all.; What to look atDrag the far plane anywhere between 10 and 1000 and the prediction stays at 7.6e-3. Take the near plane from 0.05 to 0.5 instead and it drops by a factor of ten.; See alsoZ-fighting Near and far planes Perspective divide
Draw call See it happen · Draw Calls & Instancing: One instruction from the CPU telling the GPU to render something. Each one costs CPU time to validate and submit whether it draws two triangles or two million, which is why a scene can be limited by how many times you asked rather than by how much you asked for.; What to look atThe same ten thousand cubes, the same 120,000 triangles and the same shader, asked for one at a time. Only the number of times the CPU asked has changed, and the CPU figure changed with it.; See alsoInstancing CPU-bound Batching
Draw order See it happen · Depth & Transparency: The sequence draws are submitted in. Irrelevant for opaque geometry, because the depth buffer sorts it for you; decisive for translucent geometry, because blending depends on what was underneath at the time.; What to look atThree translucent panes submitted in array order with depth writing on: whichever is drawn first stamps the buffer, so panes disappear according to when they were asked for rather than where they stand.; See alsoAlpha blending Depth buffer Draw call
Filtering See it happen · Textures & Sampling: How the sampler combines texels. Nearest takes one; bilinear blends four; trilinear blends bilinear results from two mip levels. Minification and magnification are set separately because they are different problems.; What to look atIn the foreground a checker boundary that was a hard edge becomes a ramp about a texel wide. The far end of the plane is identical either way — it is minified up there, and this control has no vote.; See alsoMipmap Texel Aliasing
Flat shading See it happen · Light & Normals: One normal per triangle, so each face is a single constant colour. You are seeing the mesh rather than the surface it approximates, which is sometimes exactly what you want.; What to look atOne normal per triangle: the sphere becomes the polygons it was always made of, and each face is a single constant colour.; See alsoNormal Gouraud shading
Fragment: A candidate pixel produced by rasterising a triangle — it has a position, interpolated attributes and a depth, but has not yet won its place in the framebuffer. A fragment shader runs once per fragment.; See alsoRasterisation Shader Depth buffer
Fragment shader See it happen · Write a Shader: The program run once per pixel a triangle covers, whose job is to return a colour. With a full-screen quad and no geometry to speak of, it becomes a pure function from pixel coordinate to colour — which is how most shader art is made.; What to look atFour lines and no geometry worth the name: every pixel’s colour is a function of its own coordinate and the clock, and there is nothing else in the program.; See alsoShader Fragment GLSL Compile error
Frustum See it happen · Projection & the Frustum: The truncated pyramid of space a perspective camera can see, bounded by the near and far planes. Not a thing you build: it is the canonical clip cube pulled back through the inverse of the projection matrix.; What to look atThe pyramid opens sideways and the near and far planes stay exactly where they were. The two boxes at 12.8 and 15.8 stay out at every angle — they are outside on depth, not on angle.; See alsoNear and far planes Projection matrix Clip space
Gamma See it happen · Colour & Gamma: The exponent relating an encoded colour value to the light it stands for — about 2.2 for sRGB. Raising a value to that power decodes it to light; the reciprocal encodes it back.; What to look atAt an exponent of 3 the number 0.5 is 12.5% of the light, and the patch that really is half the light climbs to 0.794. Those two readings are the whole of what the exponent means.; See alsosRGB Linear colour
Gamma correction See it happen · Colour & Gamma: Decoding colours to linear before lighting them and encoding the result back for display. Skipping it does not throw an error or look obviously broken — it darkens midtones and hardens the terminator, which reads as a lighting choice, which is why it ships.; What to look atThe divider disappears. At an exponent of 1 the two branches compute the same expression, so nothing else about them could ever have been what the seam was measuring.; See alsoGamma Linear colour sRGB
GLSL See it · Write a Shader: The OpenGL Shading Language, used by WebGL. C-like, with first-class vector and matrix types. Its WebGPU counterpart is WGSL.; See alsoWGSL Shader
Gouraud shading See it happen · Light & Normals: Lighting computed once per vertex, with the resulting colour interpolated across the triangle. Cheap, and it loses any highlight smaller than a triangle — which is most of them.; What to look atThe highlight is about the size of a triangle, so the three corner values it is built from flatten its sides; drag the sphere round and watch it pulse as it crosses the mesh.; See alsoPhong shading Flat shading Varying
Homogeneous coordinates See it happen · The Model Matrix: Adding a fourth component, w, to a 3D point so that translation becomes a matrix multiply like everything else. Points carry w = 1; directions carry w = 0, which is why translating a direction correctly does nothing.; What to look atOne number in the matrix moved and it is in the last column — the column that only reaches the vertex at all because the vertex carries a fourth component of 1.; See alsoPerspective divide Clip space
Instance index See it happen · Draw Calls & Instancing: The counter a vertex shader reads to know which copy it is drawing — `gl_InstanceID` in GLSL, `@builtin(instance_index)` in WGSL. It is what turns one set of vertices into a field of objects, by indexing per-instance data with it.; What to look atThe accent column that was counting 0, 1, 2, 3 is stuck at zero and the amber one counts instead: the CPU is doing the indexing now, and buying a draw call each time round.; See alsoInstancing Storage buffer Vertex
Instancing See it happen · Draw Calls & Instancing: Drawing the same geometry many times in one call, with per-instance data supplying what differs. The saving is not in triangles but in draw calls, which is usually where the CPU time actually goes.; What to look atTen thousand cubes and 120,000 triangles in one draw call. Note the CPU figure beside the canvas before you touch the mode switch.; See alsoDraw call Instance index Batching
Lambert See it happen · Light & Normals: The diffuse term: brightness proportional to how squarely a surface faces the light, and nothing else. It is the cosine of the angle between the normal and the light direction, clamped at zero so surfaces turned away are unlit rather than negatively lit.; What to look atSpecular and ambient at zero, so all the brightness left is the cosine of the angle between the normal and the light, and the terminator is where that cosine reaches nothing.; See alsoNormal Specular highlight Linear colour
Linear colour See it happen · Colour & Gamma: Colour whose numbers are proportional to actual light, so doubling the number doubles the brightness. The only space in which adding two lights together, or multiplying by a Lambert term, means what the arithmetic says it means.; What to look atTurn the light up and the uncorrected half blows out to flat white while the corrected half still has shape in its highlight. Doubling a number only doubles light in the space where light adds.; See alsosRGB Gamma correction Lambert
Mipmap See it happen · Textures & Sampling: The same texture pre-shrunk by half repeatedly, so there is always a level where one texel is about one pixel. Costs a third more memory and removes an entire class of artefact.; What to look atThe hard horizontal boundary partway down the plane was one mip level handing over to the next. Blending the two levels either side of it leaves no boundary to find.; See alsoAliasing Filtering Texel
Model matrix See it happen · The Model Matrix: Places an object in the world: its translation, rotation and scale combined. The only matrix in the chain you usually author by hand.; What to look atA 55° turn and a 2.2 move, in one matrix: exactly five of the sixteen floats have left the identity, and the eleven around them are still grey.; See alsoView matrix Projection matrix Model space
Model space See it happen · Coordinate Spaces: The coordinate system a mesh was authored in, centred on its own origin. Nothing has happened to it yet.; What to look atWound back to where the vertex starts — 0.5, 0.5, 0.5, the three numbers in the buffer — with no matrix applied and no ground grid, because there is no ground yet.; See alsoWorld space Model matrix
NDC See it happen · Coordinate Spaces: Normalised device coordinates: what you get after dividing clip space by w. A cube from −1 to 1 on every axis. Everything outside it is discarded, and everything inside it is about to become pixels.; What to look atStage five of six. Everything left is inside the cube from −1 to 1, and the tracked corner sits at 0.498, 0.505, 0.879 — the row above it in the table is what those numbers were before the divide.; See alsoClip space Perspective divide Viewport
Near and far planes See it happen · Projection & the Frustum: The front and back of the frustum. They are a hard clip, not a fade — geometry crossing them is cut. Putting near too close crushes depth precision, which is where z-fighting comes from.; What to look atA three-unit slab. The near plane cuts the closest box open where it crosses it, and the four boxes past 6 are dropped outright rather than fading out.; See alsoFrustum Depth buffer
Normal See it happen · Light & Normals: A unit vector perpendicular to a surface at a point, describing which way it faces. Lighting is almost entirely a question of the angle between the normal and the light.; What to look atAt a stretch of exactly 1 the green hairs stand perpendicular to the surface everywhere. Move the slider either way and they stop being normals — they are being carried along by the model matrix like ordinary geometry.; See alsoNormal matrix Flat shading
Normal matrix See it happen · Light & Normals: The inverse-transpose of the model matrix, used to transform normals. A normal describes an orientation, not a position, so scaling one axis must tilt it rather than squash it. Under uniform scale it reduces to the model matrix, which is why getting this wrong stays invisible for so long.; What to look atThe middle entry of the matrix beside the sphere goes from 0.40 to 2.50 — the inverse-transpose of a 0.4 squash — and the highlight drops by more than a third of the sphere’s height.; See alsoNormal Model matrix
Orthographic projection See it happen · Projection & the Frustum: A projection whose view volume is a box rather than a pyramid. w stays 1, so no perspective divide happens and distance never changes size. Right for CAD and isometric games, wrong for anything meant to look photographed.; What to look atThe volume is a box rather than a pyramid, and the boxes stop changing size with distance: w never leaves 1, so there is nothing for a divide to do.; See alsoPerspective projection Projection matrix
Perspective divide See it happen · Coordinate Spaces: Dividing x, y and z by w, performed by the GPU between the vertex shader and rasterisation. This single division is what makes distant things small — the projection matrix only arranges for w to carry the depth.; What to look atThe two rows of the readout are the whole of it: 1.850 ÷ 3.714 = 0.498, and the pyramid has become a cube.; See alsoClip space NDC Homogeneous coordinates
Perspective projection See it happen · Projection & the Frustum: A projection whose view volume is a frustum. Its defining feature is a −1 in the bottom row, which copies −z into w so the divide can shrink things with distance.; What to look atAt 90° the near face of a box is enormous and its far face small, though in the model they are the same size. That is the −1 in the bottom row, copying depth into w.; See alsoOrthographic projection Frustum Perspective divide
Phong shading See it happen · Light & Normals: Interpolating the normal across a triangle and computing lighting per fragment. More expensive than Gouraud and it puts highlights where they belong. Not to be confused with the Phong reflection model, which is the equation rather than where you evaluate it.; What to look atThe same shininess of 120, evaluated per fragment rather than per vertex: the highlight is round again, and stays round wherever it sits on the mesh.; See alsoGouraud shading Specular highlight Fragment
Projection matrix See it happen · Projection & the Frustum: Turns view space into clip space, deciding the shape of the visible volume — field of view, aspect ratio, near and far. It does not itself divide anything.; What to look atWatch the matrix beside the picture rather than the picture: the bottom row has gone from 0 0 −1 0 to 0 0 0 1, and the small box now lands at 0.600 of the big one’s height instead of nearly twice it.; See alsoPerspective projection Clip space View matrix
Rasterisation: Working out which pixels a triangle covers, and interpolating the vertex outputs across them. The step between geometry and fragments, and the reason GPUs are shaped the way they are.; See alsoFragment Varying
Shader See it happen · Write a Shader: A small program that runs on the GPU, once per vertex or once per fragment, in parallel across thousands of them. Vertex shaders decide where things are; fragment shaders decide what colour they are.; What to look atFour cells across, eight calls in the grid, and nothing circular left. The canvas below runs that same program 1,327,104 times, and no one of those runs knows about any other.; See alsoGLSL WGSL Fragment
Specular highlight See it happen · Light & Normals: The bright spot where a surface reflects the light source towards the eye. Its tightness is controlled by a shininess exponent; its presence is most of what makes a material look wet, polished or metallic.; What to look atOne exponent, from 40 to 160: the wash over the whole lit hemisphere collapses into a small bright disc. The light has not moved and neither have you.; See alsoPhong shading Normal
sRGB See it happen · Colour & Gamma: The colour space almost every image, screen and colour picker uses. It is deliberately non-linear — more of its range is spent on dark tones, because eyes are more sensitive there — which means the numbers in it are not proportional to light.; What to look atThe whole sphere is on the uncorrected branch now — lit by multiplying sRGB numbers. The midtones are darker and the terminator arrives as an edge, because those numbers are not proportional to light.; See alsoLinear colour Gamma Gamma correction
Storage buffer See it happen · Compute & Particles: GPU memory a shader can write to as well as read, unlike a uniform. It is what lets simulation state live on the GPU across frames instead of being shipped back and forth.; What to look atThe simulation has stopped and the picture is still there. The positions live on the GPU, and the draw goes on reading the same buffer the compute pass was writing.; See alsoCompute shader Uniform Workgroup
Texel See it happen · Textures & Sampling: One pixel of a texture, as opposed to one pixel of the screen. The whole business of texture filtering is deciding what to do when those two do not line up.; What to look atOne tile from almost overhead, so a single texel is several pixels across. Under nearest the foreground is visibly built of blocks, and one block is one texel of a 256-texel image rather than one pixel of the screen.; See alsoTexture Mipmap Filtering
Texture See it happen · Textures & Sampling: An image sampled by a shader. Usually colour, but just as often a normal map, a height field, a mask, or an arbitrary lookup table — to the GPU it is only structured memory you can interpolate.; What to look atOne copy of the image across the whole plane, from high enough to read it: a checker, the one-texel grey grid that aliases so badly further out, a cyan border and an asymmetric amber marker. Everything else in this lab is a decision about how to sample it.; See alsoTexel UV coordinates Filtering
Uniform See it happen · Write a Shader: A value that is the same for every vertex and fragment in a draw call — a matrix, a light direction, the current time. Set from JavaScript, read-only inside the shader.; What to look atOne number, read identically by every pixel in the draw: at uKnob 2 the radius sweeps from 0.39 to 0.71, and the readout beside it shows the 0.08 × uKnob that got it there.; See alsoAttribute Shader
UV coordinates See it happen · Textures & Sampling: The 2D coordinates that say where on a texture a vertex samples from, conventionally 0 to 1 across the image. Called u and v so as not to collide with x, y and z.; What to look atThe plane has not changed and neither have its vertices. Their texture coordinates are being multiplied by sixteen before the sampler sees them, and that is the whole of the tiling.; See alsoTexture Wrap mode Attribute
Varying: A value passed from the vertex shader to the fragment shader, interpolated across the triangle on the way. The mechanism behind Gouraud shading, texture coordinates and smooth colour.; See alsoAttribute Rasterisation Gouraud shading
Vertex: A point of geometry with attributes attached. Not quite the same as a corner: two faces meeting at one corner need two vertices if their normals differ.; See alsoAttribute Flat shading
View matrix See it happen · Coordinate Spaces: Moves the world so the camera sits at the origin looking down −Z. There is no camera object on a GPU; there is only this inverse.; What to look atThe world moved, not the camera: 1.226, 0.800, −0.793 becomes 1.226, 0.777, −3.714, and the origin is now the eye.; See alsoView space Model matrix Projection matrix
View space See it happen · Coordinate Spaces: Coordinates relative to the camera, after the view matrix. The camera is at the origin here, by construction.; What to look atStage three of six. The camera is at the origin by construction, and the tracked corner’s z of −3.714 is how far in front of it the vertex sits.; See alsoView matrix World space
Viewport See it happen · Coordinate Spaces: The rectangle of pixels being drawn into, and the final transform from NDC to pixel coordinates. Note that y flips: NDC counts up, pixel rows count down.; What to look at0.505 of the way up the NDC cube arrives as 148.5 pixels down a 600-pixel window: the y flip, in one number.; See alsoNDC Rasterisation
WGSL See it · Compute & Particles: The WebGPU Shading Language. Rust-flavoured rather than C-flavoured, strongly typed, with explicit binding annotations. Same job as GLSL, different spelling.; See alsoGLSL Shader
Winding order: Whether a triangle’s vertices are listed clockwise or counter-clockwise on screen, which is how the GPU decides which side is the front. Get it inconsistent and backface culling eats half your model.; See alsoBackface culling Vertex
Workgroup See it happen · Compute & Particles: The unit a compute dispatch is divided into — a small block of invocations that run together and can share memory. You choose the size; 64 is a common default because it maps well to the hardware.; What to look atThe readout under the instrument does the division: 100,000 particles is 1,563 workgroups of 64, which is 100,032 invocations — the last 32 load an index past the count and return.; See alsoCompute shader Storage buffer
World space See it happen · Coordinate Spaces: The shared coordinate system the scene lives in, after each object’s model matrix has placed it. The only space where "next to" means what you think it means.; What to look atThe model matrix has landed: the corner that was 0.5, 0.5, 0.5 in its own coordinates reads 1.226, 0.800, −0.793 in the world’s, and the floor is under it.; See alsoModel space View space Model matrix
Wrap mode See it happen · Textures & Sampling: What the sampler does with a UV outside 0…1. Repeat tiles it, clamp smears the edge texel outward, mirror flips alternate tiles so the seams line up.; What to look atThe tile has slid off one side and everything it vacated is filled by the last row of texels it left behind — the cyan border, stretched to the horizon. That stripe is clamp-to-edge.; See alsoUV coordinates Texture
Z-fighting See it happen · Depth & Transparency: Two surfaces close enough together that the depth buffer cannot tell which is in front, so the winner changes per pixel and per frame — a shimmering, tearing seam. Almost always fixed by moving the near plane out rather than by moving the geometry.; What to look atThe readout predicts the failure before you look: the smallest resolvable gap reads 1.91e-2 against a separation of 0.002, and the red panel cuts up through the blue in slivers.; See alsoDepth precision Depth buffer Near and far planes