Rendering Pipeline
This app uses a multi-pass WebGL 2 shader pipeline to transform your images/videos into pixel art. Each frame goes through 6 GPU-accelerated passes:
- Downsample → Reduces resolution using box filter (4-tap averaging)
- Quantize → Reduces colors in linear RGB space
- Dither → Applies dithering pattern (if enabled)
- Sobel → Edge detection for outlines
- Composite → Combines color + edges
- Upsample → Nearest-neighbor scaling (crisp pixels)
Color Science
Colors are processed in linear RGB space for physically accurate quantization. The pipeline uses proper sRGB ↔ Linear conversion:
// sRGB → Linear
if (srgb ≤ 0.04045)
linear = srgb / 12.92
else
linear = ((srgb + 0.055) / 1.055)^2.4
Palette matching uses Euclidean distance in linear RGB to find the nearest color.
Dithering Methods
- Bayer (Ordered) — Uses threshold matrices (2×2, 4×4, 8×8) for clean, grid-aligned patterns. Classic retro look.
- Random Noise — Deterministic hash-based noise (hash12/hash32). Grainy, film-like texture.
- Blue Noise — Procedurally generated using R2 sequence + interleaved gradient noise. Minimal visible patterns.
- Error Diffusion — Approximates Floyd-Steinberg by sampling neighbor errors. Creates diagonal textures.
Edge Detection
Sobel operator with 3×3 kernels on luminance (BT.709 weights). Detects horizontal and vertical gradients, combined as magnitude:
Gx = [-1 0 1] Gy = [-1 -2 -1]
[-2 0 2] [ 0 0 0]
[-1 0 1] [ 1 2 1]
edge = sqrt(Gx² + Gy²)
Temporal Stability
Video processing maintains stability through:
- UV snapping to pixel grid centers
- Screen-space coordinates for dither patterns
- Box filter downsampling (not point sampling)
- Nearest-neighbor upsampling (hard edges)
WebGL 2 Features Used
RGBA16F framebuffers for linear precisiontexStorage2D() for immutable textures- GLSL ES 3.0 (
#version 300 es)
gl_VertexID for fullscreen triangle- Integer array uniforms for Bayer matrices
Bayer 8×8 Matrix
0 32 8 40 2 34 10 42
48 16 56 24 50 18 58 26
12 44 4 36 14 46 6 38
60 28 52 20 62 30 54 22
3 35 11 43 1 33 9 41
51 19 59 27 49 17 57 25
15 47 7 39 13 45 5 37
63 31 55 23 61 29 53 21