I fell in love with "The Return of the Obra Dinn" this weekend. It's an incredible detective-style game rendered completely with dithering. For which they had to pioneer techniques explained in detail in their TIGForum post.
Dithering is the arrangement of limited pixels/colors in such a way as to trick your brain into seeing more detail/colors than there actually are.
The Idea of Dithering is used for a lot of things: file compression, audio dithering, pixel art, etc. However, we are only gonna look at it from the perspective of visuals and pixels.
Getting started
- Coding Train's Floyd-Steinberg Dithering
- Dithering in GLSL by Alex Charlton
- Ordered Dithered Shading by Aeris
- How the dither in the return of the Obra Dinn was made by dukope
- GLSLify dither by hughskennedy.
- Deep dive on lots of Dithering techniques by DasSurma
sponsor
Become a sponsor with your sponsor spot here!
Promote your product/company in this spot to hundreds of creative developers interested in learning and creating. One spot per issue!
Learn More!Dithered Blob
Dithering works by taking a grayscale value (from 0 to 1) and matching the value to the corresponding dot pattern. For Ordered Dither it works like:
If the value is 1, then the pattern has a lot of white dots.
If the value is 0.5, then the pattern has half white dots and half black dots.
And If the value is 0, the pattern has a lot of black dots.
However, the pattern doesn't need to be ordered. There are a lot of Dither patterns.
64 Colors Dithering
Over time the use of Dithering has totally flipped. Nowadays we choose to lose resolution/colors to get that retro look, like in Marco's demo. But back in the day, Dithering was used to give the illusion of more resolution/colors than they actually had.
When you only had could render 50 colors at once, and had a resolution of 160 x 144 Pixels (a 1/10 of my screen), you had to pull some mad monkey tricks to be able to make games. Dithering was key to making the most of with you had.
Dithered RGB Shift
This demo by illus0r does an incredible job of combining different techniques. I love how on one side it looks almost smooth while in the other extremely dithered, including the RGB shift.
It reminds me of that unfur site with the RGB planes.
Texture Dithering
This demo also uses some ordered dither on top of some "plasma" created with a lot of different sine waves.
However, in the comments, Shane mentions an interesting idea of using a dither Texture instead of generating it in the shader. Which is the same technique used in Marco's FBM Dithered clouds demo.
