GLSL Dithering

Getting Retro with Dithering in ThreeJS.

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

Sponsor

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.

Dithered Blob by Klems

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.

64 Colors Dithering by Marco

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.

Dithering by Illus0r

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.

Oldskool Plasma by Harha

Further reading / Inspiration