Chapter 05

GPU Interface & Memory

The browser and shader meet at bindings, entry-point IO, and memory layout. WGSL describes the shader side of that agreement; WebGPU validation checks that the host side matches it.

Use reflection before guessing.

Open the buffer lesson in Studio and inspect bind groups, buffer layout, and generated host code.

Open buffer lesson

Bindings are numbered slots

@group and @binding are not comments. They identify the resource slot the host must populate for a pass.

resource slotsuniform + storage

struct Params {
  scale : f32,
  offset : f32,
};

@group(0) @binding(0)
var<uniform> params : Params;

@group(0) @binding(1)
var<storage, read_write> data : array<f32>;

Address spaces say where memory lives

uniform is read-only configuration, storage can hold large arrays and writable output, and workgroup is shared scratch memory for one workgroup.

Entry-point IO is explicit

Compute entry points usually receive builtin invocation coordinates. Vertex and fragment entry points combine builtins and user locations. Reflection makes those edges visible so layout drift does not hide in JavaScript.