WebGPU uniformの配列配置：vec3の12バイトと16バイトを分ける

<!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>色の見た目ではなく、GPUが読んだ六つの成分を調べます。</p>
<label for="mode">試す条件</label>
<select id="mode">
<option value="ok">16バイトごとに配置</option>
<option value="packed">隙間なく詰める</option>
<option value="short">領域を24バイトにする</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 module = device.createShaderModule({ code: `
struct Palette { colors: array<vec3<f32>, 2>, }
@group(0) @binding(0) var<uniform> palette: Palette;
@group(0) @binding(1) var<storage, read_write> result: array<f32, 6>;
@compute @workgroup_size(1) fn main() {
  for (var i = 0u; i < 2u; i++) {
    for (var c = 0u; c < 3u; c++) {
      result[i * 3u + c] = palette.colors[i][c];
    }
  }
}` });
    const pipeline = await device.createComputePipelineAsync({
      layout: 'auto', compute: { module, entryPoint: 'main' }
    });
    const data = new Float32Array(kind === 'short' ? 6 : 8);
    data.set([0.25, 0.5, 1], 0);
    data.set([0.75, 0.25, 0.5], kind === 'packed' || kind === 'short' ? 3 : 4);
    const input = buffer(data.byteLength, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
    const output = buffer(24, GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC);
    const readback = buffer(24, GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST);
    device.queue.writeBuffer(input, 0, data);
    const group = await checked(device, '接続', () => device.createBindGroup({
      layout: pipeline.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: { buffer: input } },
        { binding: 1, resource: { buffer: output } }
      ]
    }));
    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, 24);
    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>