Rasterization

The step that works out which screen pixels each triangle covers, so the GPU knows exactly what it has to color in.

turning triangles into pixelshow 3D becomes a picturefilling in the polygonswhy does my scene get slower when the window is biggerrasterisationrasterizatonthe GPU coloring the pixelsconverting the 3D model to the screen

See it

Live demo coming soon

What it is

After the vertex shader projects a triangle onto the screen, rasterization works out which pixel samples that triangle covers. It produces fragments, little candidates for screen pixels carrying interpolated values such as depth, color, normals, and UVs. The fragment shader shades them, then depth testing and blending decide which results reach the framebuffer. This is the fast path every GPU takes. Ray tracing answers the same question by shooting rays through the scene instead, which is why film renderers can afford it and a 60fps browser scene usually cannot.

You start caring about rasterization when a scene is limited by pixel work rather than model complexity. Large triangles, high device pixel ratios, transparent layers, and fullscreen effects can create millions of fragments even when the scene contains very few triangles. That is why lowering resolution can fix a slow render that geometry reduction barely changes.

Gotcha: a fragment is not automatically a final pixel. It can fail the depth test, be discarded by the shader, blend with an existing value, or represent one of several MSAA samples. Rasterization determines coverage; the rest of the pipeline still decides what survives.

Ask AI for it

Build a WebGL2 rasterization demo that draws one triangle with gl.drawArrays(gl.TRIANGLES, 0, 3), animates its three clip-space vertices, and uses gl_FragCoord in the fragment shader to color every generated fragment by screen position. Add toggles for gl.CULL_FACE, gl.DEPTH_TEST, and wireframe-style barycentric edges so I can see coverage change.

You might have meant

vertex vs fragment shadercamera projection matrixdepth buffer z bufferoverdrawsurface normals backface culling