WebGL Dither Playground

Bayer Dither Shader

A retro-styled dithered wave background component built with WebGL and React. Tweak parameters in real-time or drag the cursor across the canvas to interact.

Configuration Panel

Presets

Wave Speed0.05

Wave Frequency4

Wave Amplitude0.15

Pixel Size / Grid Scale2x

Color Depth (Steps)4

Mouse Push Radius0.25

Canvas Color

#120f17

Wave Color

#d97706

Enable Cursor Interaction

Installation Usage

React Props

<Dither
  waveSpeed={0.05}
  waveFrequency={4}
  waveAmplitude={0.15}
  pixelSize={2}
  colorNum={4}
  bgColor="#120f17"
  waveColor="#d97706"
  enableMouse={true}
  mouseRadius={0.25}
/>

How it works

1. Bayer Dithering: Calculates a 4x4 matrix threshold in GLSL registers to quantize brightness into fine print-like grids.

2. Low resolution scaling: Pixel size setting changes the backbuffer resolution of the WebGL rendering context, which is then upscale-rendered via image-rendering: pixelated to achieve zero anti-aliasing retro aesthetics.