The Art of Dithering and Retro Shading for the Web

A practical guide to creating retro dithering and CRT-like shading for the web, focused on React Three Fiber and Three.js post-processing. It argues that post-processing is essential to making 3D scenes read the way the artist intends and demonstrates how to implement custom effects by extending the Effect class, supplying a fragment shader and uniforms, and wrapping it with wrapEffect so it can be used inside an EffectComposer. The write-up contrasts Passes (stacked, sequential shaders) with merged Effects (better performance), and walks through building stylized filters - dithering, color quantization, pixelization/RGB cells - while pointing to visual examples and inspiration from contemporary pixel artists and classic games.

The technical core explains concrete shader techniques: luminance-based white-noise dithering implemented with a pseudo-random function (fract(sin(dot(...)) * 43758.5453) to compare per-pixel luminance against noise and output binary pixels, with mask blending controlled by a maskIntensity uniform; RGB cell masks and CRT curvature produced by remapping UVs from 0..1 to -1..1, swapping components, applying a curveIntensity and a quadratic offset, then converting back and drawing edges with smoothstep; chromatic aberration via sampling color channels at offset UVs, bloom via a postprocessing component, horizontal scanlines using sin(uv.y * frequency + time * speed), and subtle UV distortion using grid noise. Uniforms like curveIntensity, spread, and maskIntensity give interactive control to tune the retro look.