Score
Animating 160,000 Cubes: A Three.js Dithering Visualization
The Three.js dithering visualization project by Damar Aji Pramudita exemplifies how generative art can enhance brand strategy by utilizing advanced digital techniques to create engaging visual experiences. By transforming traditional concepts into interactive digital formats, brands can leverage such innovative approaches to captivate audiences and convey their identity more dynamically.
Abduzeedo: Animating 160,000 Cubes: A Three.js Dithering Visualization jeff April 05, 2026 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.
The article discusses a unique application of generative art in brand strategy, which is significant but may not be widely applicable across all brand contexts.