Software rendering

Image Rasterizer

Turn triangles into pixels and inspect the depth, coverage, and texture calculations behind the image.

JavaScript · Canvas 2D · Web Workers

View source on GitHub

Opening Image Rasterizer workspace…

Examples

A smooth terracotta torus above a sage ground plane, rendered entirely by the CPU rasterizer. — 1,282 triangles, interpolated surface normals, and depth testing. Canvas 2D displays the computed pixels.

A checker texture receding into perspective, with correctly interpolated texture coordinates. — Perspective-correct texture mapping. Toggle it in the tool to see how affine interpolation distorts the checker.

Source and documentation

The repository includes the implementation, reproducible examples, and tests.

Explore Image Rasterizer on GitHub

.studio-entry[data-state="loading"]{overflow:visible}.studio-entry__loading{display:none}.studio-entry[data-state="loading"]>.studio-entry__content{position:static;visibility:visible;pointer-events:auto}Enable JavaScript to use the workspace. Examples and documentation are available below.