WebGPU Compute Flowfield

How this is built

Capability path

The route checks navigator.gpu, requests a real adapter, and validates storage-buffer, workgroup, and texture limits before creating a device. Adapter identity, native versus compatibility backend, and the 64-agent compute workgroup are part of the instrument panel. Capability failure replaces the simulation with the designed static poster; the full explanation remains on the page.

GPU-resident simulation

Agent positions and velocities live in ping-pong storage buffers. A 48×27 RGBA16F storage-texture pair holds the field: one compute dispatch decays it toward a deterministic base swirl and splats the active brush; the next dispatch advects up to 262,144 agents. No simulation value is read back to JavaScript.

Trail presentation

Two RGBA16F trail targets alternate each frame. A fullscreen fade pass shortens history, an instanced 6-vertex draw adds every agent, and a final pass presents the trail to the WebGPU canvas. The simulation can therefore stay packed in storage buffers rather than becoming a vertex snapshot for the CPU.

Calibration and population

The first 1,000 ms of real rendered frames calibrates a starting population from measured frame time. The slider is native and keyboard-driven from 4,096 to 262,144 agents in 4,096-agent steps; the shared HUD reports the live FPS and p95 consequence rather than a guessed cost.

Editing and persistence

Pointer strokes and the keyboard brush mutate the same field texture. Arrow keys move the visible cursor, Shift widens a step, and holding Space strokes in the last movement direction. The painted 48×27 direction/strength grid and chosen agent count are stored at lab.webgpu-compute-flowfield.v1, and the panel’s own position at lab.webgpu-compute-flowfield.panel.v1, both as versioned envelopes. The colon-separated keys this route shipped with are still read and deliberately never deleted, so reverting the rename finds both where they were left. Every storage operation is wrapped in a guarded try/catch, and Clear painted field writes the cleared grid straight back rather than only clearing the GPU texture.

Reduced motion and recovery

With prefers-reduced-motion: reduce, no animation loop runs: deterministic compute bursts present one discrete frame per edit. Device loss and uncaptured GPU errors stop the loop and land on the poster. Hiding the document pauses work and resets frame metrics when it returns.