---
url: /examples/post-processing-builtin/dither.md
description: >-
  Reduce a lit blue sphere to a small color palette with the built-in dither
  post-processing effect.
---

::: example-editor {deps=tweakpane@^4.0.5}

```ts
import { ditherBayer, glCanvas } from "@radiancejs/gl";
import { Pane } from "tweakpane";
import fragment from "./gradient.frag?raw";
import "./styles.css";

const ditherEffect = ditherBayer({ matrix: 8, size: 2 });

glCanvas({
  canvas: "#glCanvas",
  fragment,
  uniforms: {
    uTime: ({ time }) => time / 1000,
    uResolution: ({ canvasResolution }) => canvasResolution,
  },
  postEffects: [ditherEffect],
});

const pane = new Pane({ title: "Dither" });
pane.addBinding(ditherEffect.uniforms, "uMatrix", {
  options: { "2x2": 2, "4x4": 4, "8x8": 8 },
});
pane.addBinding(ditherEffect.uniforms, "uSize", { min: 1, max: 4, step: 1 });
pane.addBinding(ditherEffect.uniforms, "uLevels", { min: 2, max: 6, step: 1 });
pane.addBinding(ditherEffect.uniforms, "uColor");

```

```frag
uniform float uTime;
uniform vec2 uResolution;

in vec2 vUv;
out vec4 fragColor;

void main() {
  vec2 center = uResolution * 0.5;
  float radius = min(uResolution.x, uResolution.y) * 0.25;
  vec2 p = (vUv * uResolution - center) / radius;

  float d = dot(p, p);
  if (d > 1.0) {
    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
    return;
  }

  vec3 normal = vec3(p, sqrt(1.0 - d));;
  vec3 lightDir = normalize(vec3(cos(uTime * 0.8) * 0.7, 0.6, 0.7));
  float light = pow(max(dot(normal, lightDir), 0.0), 2.); // pow is a hack to make the lighting falloff smoother
  vec3 color = vec3(0.06, 0.34, 0.68) * (0.2 + 2. * light);

  fragColor = pow(vec4(color, 1.0), vec4(2.2)); // output in linear light
}

```

```css
html {
  color-scheme: light dark;
}

body {
  margin: 0;
}

canvas {
  width: 100svw;
  height: 100svh;
  display: block;
}

```

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RadianceJS Example</title>
  </head>
  <body>
    <canvas id="glCanvas"></canvas>
    <script src="/index.ts"></script>
  </body>
</html>

```

:::