Get the latest tech news
The Art of Dithering and Retro Shading for the Web (2024)
A detailed walkthrough of the inner workings of dithering and other shading techniques to give a retro look and feel to your WebGL and React Three Fiber work.
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. The key to getting a pixelated version of our original scene is to remap the UV coordinate system used in our effect shader and snap it to a grid so, once sampled, the texture from our input buffer appears as if it were at a lower resolution. Screenshot showcasing artifacts introduced when using the curveUV coordinates as base uv for our RGB Cell shadow mask In this last part, I wanted to walk you through some of the final touches I added to my own retro post-processing effect to make it as accurate as possible.
Or read this on Hacker News
