Dither lab

Ordered dithering applied in real time. Move between a smooth gradient and a 4×4 Bayer threshold matrix and see where the banding goes.

Renders on pointer-capable screens with motion enabled.

01 / How it works

Dithering is how you keep gradients honest in a limited palette, and it is the cheapest way to make a flat dark interface feel like print rather than plastic.

A 4×4 Bayer matrix is reconstructed in the shader from bit interleaving rather than uploaded as a texture. Each pixel's luminance is compared against its threshold, so the pattern stays stable in screen space while the underlying gradient moves.

OGL
GLSL
Bayer matrix