Developer Damar Aji Pramudita's Three.js dithering visualization renders 160,000 GPU-instanced cubes animated via GLSL shaders to decode halftone images.

Dithering is a technique older than digital computing itself, used in print and early displays to simulate tonal gradients with limited color palettes. Pramudita's project lifts that analog concept into the browser, mapping any photograph to a 400x400 grid of 160,000 independent cube instances. Each cube receives a brightness value sampled from the source image, then animates along its z-axis in response to that value, creating a three-dimensional halftone effect that breathes with the underlying image.

The performance behind this effect depends entirely on Three.js InstancedMesh, which sends all 160,000 transformation matrices to the GPU in a single draw call. Per-cube delay factors, scale targets, and position offsets are calculated inside a GLSL vertex shader, keeping JavaScript out of the animation loop entirely. The result is a smooth, real-time render that would grind to a halt if each cube were updated individually in JavaScript.

How Three.js Dithering Visualization Works

Pramudita published a detailed 10-step tutorial on Codrops covering the full implementation, from geometry setup and texture sampling through threshold mapping and animation via shader uniforms. The Three.js dithering visualization doubles as a generative art primer, showing how a structured algorithm can produce outputs that feel organic and alive. Custom GLSL fragment shaders read normalized cell indices and compare sampled luminance against a threshold matrix, toggling cube visibility to recreate the halftone grid at any resolution.

The demo, full source code, and a step-by-step walkthrough are available on Codrops. Source: Animating 160,000 Cubes in Three.js to Visualize Dithering by Damar Aji Pramudita.