Compute Shaders
CPU vs GPU Particle Simulation
CPU (JavaScript)
~1,000
Particles practical limit. Each particle position updated per frame on CPU. Transfers data to GPU every frame.
GPU (Compute)
1,000,000+
Particles with compute shaders. Position, velocity, forces all computed in parallel on GPU. No CPU transfer needed.
CPU Pipeline (Traditional)
1
JS loop: update positions
GPU Compute Pipeline (This Demo)
1
Compute shader: update positions
2
Storage buffer stays on GPU
3
GPU renders points directly
const computeFn = Fn(() => {
const pos = positions.element(instanceIndex);
const vel = velocities.element(instanceIndex);
pos.addAssign(vel.mul(speed));
vel.addAssign(vec3(0, gravity, 0));
});
Why compute shaders matter: GPUs have thousands of cores
that can process particles in parallel. A CPU processes them one at a time
(or a few with SIMD). With WebGPU compute shaders, particle physics,
fluid simulation, and other massively parallel tasks run 100-1000x faster.