Core Idea
A compute shader is GPU parallelism with the rendering taken out: no vertices, no fragments, no picture — just a function dispatched across thousands of GPU threads at once, reading and writing buffers. It answers a question the pipeline never asked: what if I want the GPU’s parallelism for something that isn’t a triangle?
The pond above is that question answered the old way — because on WebGL, which has no compute stage, the hack is the technique. All 65,536 particles live in a 256×256 float texture the CPU never touches. The HUD isn’t a boast, it’s the definition: CPU updates per frame: 0.
The Hack That Proves the Point
WebGL offers only two programmable stations, so GPGPU (“general-purpose GPU”) smuggles computation through the picture-making machinery:
- State hides in a texture — each pixel’s RGBA holds one particle’s
(x, y, vx, vy). A texture is per-pixel data delivery; nothing says the data must be color. - The update function wears a fragment shader’s clothes — render one full-screen quad into a second texture, and the shader runs exactly once per particle: read my pixel, integrate, write my pixel.
- Ping-pong — a shader can’t read and write the same texture, so two textures alternate: read A, write B, swap. The frame’s “output image” is really next frame’s memory.
Press show the state texture above and the trick stops being abstract: R is x, G is y, B is speed — you are looking at 65,536 particles’ working memory, drawn as the image it secretly is. Even the initial scatter was computed by a shader; the CPU never held a single particle.
What a Real Compute Shader Is
WebGPU retires the costume. A compute pass dispatches a WGSL function over storage buffers — plain read/write GPU arrays, no texture encoding, no quad, no render target. And it adds the one thing the hack never had: workgroups. Threads are tiled into small groups that share fast on-chip memory, so neighbors can cooperate — reductions, neighbor lookups, stencil passes — where fragment-shader invocations are forever strangers to each other. The concepts you’d write are the GLSL vocabulary in a new accent.
What It Unlocks
- Particles past the CPU ceiling — the particles article ends at ~10k with the update loop in JavaScript; move the loop into the field above and the same idea runs at hundreds of thousands. Millions, with native compute.
- Simulation as a medium — fluids, reaction-diffusion, slime-mould growth, erosion, Turing patterns: iterative math over big grids, exactly the shape compute serves, now at interactive rates in a tab.
- In-browser ML — the matrix multiplications behind on-device inference run as compute passes on the visitor’s own GPU, no backend anywhere.
None of this changes the diagnosis discipline: compute work is GPU work, and a frame drowning in it is GPU-bound with a new name.
The Portability Bargain
Native compute needs WebGPU, and the web’s floor is still WebGL — so production work either ships the texture hack (the demo above runs on plain WebGL; that’s the point of building it this way) or feature-detects and degrades. The hack is not a museum piece; it’s the fallback tier of every “works everywhere” GPU simulation shipping today.
Connections
Compute is the headline of WebGPU and the escape from the pipeline’s fixed stations; its data lives in storage buffers, where the hack borrowed texturing’s machinery instead. The gateway use is GPU-resident particles, and the budget it spends is the GPU half of the 16 ms frame.