WebGPU bind groupの接続エラー：番号とバッファの用途を照合する

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>接続する番号と用途を照合する</title>
<style>
body { margin: 16px; font: 16px/1.8 sans-serif; }
main { max-width: 720px; margin: auto; }
button, select { font: inherit; margin-block: 8px; max-width: 100%; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #245ba7; outline-offset: 3px; }
</style>
</head><body><main>
<h1>接続する番号と用途を照合する</h1>
<p>入力0.5を二倍にし、結果1を読み戻す実験です。</p>
<label for="mode">試す条件</label>
<select id="mode">
<option value="ok">正しい接続</option>
<option value="number">binding番号を変える</option>
<option value="usage">bufferの用途を変える</option>
</select>
<button id="run" type="button">実行する</button>
<pre id="result" role="status">条件を選んで実行してください。JavaScriptが必要です。</pre>
</main><script type="module">
const button = document.querySelector('#run');
const result = document.querySelector('#result');
const mode = document.querySelector('#mode');
async function checked(device, label, work) {
  device.pushErrorScope('validation');
  let value;
  try { value = work(); }
  finally {
    const error = await device.popErrorScope();
    if (error) throw new Error(label + ': ' + error.message);
  }
  return value;
}
async function run(kind) {
  let device;
  let finished = false;
  let lost = false;
  const buffers = [];
  try {
    if (!navigator.gpu) throw new Error('WebGPUを利用できません。');
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) throw new Error('利用できるadapterがありません。');
    device = await adapter.requestDevice();
    device.lost.then(() => {
      if (!finished) {
        lost = true;
        result.textContent = 'デバイスを失いました。再実行してください。';
      }
    });
    function buffer(size, usage) {
      const value = device.createBuffer({ size, usage });
      buffers.push(value);
      return value;
    }
    const layout = device.createBindGroupLayout({ entries: [
      { binding: 2, visibility: GPUShaderStage.COMPUTE,
        buffer: { type: 'uniform', minBindingSize: 16 } },
      { binding: 5, visibility: GPUShaderStage.COMPUTE,
        buffer: { type: 'storage', minBindingSize: 4 } }
    ] });
    const module = device.createShaderModule({ code: `
@group(0) @binding(2) var<uniform> settings: vec4<f32>;
@group(0) @binding(5) var<storage, read_write> result: f32;
@compute @workgroup_size(1) fn main() {
  result = settings.x * 2.0;
}` });
    const pipeline = await device.createComputePipelineAsync({
      layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
      compute: { module, entryPoint: 'main' }
    });
    const inputUsage = kind === 'usage' ? GPUBufferUsage.STORAGE : GPUBufferUsage.UNIFORM;
    const input = buffer(16, inputUsage | GPUBufferUsage.COPY_DST);
    const output = buffer(4, GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC);
    const readback = buffer(4, GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST);
    device.queue.writeBuffer(input, 0, new Float32Array([0.5, 0, 0, 0]));
    const group = await checked(device, '接続', () => device.createBindGroup({
      layout,
      entries: [
        { binding: 5, resource: { buffer: output } },
        { binding: kind === 'number' ? 3 : 2, resource: { buffer: input } }
      ]
    }));
    const encoder = device.createCommandEncoder();
    const pass = encoder.beginComputePass();
    pass.setPipeline(pipeline);
    pass.setBindGroup(0, group);
    pass.dispatchWorkgroups(1);
    pass.end();
    encoder.copyBufferToBuffer(output, 0, readback, 0, 4);
    await checked(device, '実行', () => device.queue.submit([encoder.finish()]));
    await readback.mapAsync(GPUMapMode.READ);
    const values = Array.from(new Float32Array(readback.getMappedRange()));
    readback.unmap();
    if (!lost) result.textContent = 'GPUの結果: ' + values.join(', ');
  } catch (error) {
    result.textContent = '実行できません: ' + error.message;
  } finally {
    finished = true;
    for (const value of buffers) value.destroy();
    device?.destroy();
  }
}
button.addEventListener('click', async () => {
  button.disabled = true;
  result.textContent = '処理中です。';
  try { await run(mode.value); }
  finally { button.disabled = false; }
});
</script></body></html>