@group and @binding

Every module-scope buffer, texture and sampler carries two numbers: @group(g) picks the bind group set with setBindGroup(g, ...), and @binding(b) an entry inside it. A device has 4 groups (maxBindGroups) of up to 1000 bindings; the numbers need not be contiguous. Group resources by how often they change (per frame, per material, per draw), so a draw loop rebinds only the fast-changing group. A resource without both attributes fails ("resource variables require '@group' and '@binding' attributes"), and so does an entry point using two variables with the same pair:

Two variables that claim the same bindingJavaScript

// out: 0 x u32
@group(0) @binding(0) var<storage, read_write> out: array<f32>;
@group(0) @binding(0) var<uniform> discount: f32;
@compute @workgroup_size(1) fn main() { out[0] = discount; }

Output

3:23 error: entry point 'main' references multiple variables that use the same resource
  binding '@group(0)', '@binding(0)'
2:23 info: first resource binding usage declared here

The check is per entry point: when only a second entry point used discount, the module compiled.

Resources grouped by update frequency: group 0 per frame, group 1 per material, group 2 per draw, and a duplicate binding rejectedHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
  .stage { position: relative; width: 100%; max-width: 600px; }
  .stage canvas { display: block; width: 100%; }
  .stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
  <canvas id="view" width="600" height="340"></canvas>
  <canvas id="labels" width="600" height="340"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');

function showMessage(text) {                     // 2D fallback when WebGPU is missing
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
function label(text, x, y, size = 12, color = '#2b2b2b', font = 'system-ui, sans-serif') {
  ink.font = `${size}px ${font}`; ink.fillStyle = color; ink.fillText(text, x, y);
}

const code = /* wgsl */ `
@group(0) @binding(0) var<uniform> time: f32;          // per frame
@group(1) @binding(0) var<uniform> material: vec4f;    // per material: colour
@group(2) @binding(0) var<uniform> slot: vec4f;        // per draw: x position, height
struct Out { @builtin(position) pos: vec4f, @location(0) uv: vec2f }
@vertex fn vs(@builtin(vertex_index) v: u32) -> Out {
  let q = vec2f(f32(v & 1), f32(v >> 1));
  let lean = sin(time * 2 + slot.x * 4) * 0.03 * q.y;      // books sway a little
  return Out(vec4f(slot.x + q.x * 0.2 + lean, -0.55 + q.y * slot.y, 0, 1), q);
}
@fragment fn fs(in: Out) -> @location(0) vec4f {
  return vec4f(material.rgb * (0.7 + 0.3 * smoothstep(0.0, 0.2, in.uv.x)), 1);
}`;

async function main() {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return showMessage('WebGPU is not available in this browser');
  const device = await adapter.requestDevice();
  const context = canvas.getContext('webgpu');
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });

  // Two variables claiming @group(0) @binding(0) in one entry point: caught by an error scope.
  device.pushErrorScope('validation');
  device.createComputePipeline({ layout: 'auto', compute: { module: device.createShaderModule({ code: `
    @group(0) @binding(0) var<storage, read_write> out: array<f32>;
    @group(0) @binding(0) var<uniform> discount: f32;
    @compute @workgroup_size(1) fn main() { out[0] = discount; }` }) } });
  const clash = await device.popErrorScope();

  const module = device.createShaderModule({ code });
  const pipeline = device.createRenderPipeline({ layout: 'auto', primitive: { topology: 'triangle-strip' },
    vertex: { module }, fragment: { module, targets: [{ format }] } });
  const uniform = (data) => {
    const b = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
    device.queue.writeBuffer(b, 0, new Float32Array(data));
    return b;
  };
  const group = (n, buffer) => device.createBindGroup({ layout: pipeline.getBindGroupLayout(n), entries: [{ binding: 0, resource: { buffer } }] });
  const timeBuffer = uniform([0, 0, 0, 0]);
  const frameGroup = group(0, timeBuffer);
  const materials = [group(1, uniform([0.08, 0.40, 0.75, 1])), group(1, uniform([0.85, 0.45, 0.15, 1]))];
  const slots = [0, 1, 2, 3, 4, 5].map((i) => group(2, uniform([-0.9 + i * 0.3, 0.9 + (i % 3) * 0.15, 0, 0])));

  function frame(now) {
    device.queue.writeBuffer(timeBuffer, 0, new Float32Array([now / 1000]));
    const encoder = device.createCommandEncoder();
    const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
      clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
    pass.setPipeline(pipeline);
    pass.setBindGroup(0, frameGroup);                 // once per frame
    let calls = 1;
    for (let m = 0; m < 2; m++) {
      pass.setBindGroup(1, materials[m]); calls++;     // once per material
      for (let i = m * 3; i < m * 3 + 3; i++) {
        pass.setBindGroup(2, slots[i]); calls++;       // once per draw
        pass.draw(4);
      }
    }
    pass.end();
    device.queue.submit([encoder.finish()]);
    ink.clearRect(0, 0, 600, 340);
    label(`6 draws, ${calls} setBindGroup() calls: group 0 once, group 1 twice, group 2 six times`, 12, 22, 12.5, '#222');
    label('@group(0): time      @group(1): material colour      @group(2): slot position', 12, 42, 12, '#1f4f8a', 'ui-monospace, monospace');
    label('Same @group and @binding used twice by one entry point:', 12, 300, 12, '#222');
    label(clash ? clash.message.split('\n')[0].slice(0, 88) : 'accepted?', 12, 318, 11.5, '#8a2b2b', 'ui-monospace, monospace');
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}
main();
</script>

MENU