A dense swarm of small instanced 3D bodies tumbling and piling up in real time, simulated entirely on the GPU through a WebGPU compute pass.
Three.js WebGPU compute demos by Kevin Levron, the same person behind TroisJS and threejs-toys. Open the demo and a swarm of instanced bodies tumbles into the frame, jostling, piling up, scattering when the forces shift.
The reason it doesn't is that the simulation never leaves the GPU. The old WebGL habit was to crunch positions on the CPU and ship them over every frame, which is a bit like faxing yourself a page you're already holding. Here the whole step runs in a WebGPU compute pass, written in Three.js's TSL, so one JavaScript-flavored shader compiles down to WGSL or GLSL. Velocities and positions update in parallel, then render as a single instanced mesh, no round trip. It lives in a repo named, with refreshing honesty, test-webgpu: this is a workbench, not a product. So treat it like one. Browse the source, notice how little code the compute loop actually needs, change a constant and see what breaks.
- Live Demo: https://threejs-webgpu-test.netlify.app/test2
- Source Code: https://github.com/klevron/test-webgpu/tree/master/src/test2
- Author: Kevin Levron (X, GitHub, CodePen, LinkedIn)