The Art of Dithering and Retro Shading for the Web

Index

Articles

Cmd

Ask

The Art of Dithering and Retro Shading for the Web

Aug 6, 2024Aug 6, 2024

I spent the past few months building my personal website from the ground up, finally taking the time to incorporate some 3D work to showcase my shader and WebGL skills. Throughout this work, I got to truly understand the crucial role that post-processing plays in making a scene actually look good, which brought some resolutions to long-term frustrations I had with my past React Three Fiber and shader projects where my vision wouldn't materialize regardless of the amount of work and care I was putting into them.

Taking the time to build, combine, and experiment with custom post-processing effects gave me an additional creative outlet, and among the many types I got to iterate on, I always had a particular affection for the several "retro" effects I came up with. With subtle details such as dithering, color quantization, or pixelization/CRT RGB cells, they bring a pleasant contrast between the modern web landscape and a long-gone era of technology we 90s/early 2000s kids are sometime longing for.

Given the time I invested dissecting every aspect of these effects, I wanted to dive deep with you into the concepts powering them and the shader techniques I learned along the way. In this article, I hope to convince you of the power of post-processing effects and that nothing beats an elegant retro vibe applied to a website 👌✨. We'll also look into examples of dithering and pixel art from very talented folks who use the same processes that I'll be introducing later on, as well as some of my own creations that I built while learning about all this.

Sources

Color Quantization and Dithering a great video from @Acerola_t

Dithering on the GPU from Alex Charlton which features a nice deep dive into alternative color quantization techniques

GM Shaders Mini: CRT from @XorDev which deep dives into many shader techniques to mimic some specific aspects of CRTs

Enjoying my writing and feeling like supporting my work?You can show your appreciation by buying me a coffee (I really really really do like coffee) which will give me the much-needed energy (and fuel my caffeine addiction) to take on more ambitious/high-quality articles and (probably over-engineered but fun) projects.As a token of gratitude, your name will be featured on this little screen below!MADE IN NYC - @MAXIMEHECKEL - 2025 - MADE IN NYC - @MAXIMEHECKEL - 2025 - MADE IN NYC - @MAXIMEHECKEL - 2025 - MADE IN NYC - @MAXIMEHECKEL - 2025 -

Thank you for reading! Dithering techniques

Dithering originated as an early graphics technique to trick the viewer's brain into seeing more color or smoothness in gradients/shadows that the machines back in the day could output by intentionally introducing noise on top of an image or a render. Color palettes were very limited back then, thus relying on techniques like these was vital for game designers to realize their vision. This gave, as a result, a unique look and feel to games and media from that specific moment in time where computers became ubiquitous, but advanced graphic capabilities were not yet there.

Today, dithering is more an artistic choice than a workaround. Many artists or game designers use this technique as a creative outlet to give their work a unique retro vibe, calling out to that early gaming era, or work within the realms of self-imposed limits in colors. Some great examples of such use of dithering include:

Basement Studio's Basement Chronicle game: a well-executed point-and-click game that reminds me a lot of my own early gaming experience.

@loackme's art, which I'm an absolute fan of.

@aweusmeuh's use of the original Game Boy camera for experimental photography which features a sublime dithering effect.

Examples of beautifully executed dithering art from left to right by Basement Studio, @aweusmeuh, and @loackme_

The latter is how we will approach dithering in this blog post: to give our React Three Fiber/Three.js projects a unique style! In this first part, we'll explore how the dithering technique works, implement it as a shader, and build a first iteration of a custom dithering post-processing effect that we can apply on top of any 3D scene.

For this project, we'll create a custom post-processing effect. As we did for the Moebius stylized shader, relying on post-processing will allow us to apply a shader to an already rendered scene and alter its style like adding an "image filter" to a photo.

Pass VS Effect

Post-processing passes and effects are tools to reach the same goal: alter the final render of the scene by applying a custom layer of post-processing. However, they work very differently:

Passes can be stacked on top of one another and will take as input the output of the previous pass alter it and send the result to the following pass, applying custom shaders one at a time.

Effects, however, get merged into a single Effect Pass which can improve performances.

See Effect Merging for more information