Core Idea
Everything drawn in realtime rides one fixed assembly line, and the map above is the whole of it. You don’t get to reorder the stations or add new ones — you get exactly two slots for code (the gold stations), and everything between them is wired into silicon. Click any station: each one is a full article of this knowledge base; this page is the map that holds them together.
The Count Is the Story
Watch the particles, not the boxes: one draw call fans out into thousands of vertex-shader runs, the rasterizer detonates those into millions of fragment-shader runs, and the depth test collapses everything back into one image. That shape has two consequences:
- Work is priced by where it runs. A line of code costs thousands of times more in the fragment shader than in the vertex shader, and more there than on the CPU — moving work left along the line is the most reliable optimization in graphics.
- Performance problems are stage-local. A slow frame is stuck at one station — too many draw calls, too many vertices, or too many fragments — and each has a different fix: the whole diagnostic method lives in the 16 ms budget.
Your Two Slots
| Vertex shader | Fragment shader | |
|---|---|---|
| runs | once per vertex | once per fragment |
| reads | attributes (buffers), uniforms | varyings (interpolated), uniforms, textures |
| must write | gl_Position in clip space |
one color |
| owns | shape and placement — the MVP journey | surface and light — the shading recipe |
Both are written in GLSL, both run in massive parallel isolation — a vertex can’t see its neighbors, a fragment can’t read the pixel it’s about to write — and that inability to talk is exactly what lets the GPU run tens of thousands of them at once.
The Silicon Between
Everything else is fixed-function, free, and non-negotiable: the clip test and ÷w (clip space), the rasterizer’s coverage test and varying interpolation, and the depth test that quietly discards most fragments ever produced. You configure these stages (depth on/off, blend mode, cull face) — you never program them.
One Line, Many Names
WebGL is this pipeline exposed to the browser; WebGPU is a newer, lower-overhead door to the same line (plus compute); Three.js writes both shader slots for you until you take them over with ShaderMaterial. And ray marching is the pipeline played as a joke: three vertices, no scene geometry, everything in the fragment slot.
Connections
Each station is somebody’s article: the draw call and its cost belong to buffers and the 16 ms budget, the vertex station to coordinate spaces, the cut and the divide to clip space, the hinge to rasterization, the fragment station to shading and texturing, and the depth buffer back to clip space again. This page is deliberately mostly links — the pipeline is the table of contents.