Maxime Heckel spent several months building his personal website from the ground up, incorporating 3D work to showcase his shader and WebGL skills. Along the way, he came to understand how crucial post-processing is to making a scene look good. Custom post-processing gave him a creative outlet, and he developed a particular fondness for retro effects such as dithering, color quantization, and pixelization or CRT RGB cells. These subtle details create a pleasant contrast between the modern web and an era of technology that many 90s and early 2000s kids still long for.
Dithering began as an early graphics technique that tricked the viewer's brain into perceiving more color or smoothness in gradients and shadows than the hardware could output, by intentionally adding noise to an image or render. Palettes were very limited, so game designers depended on it. The result was a distinctive look tied to the period when computers became ubiquitous but advanced graphics were not yet possible. Today, dithering is more an artistic choice than a workaround, used by artists and game designers to evoke that era or to work within self-imposed color limits. Examples include Basement Studio's point-and-click game Basement Chronicle, the artwork of @loackme, and experimental photography by @aweusmeuh using an original Game Boy camera.
Heckel focuses on applying dithering to React Three Fiber and Three.js projects to give them a unique style. The approach centers on post-processing, which applies a shader to an already rendered scene much like an image filter on a photo. To build a custom effect, he declares a class extending Effect, defines a fragment shader called through the parent constructor, declares the necessary uniforms, and wraps the class with wrapEffect so it can be used as a JSX component within EffectComposer.
The first part of the series explains how the dithering technique works, implements it as a shader, and builds an initial version of a dithering post-processing effect that can be applied to any 3D scene.
Source: Hacker News · Summarized by HeadlinesBriefing