Bind Group Layouts

A GPUBindGroupLayout lists the bindings of one group. Each entry gives binding, visibility (a GPUShaderStage mask of VERTEX, FRAGMENT and COMPUTE) and exactly one resource member:

The five kinds of bind group layout entries
Member	Main options (default first)	WGSL type
buffer	type: uniform, storage, read-only-storage	var<uniform>, var<storage>
sampler	type: filtering, non-filtering, comparison	sampler, sampler_comparison
texture	sampleType: float, unfilterable-float, depth, sint, uint	texture_2d<f32> and others
storageTexture	access: write-only, read-only, read-write; format	texture_storage_2d<...>
externalTexture	none	texture_external (GPUExternalTexture)

Buffers also take hasDynamicOffset (Bind Groups) and minBindingSize (Buffer Alignment); textures take viewDimension and multisampled. Validation happens once, when a bind group is created, not at every draw. Keep visibility tight: per-stage limits count every binding visible to a stage.

Explicit bind group layouts using the buffer, sampler, texture and storageTexture binding types in one compute-then-render frameHTMLLive

<!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);
}

// Compute: paints a cover pattern into a storage texture.
const paint = /* wgsl */ `
@group(0) @binding(0) var art: texture_storage_2d<rgba8unorm, write>;   // storageTexture
@group(0) @binding(1) var<uniform> time: f32;                           // buffer: uniform
@compute @workgroup_size(8, 8) fn main(@builtin(global_invocation_id) id: vec3u) {
  let uv = vec2f(id.xy) / 64;
  let wave = 0.5 + 0.5 * sin(uv.x * 12 + time * 2) * cos(uv.y * 9 - time);
  textureStore(art, id.xy, vec4f(mix(vec3f(0.08, 0.40, 0.75), vec3f(0.98, 0.85, 0.40), wave * uv.y), 1));
}`;
// Render: samples that texture and sizes each cover by a price from storage.
const draw = /* wgsl */ `
@group(0) @binding(0) var cover: texture_2d<f32>;                        // texture
@group(0) @binding(1) var smp: sampler;                                  // sampler
@group(0) @binding(2) var<storage> prices: array<f32>;                   // buffer: read-only-storage
struct Out { @builtin(position) pos: vec4f, @location(0) uv: vec2f }
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
  let q = vec2f(f32(v & 1), f32(v >> 1));
  let h = prices[i] / 40;
  return Out(vec4f(-0.92 + f32(i) * 0.31 + q.x * 0.26, -0.75 + q.y * h * 1.3, 0, 1), vec2f(q.x, 1 - q.y));
}
@fragment fn fs(in: Out) -> @location(0) vec4f { return textureSample(cover, smp, in.uv); }`;

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 });
  const C = GPUShaderStage.COMPUTE, V = GPUShaderStage.VERTEX, F = GPUShaderStage.FRAGMENT;

  // Each entry: binding, visibility, and exactly one resource member.
  const paintLayout = device.createBindGroupLayout({ entries: [
    { binding: 0, visibility: C, storageTexture: { access: 'write-only', format: 'rgba8unorm' } },
    { binding: 1, visibility: C, buffer: { type: 'uniform', minBindingSize: 4 } }] });
  const drawLayout = device.createBindGroupLayout({ entries: [
    { binding: 0, visibility: F, texture: { sampleType: 'float', viewDimension: '2d' } },
    { binding: 1, visibility: F, sampler: { type: 'filtering' } },
    { binding: 2, visibility: V, buffer: { type: 'read-only-storage' } }] });

  const texture = device.createTexture({ size: [64, 64], format: 'rgba8unorm',
    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING });
  const time = device.createBuffer({ size: 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
  const prices = device.createBuffer({ size: 24, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
  device.queue.writeBuffer(prices, 0, new Float32Array([14.99, 39.50, 24.00, 18.75, 16.20, 21.30]));

  const compute = device.createComputePipeline({ layout: device.createPipelineLayout({ bindGroupLayouts: [paintLayout] }),
    compute: { module: device.createShaderModule({ code: paint }) } });
  const module = device.createShaderModule({ code: draw });
  const render = device.createRenderPipeline({ layout: device.createPipelineLayout({ bindGroupLayouts: [drawLayout] }),
    primitive: { topology: 'triangle-strip' }, vertex: { module }, fragment: { module, targets: [{ format }] } });
  // Validation of the resources against the layout happens here, once, not at every draw.
  const paintGroup = device.createBindGroup({ layout: paintLayout, entries: [
    { binding: 0, resource: texture.createView() }, { binding: 1, resource: { buffer: time } }] });
  const drawGroup = device.createBindGroup({ layout: drawLayout, entries: [
    { binding: 0, resource: texture.createView() },
    { binding: 1, resource: device.createSampler({ magFilter: 'linear', minFilter: 'linear' }) },
    { binding: 2, resource: { buffer: prices } }] });

  ink.font = '12px ui-monospace, monospace'; ink.fillStyle = '#222';
  ['paintLayout: storageTexture (write-only, rgba8unorm) | buffer (uniform)',
   'drawLayout:  texture (float, 2d) | sampler (filtering) | buffer (read-only-storage)',
   'The fifth kind, externalTexture, binds a video frame as texture_external.']
    .forEach((t, i) => ink.fillText(t, 10, 20 + i * 18));
  function frame(now) {
    device.queue.writeBuffer(time, 0, new Float32Array([now / 1000]));
    const encoder = device.createCommandEncoder();
    const cp = encoder.beginComputePass();
    cp.setPipeline(compute);
    cp.setBindGroup(0, paintGroup);
    cp.dispatchWorkgroups(8, 8);
    cp.end();
    const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
      clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
    pass.setPipeline(render);
    pass.setBindGroup(0, drawGroup);
    pass.draw(4, 6);
    pass.end();
    device.queue.submit([encoder.finish()]);
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}
main();
</script>

MENU