🎮 GPU Pipeline Visualizer
Step through the classic GPU rendering pipeline stage by stage. See how vertices become pixels — from input assembly through rasterization to the final framebuffer.
Pipeline Stage
Input Assembly
Step 1 / 7
Input Assembly
Read vertex data from memory. Each vertex has a 3D position and an RGB color. The GPU reads these from vertex buffers bound before the draw call.
3D View
Technical View
Vertex Buffer
| # | Position | Color |
|---|---|---|
| 0 | (0.00, 0.80, 0.00) | (1.0,0.0,0.0) |
| 1 | (-0.70, -0.60, 0.00) | (0.0,1.0,0.0) |
| 2 | (0.70, -0.60, 0.00) | (0.0,0.0,1.0) |
Stage Pseudocode
for each vertex in vertexBuffer:
read position (vec3)
read color (vec3)
push to vertex streamHow It Works
This visualizer simulates the classic fixed-function GPU rendering pipeline in JavaScript. Real GPUs execute these stages in parallel across thousands of cores, but the logical flow is the same.
Vertices are transformed by the Model-View-Projection matrix in the vertex shader, assembled into triangles, then rasterized into fragments using edge functions. Each fragment gets a color via barycentric interpolation of the vertex colors, passes a depth test, and is written to the framebuffer.
The 32x32 pixel grid is intentionally small so you can see individual pixels being generated. Production GPUs render millions of pixels per frame using this same pipeline.