Skip to content
GPU-Side Physics: A Three.js WebGPU Compute Demo

GPU-Side Physics: A Three.js WebGPU Compute Demo

Thousands of instanced bodies tumble and collide, with the entire physics step running on the GPU through WebGPU compute and Three.js TSL. No CPU round trip, no framerate flinch. A clean little workbench from Kevin Levron, built to inspect, tweak, and learn from.

Details

Published

What it is

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.

How it’s made

Framework & Tool
Three.js