---
url: /examples/post-processing-builtin/pixelate.md
description: >-
  Snap a render to chunky square blocks with the built-in pixelate
  post-processing effect.
---

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

```ts
import { glCanvas, loadVideoTexture, pixelate } from "@radiancejs/gl";
import { Pane } from "tweakpane";
import "./styles.css";

const pixelateEffect = pixelate({ size: 8 });

glCanvas({
  canvas: "#glCanvas",
  fragment: /* glsl */ `
    in vec2 vUv;
    uniform sampler2D uTexture;
    out vec4 fragColor;

    void main() {
      fragColor = texture(uTexture, vUv);
    }
  `,
  uniforms: {
    uTexture: loadVideoTexture(
      "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
    ),
  },
  postEffects: [pixelateEffect],
});

const pane = new Pane({ title: "Pixelate" });
pane.addBinding(pixelateEffect.uniforms, "uSize", { min: 1, max: 32, step: 1 });

```

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

body {
  margin: 0;
  height: 100svh;
  display: grid;
  place-items: center;
}

canvas {
  /* use a low DPR combined with this declaration 
  to get a smooth and cheap pixelate effect */
  image-rendering: pixelated;
  
  width: min(90svmin, 900px);
  aspect-ratio: 16 / 9; /* flower video ratio (960x540) */
  display: block;
  border-radius: 8px;
  border: 1px solid rgb(128 128 128 / 0.4);
}

```

```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>

```

:::