Dithering is an imaging technique used to preserve more gradient information in images with limited color palettes. This was commonly used in print to preserve grayscale information back when printers could only display black or white, and later to get more accurate color gradients while only using dots [1].
In computer graphics, we often enjoy taking inspiration from these old techniques, even if we no longer face the same challenges (modern screens can easily display shades) imitating these solutions provides a unique “retro” aesthetic that can separate your game from others, but it does bring its own challenges.
https://www.youtube.com/watch?v=ILolesm8kFY&t=37s
Return of the obra-dinn is one such game which attempts to bring dithering into its rendering. The game only has 2 colors, but still wants to convey shadows and more. It does a fantastic job at it, and I can guess that, even having not played it, you do remember this game, and it’s probably because of its striking aesthetic. Still, there were many challenges which left their mark.
Chiefly, dithering is not meant for moving images. If the image moves but the pattern doesn’t you will quickly notice flickering (notice the wood planks on the floor as the player climbs up the ladder). This could’ve been much worse. This pattern should also appear when turning your head around for instance, but Lucas Pope (and the many people who tried replicating this effect [2]) had the clever idea of mapping the dithering pattern on a sphere around the players head. Essentially, imagine your character wearing a glass ball on his head. This glass has a pattern on it, which dithers light as it comes through. If you rotate your head inside this ball, the pattern remains stable, and the image clean. As soon as you move however, the pattern shifts relative to the scene and flickering ensues.
You can see the design of the game work around this limitation, almost nothing moves in this game, and the dither patterns themselves are sparse, with much of the image being conveyed instead with outlines and clear black and white surfaces/shadows. Still, I stumbled upon a recent video of Runevision trying to the impossible task of mapping the dithering pattern onto the textures themselves. A process I immediately wanted to replicate.
https://www.youtube.com/watch?v=HPqGaIMVuLs
My goal then became to:
This section will be short, because it essentially repeats what is found in the video. but let’s go over the key concepts:
If you simply map dithering patterns to textures, you quickly learn it looks terrible. Your pattern is suddenly at the mercy of your object’s UV, how stretched or far away it is, and some objects will have large dithering patterns next to others with a very small one, it simply doesn’t work. you must have consistent scale across your patterns.
To address this, runevision proposes to simply track the rate of change of a UV in screenspace using glsl’s dFdx() and dFdy(). using these we try to keep all UVs within $x^2$ of one another by simply doubling, and halving UVs that are twice as big or twice as small. This brings its own set of impossible challenges which we explore here. But our only job left is to transition smoothly between these scales.
