Skip to content
Rasterization Basics
step 1/5

Reading — step 1 of 5

Read

~2 min readRasterization

Rasterization Basics

Rasterization: take 3D triangles, output 2D pixels.

Pipeline:

3D vertices
  ↓ transform (model + view + projection)
clip-space coords
  ↓ perspective divide (w)
NDC (normalized device coords, -1..1)
  ↓ viewport mapping
screen pixels
  ↓ for each triangle: rasterize to pixels
fragment shaders compute color
  ↓ depth test, blend
frame buffer

For each triangle:

  1. Compute screen-space bounding box.
  2. For each pixel in box: check if inside triangle.
  3. If inside: interpolate vertex attributes (color, UV, normal).
  4. Run fragment shader → pixel color.
  5. Depth test: only write if closer.

Inside-triangle test (edge function):

python

The edge function gives signed area; positive on one side, negative on other.

Barycentric coordinates (u, v, w):

  • Each pixel inside triangle has barycentric weights for the 3 vertices.
  • u + v + w = 1.
  • Compute via edge functions / triangle area.
python

Interpolate:

python

Use for: color, depth, normal, UV.

Z-buffer (depth test):

  • Buffer same size as frame buffer.
  • Per pixel: store depth of nearest surface so far.
  • New pixel passes if its depth < stored.
  • Update buffer + frame buffer.
python

Performance:

  • GPU: parallel across all pixels.
  • CPU: per-triangle inner loops.
  • Modern GPUs: hundreds of millions of triangles per second.

Software rasterizers exist (tinyrenderer is famous educational one). Slower, but understanding rasterization → understanding GPUs.

Discussion

Ask a question, share an insight, or help someone who’s stuck.

Sign in to post a comment or reply.

Loading…

Rasterization Basics — Build a 3D Renderer