Showcase 10 · WebGPU
One Million
One million particles that all feel each other, live in the browser. Every particle attracts every other: two spiral galaxies collide, tear long tidal arms out of each other and merge. Drag across the stage with your mouse or finger to throw in an extra mass.
The live demo needs JavaScript and WebGPU or WebGL 2. The picture shows the colliding galaxies; the explanation below reads fine without it.
- Particles
- –
- Interactions/s
- –
- Backend
- –
- Frames/s
- –
How it works
Computing every pair directly would take a trillion forces per frame. Instead a compute shader spreads the mass of all particles onto a grid (particle-mesh method). The gravity field on that grid comes from a Poisson equation that a multigrid solver on the graphics card solves every frame in one pass through all grid levels. Every particle reads its acceleration from it and so feels the pull of all the others. The galaxies start as rotating discs inside a dark halo; their tidal arms come from the physics alone.
With WebGPU up to one million particles run. Without WebGPU, WebGL 2 takes over with a quarter of the particles and runs the same method with fragment shaders instead of compute shaders. When frames get too slow, the particle count drops step by step. The readout shows how many particles are computing, which backend is running and how many interactions per second that means: every particle pair the gravity field connects in each step. All colours come from the design tokens.