Deep dive into dithering – from retro nostalgia to contemporary charm

The article below is based on the video:

What do modern games and newspapers printed one hundred years ago have in common? It’s not just a quirky piece of computer history—it’s a powerful graphic design tool. Here, we’re exploring why some indie games are turning to a century-old technique to create compelling visuals: dithering.

[Image: Vibrant modern 3D game scene with dithering effects]

A Brief Introduction

Dithering isn’t just about making things look retro. It’s a technique that creates unique visual styles and effects—ranging from nostalgic two-tone aesthetics to subtle transitions that help your game stand out. I’m Herman from Gamelogic FX, and I’ve spent countless hours experimenting with game effects, discovering techniques that transform the way our games look and feel. On this blog, I delve into everything from classic effects that are making a comeback to innovative methods that add a touch of magic to your projects.

[Image: Obra Dinn’s distinctive black and white style juxtaposed with modern game visuals]

If you’re passionate about game development and visual effects, you’re in the right place. Let’s dive in.

What Is Dithering?

Have you ever noticed the dot patterns in old newspapers or the grainy look of early computer games? That’s dithering in action. At its core, dithering creates ‘new’ colors by placing pixels of different colors in patterns that blend in your eye. For instance, a simple checkerboard of black and white pixels appears grey when viewed from a distance.

Historically, artists used dots to expand their color palettes long before computers existed. By around 1915, mechanized dithering (or halftoning) allowed newspapers and magazines to print smooth photographs using tiny ink dots. On early computer displays with limited colors, dithering was essential to simulate higher color fidelity by sacrificing some spatial resolution.

[Image: 1915 halftone newspaper image]

In contrast, anti-aliasing—trading off color to improve resolution—is the opposite of dithering. Despite modern screens displaying millions of colors, dithering remains valuable for creating retro looks, smoother blends in tiled games, and even non-visual effects like pseudo-random distributions.

In the middle is the original image. On the left, we use additional colors to simulate higher resolution using anti-aliasing. On the right, we use additional resolution to simulate more colors.

Dithering in Shaders: A Practical Guide

The Basics

Implementing simple monochromatic dithering in a post-process shader involves three key steps:

  1. Converting to Greyscale: Transform the image by computing a dot product of the pixel’s RGB values with [0.299, 0.587, 0.114] to match human visual perception.
  2. Quantizing: Reduce the continuous range of brightness values to a smaller set of discrete values—like snapping values to black and white via a threshold.
  3. Dithering: Add a dither pattern before quantizing to create the effect.

[Image: Diagram of converting color image to greyscale, quantizing, then applying dithering]

I developed a flexible script for connecting shaders and their properties directly in the inspector—ideal when working with a single post-process shader.

Ordered Dithering Techniques

There are two main types:

  • Ordered Dithering: This adds a fixed pattern (noise patterns, threshold matrices, or custom patterns) to the image before quantizing.
  • Error Diffusion: This method diffuses quantization error to neighboring pixels, though it’s trickier to implement in real-time shaders.

For ordered dithering, consider these approaches:

Noise Patterns

White noise is the simplest, but it tends to create clumps. Blue noise, a high-pass filtered version of white noise, minimizes these clumps while keeping the randomness intact. Repeating the noise pattern can help mask any distracting repetitions.

Image dithered using a white noise pattern.
Image dithered using a blue noise pattern.

Threshold Matrices (Bayer Dithering)

Bayer matrices are a classic example. These matrices come in sizes like 2×2, 4×4, or 8×8, each offering more levels of grey. By computing each pixel’s position, you can look up an offset from the matrix and add it before quantization, resulting in clean, regular patterns.

Custom Patterns

Custom dithering patterns offer a creative edge. Whether you want light and dark dots or smooth transitions between thick and thin lines, custom patterns let you tailor the effect to your project.

[Image: Examples of custom dithering patterns applied to a ramp and a sample scene]

Advanced Techniques and Considerations

Displacement Mapping & Morph Shapes

Take ordered dithering a step further by displacing the lookup of your dithering pattern. For instance, offsetting a pixel’s horizontal position by its vertical value creates diagonal lines, while using a sine wave can yield wavy effects. Morph shapes further allow you to blend between different base patterns (circles, squares, stars) based on brightness, resulting in animated or smoothly morphing patterns.

[Image: Diagram showing displacement mapping effect turning vertical lines into diagonal ones]

Per-Object vs. Post-Process Dithering

You can apply dithering to the entire screen or to individual objects. Dithering each 3D object separately lets the pattern follow the object’s UVs, resulting in a more artistic effect. However, this method is more complex, as it requires handling lighting and shadows independently. A hybrid approach combines both techniques—using per-object information stored in color channels and then applying a unified post-process effect.

[Image: Split-screen example showing per-object dithering versus full-screen post-process dithering]

Handling Camera Movement

Post-process dithering can sometimes ‘shimmer’ when the camera moves. A clever solution—as seen in Lucas Pope’s Return of the Obra Dinn—is to project the dithering pattern onto a virtual sphere that moves with the camera. Alternatively, adjusting the UV offset and rotation based on camera movement can keep the pattern consistent.

[Image: Example of dithering pattern movement correlated with camera rotation]

Beyond the Visual: Non-Visual Applications of Dithering

Dithering isn’t just for graphics. In one-dimensional (1D) applications, error diffusion can help manage random events like loot drops or enemy spawns—ensuring a balanced distribution without clumping. This technique is essential for creating random sequences that “feel” fair, whether it’s for ambient sounds, lighting flickers, or turn-based gameplay advantages.

[Image: Diagram illustrating 1D error diffusion process with sequential values]

Practical Tips for Better Dithering

  • Start Simple: Begin with a square screen resolution to get the basics right before supporting arbitrary resolutions.
  • Use Intensity Ramps: Testing with greyscale or channel-specific ramps can help you identify and resolve artifacts.
  • Texture Settings Matter: For pixel-perfect effects, use point sampling; for artistic, anti-aliased patterns, try bilinear sampling. Ensure that color ramps and full-screen patterns are clamped to avoid unwanted artifacts.
  • Experiment Procedurally: Tools like my Unity tool on GitHub can help you generate ramp textures and patterns on the fly.

[Image: Flowchart summarizing practical tips for implementing dithering]

The Versatility of Dithering in Game Development

Dithering may have its roots in early 20th-century printing, but its applications in game development are vast:

  • Retro or Two-Tone Aesthetics: Achieve unique, nostalgic visuals.
  • Smooth Transitions: Improve the look of tile-based levels.
  • Non-Visual Applications: Use dithering for random event distributions and more.
  • 3D Effects: Apply dithering for smoother transitions in voxel games or even soft shadows.

If you experiment with any of these dithering methods—whether it’s Bayer dithering, noise-based techniques, or error diffusion—share your results in the comments!

[Image: Montage of game screenshots showcasing various dithering effects, including Ape Out, Noita, and Celeste]

Final Thoughts

Dithering has been around for over a century, yet it remains a versatile and powerful tool in modern game development. Whether you’re striving for a striking retro look or fine-tuning the randomness in your game mechanics, understanding dithering can open up a world of creative possibilities.

Be sure to check out the links below for example code, a Unity tool for generating ramp textures, blue noise downloads, and other resources. And if you enjoyed this deep dive into dithering, don’t forget to like, subscribe, and join our community for more insights into technical and artistic game effects.

[Image: Call-to-action graphic encouraging readers to subscribe and comment]

Thanks for reading, and happy dithering!

Resources

Code

Additional Reading

Scroll to Top