Dithering began as a way to trick early limited‑hardware displays into showing more shades or colors by adding intentional noise to an image; today it is used artistically to evoke the look of 90s‑era games and media. Heckel’s article shows how the technique can be applied as a custom post‑processing effect in a React Three Fiber/Three.js scene, letting developers layer a retro filter over any rendered 3D content.
This image provides visual examples of dithering art, illustrating the artistic results discussed in the introduction and technique sections.
The first approach Heckel presents is white‑noise dithering: a fragment shader computes each pixel’s luminance, compares it to a random value generated by a noise function, and outputs either black or white. This creates a grayscale, noise‑based dithered effect that can be wrapped with the postprocessing library’s wrapEffect function and inserted into an EffectComposer stack.
To reduce the noisy appearance, Heckel moves to ordered dithering using a Bayer matrix as a threshold map. The shader looks up a threshold value based on the pixel’s UV coordinates and the matrix size (e.g., 2×2, 4×4, 8×8); if the luminance exceeds the threshold (plus an optional bias) the pixel becomes white, otherwise black. Larger matrices yield finer gradients and less conspicuous repeating patterns, giving developers control over the retro texture.
This image supports the explanation of ordered dithering with Bayer matrices, showing how thresholds are looked up based on UV coordinates to create black-or-white patterns.
Heckel also discusses blue‑noise dithering, where a pre‑generated texture supplies the threshold via a uniform, producing less repetitive patterns than ordered dithering while avoiding the pure randomness of white noise. He notes that techniques relying on error diffusion, such as Floyd‑Steinberg, are not fragment‑shader friendly because they require sequential pixel processing, and mentions that color quantization can be combined with dithering to further reduce the palette for additional retro styling.
This image relates to the discussion of combining color quantization with dithering to further reduce the palette for additional retro styling.
Interactive widgets in the post let readers experiment with Bayer matrix size and blue‑noise texture thresholds, but the article does not address potential performance impacts on lower‑end devices or accessibility concerns for users who may find high‑contrast dithering difficult to read; these remain open questions for applying the effect in production websites.