The Art of Dithering and Retro Shading for the Web

In recent months, I embarked on the journey of constructing my personal website, dedicating my efforts to integrating 3D components to illustrate my expertise in shaders and WebGL. This endeavor allowed me to grasp the pivotal role that post-processing effects play in enhancing visual appeal, addressing long-standing frustrations in my previous React Three Fiber and shader projects.

Through the process of building, combining, and experimenting with custom post-processing effects, I discovered a newfound creative outlet, particularly fond of retro effects such as dithering, color quantization, and CRT RGB cells. These effects provide a delightful contrast between the contemporary web and the nostalgic era cherished by those who grew up in the 90s and early 2000s.

Driven by the time invested in dissecting these effects, I felt compelled to delve deeper into the underlying concepts and shader techniques. This article aims to highlight the significance of post-processing effects and the allure of a retro aesthetic for websites. Moreover, we will explore examples of dithering and pixel art from accomplished artists who employ similar processes, alongside my own creations developed during this learning journey.

Dithering, originating as an early graphics technique to deceive the viewer's brain into perceiving more color or smoothness in gradients and shadows, became essential when color palettes were limited. This resulted in a distinctive visual style for games and media during a time when computers lacked advanced capabilities. Currently, dithering serves as an artistic choice for creators seeking to infuse their work with a retro vibe, invoking memories of the early gaming era or adhering to self-imposed color constraints.

Examples of such applications include using dithering to give React Three Fiber/Three.js projects a unique style, as demonstrated in a grayscale version of a scene with dithering implemented as a fragment shader in a custom post-processing effect.