Project 37, Media and real-time

WebGPU Particle Playground

Move your mouse or finger over the canvas and the particles follow. With WebGPU your graphics card moves every one of them, every frame.

Main API: WebGPU
Shaders: WGSL compute and render
Fallback: Canvas 2D
Your browser: Checking

Particles

Starting

0 fps

Particles Gravity Pointer pull Size Color

How it works

Fill a bufferEach particle is 4 floats: position and velocity. They all live in one GPU storage buffer.
Simulate on the GPUA compute shader runs once per particle, in groups of 64, adding gravity and the pull toward the pointer.
DrawThe render pass reads the same buffer and draws a small glowing quad per particle, colored by speed.

@compute @workgroup_size(64)
fn simulate(@builtin(global_invocation_id) id: vec3u) {
  let i = id.x;
  if (i >= u.count) { return; }
  var p = particles[i];
  let d = u.mouse - p.pos;
  p.vel += normalize(d) * u.pull / (dot(d, d) + 0.05) * u.dt;  // pull to pointer
  p.vel.y -= u.gravity * u.dt;
  p.vel *= 0.995;
  p.pos += p.vel * u.dt;
  particles[i] = p;
}