home/ modules/ gpu-compute-and-feedback-simulations

GPU compute and feedback-buffer simulations

  • learner can write WGSL compute shaders using storage buffers with read-write access and workgroup addressing
  • learner can dispatch compute passes with correct workgroup sizing and explicit bind-group layouts
  • learner can run a ping-pong double-buffered simulation such as Conway's Game of Life on a toroidal grid

Implement Conway's Game of Life as a WebGPU compute simulation: ping-pong storage buffers, read-write WGSL storage access, workgroup-sized dispatch, modulo grid wrap-around, and a render pass sharing the state buffers via an explicit bind-group layout.

This module crosses the line from GPU-as-renderer to GPU-as-simulator — the move that powers the evolving, self-feeding visuals of an audiovisual live set: cellular automata pulsing behind a techno kick, generative textures that mutate bar by bar instead of looping. The whole task is a complete WebGPU Game of Life — compute pass feeding render pass through shared buffers — the archetype for any feedback simulation you’ll run on stage.

The arc starts supported: with render pipelines already familiar from the WGSL prerequisite, you first meet the compute stage as a shader with no vertex/fragment I/O, writing only to storage buffers. Early exercises dispatch a trivial kernel — here “dispatchWorkgroups takes the number of workgroups, not invocations” is the JIT pointer that saves you from the classic off-by-64 sizing bug. You then wire simulation state through storage buffers with read_write access, and confront the parallel-mutation hazard that “the ping-pong pattern uses two alternating state buffers” resolves. Layering in Conway’s rules and “wrapping edge-cell neighbor lookups with the modulo operator” closes the toroidal grid, and the explicit bind-group layout lets compute and render pipelines share one buffer set. The capstone then removes the scaffolding: you assemble compute pass before render pass, swap buffer roles by step counter, and render the live state from the shared buffers — unassisted.

Every required atom is a gate: skip any one and the capstone breaks concretely — races without ping-pong, out-of-bounds reads without modulo wrap, un-shareable layouts without explicit bind groups. Two supporting atoms are enrichment: instancing makes the state render dramatically cheaper (one draw call for a thousand cells), and the 4-band FFT uniform pattern (taught in a GLSL context, but the technique transfers) shows how to make the render audio-reactive for the stage — but the simulation stands without either.

Atoms in this module

Required — these gate the capstone

A compute shader is an @compute WGSL function that runs without fixed vertex/fragment I/O, reading and writing only storage buffers or textures
Concept L3 Craft G
Compute work in WebGPU runs in a compute pass that is recorded before the render pass in the same command encoder
Procedure L3 Craft G
WebGPU compute threads are grouped into workgroups and addressed by a global invocation id
Concept L3 Craft GK
dispatchWorkgroups takes the number of workgroups, not invocations — total invocations equals workgroup count times workgroup size
Concept L3 Craft G
Storage buffers are large, compute-shader-writable GPU buffers declared var<storage> in WGSL, contrasting with size-limited read-only uniforms
Concept L3 Craft G
WGSL storage buffers are read-only by default with var<storage>; read-write access requires var<storage, read_write> and is only available in compute shaders
Concept L3 Craft G
The ping-pong pattern uses two alternating state buffers — one read-input, one write-output — to prevent in-place mutation corruption in GPU simulations
Concept L3 Craft G
Conway's Game of Life updates each cell based on neighbor count: fewer than 2 or more than 3 active neighbors → dies; exactly 3 → activates; 2 → unchanged
Fact L2 First instrument G
Wrapping edge-cell neighbor lookups with the modulo operator creates a toroidal grid topology that prevents out-of-bounds buffer access
Procedure L3 Craft G
When multiple pipelines share resources, an explicit GPUBindGroupLayout and GPUPipelineLayout must replace the auto-generated layout
Procedure L3 Craft G

Supporting — enrichment, not gating

GPU instancing draws multiple copies of the same geometry in one draw call, using @builtin(instance_index) to differentiate each copy
Concept L2 First instrument G
Audio FFT data can be passed to shaders as a 4-band uniform for audio-reactive visuals
Procedure L3 Craft GJ