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

Enjoyed it? Pass it on.

Sharing is the simplest way to thank a maker. Your post credits Kevin Levron.

Post it on

Copy post text

If a composer opens empty, copy this text. For long posts, split it across posts and keep every maker’s credit.