Three.js Cube with dithering

First we start with a simple but suuuper shiny cube just so we have something to look at. This cube is rendered using react-three-fiber.

Dithering

By creating a DitheringEffect using postprocessing we can apply a unique effect to the scene.

The following scene is applying a dithering shader using a Bayer matrix and with it we get the following effect:

We can switch out the dithering algorithm to get a different look. For example with Atkinson-Dithering we get the distinct diagonal lines:

… or Riemersma-Dithering which gives a more low-res effect:

The shader codes for the different dithering algorithms can be found in the DitheringEffect.tsx file.