WebGPU 対応確認の先へ：初期化失敗とdevice喪失で代替表示を残す

<!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-family: sans-serif; line-height: 1.8; }
main { max-width: 560px; margin: auto; }
.frame { width: 100%; aspect-ratio: 2; position: relative; }
canvas, svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
[hidden] { display: none; }
button, select { font: inherit; max-width: 100%; margin: 4px 0; }
:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style></head><body><main>
<h1>色見本（架空の練習）</h1>
<p>橙色の面を表示します。静止図でも同じ見本を確認できます。</p>
<div class="frame">
<svg id="fallback" role="img" aria-label="橙色の静止見本" viewBox="0 0 2 1">
  <path fill="#ff8000" d="M0 0h2v1H0z" />
</svg>
<canvas id="canvas" aria-label="WebGPUによる橙色の見本" hidden></canvas>
</div>
<p id="status" role="status">静止図を表示しています。</p>
<label for="mode">検証する条件</label>
<select id="mode">
<option value="normal">通常</option>
<option value="absent">APIなしを模擬</option>
<option value="null">adapterなしを模擬</option>
<option value="reject">device取得失敗を模擬</option>
<option value="delay">取得後に2秒待つ</option>
</select>
<button id="start" type="button">WebGPUを試す</button>
<button id="stop" type="button">静止図へ戻す</button>
<button id="lose" type="button" disabled>deviceを破棄して喪失を試す</button>
</main><script type="module">
const canvas = document.querySelector('#canvas');
const fallback = document.querySelector('#fallback');
const status = document.querySelector('#status');
const mode = document.querySelector('#mode');
const start = document.querySelector('#start');
const stop = document.querySelector('#stop');
const lose = document.querySelector('#lose');
let generation = 0;
let active = null;
function showStatic(message) {
  canvas.hidden = true;
  fallback.hidden = false;
  status.textContent = message;
}
function finish(message) {
  generation++;
  const previous = active;
  active = null;
  previous?.dispose();
  start.disabled = false;
  lose.disabled = true;
  showStatic(message);
}
async function run(condition) {
  finish('静止図を残して初期化しています。');
  const own = generation;
  start.disabled = true;
  let device;
  let context;
  let observer;
  let disposed = false;
  const dispose = () => {
    if (disposed) return;
    disposed = true;
    observer?.disconnect();
    context?.unconfigure();
    device?.destroy();
  };
  try {
    const gpu = condition === 'absent' ? null : navigator.gpu;
    if (!gpu) throw new Error('WebGPU APIを利用できません。');
    const adapter = condition === 'null' ? null : await gpu.requestAdapter();
    if (own !== generation) return;
    if (!adapter) throw new Error('adapterを取得できません。');
    if (condition === 'reject') throw new Error('device取得失敗の模擬です。');
    device = await adapter.requestDevice();
    if (condition === 'delay') await new Promise(resolve => setTimeout(resolve, 2000));
    if (own !== generation) return;
    active = { device, dispose };
    device.lost.then(() => {
      if (own === generation) finish('deviceを失ったため静止図へ戻しました。');
    });
    context = canvas.getContext('webgpu');
    if (!context) throw new Error('canvasを設定できません。');
    context.configure({ device, format: gpu.getPreferredCanvasFormat(), alphaMode: 'opaque' });
    function draw() {
      const rect = canvas.parentElement.getBoundingClientRect();
      const dpr = Math.min(devicePixelRatio, 2);
      const limit = device.limits.maxTextureDimension2D;
      canvas.width = Math.max(1, Math.min(limit, Math.round(rect.width * dpr)));
      canvas.height = Math.max(1, Math.min(limit, Math.round(rect.height * dpr)));
      const encoder = device.createCommandEncoder();
      const pass = encoder.beginRenderPass({ colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        clearValue: { r: 1, g: 0.5, b: 0, a: 1 }, loadOp: 'clear', storeOp: 'store'
      }] });
      pass.end();
      device.queue.submit([encoder.finish()]);
    }
    device.pushErrorScope('validation');
    draw();
    const error = await device.popErrorScope();
    if (own !== generation) return;
    if (error) throw new Error('初回の描画を検証できません。');
    device.addEventListener('uncapturederror', () => {
      if (own === generation) finish('描画エラーのため静止図へ戻しました。');
    });
    observer = new ResizeObserver(() => {
      if (own !== generation) return;
      try { draw(); } catch { finish('再描画できず静止図へ戻しました。'); }
    });
    observer.observe(canvas.parentElement);
    canvas.hidden = false;
    fallback.hidden = true;
    status.textContent = 'WebGPUで色見本を表示しています。';
    lose.disabled = false;
  } catch (error) {
    if (own === generation) finish(error.message);
  } finally {
    if (own !== generation || active?.device !== device) dispose();
    if (own === generation) start.disabled = false;
  }
}
start.addEventListener('click', () => run(mode.value));
stop.addEventListener('click', () => finish('静止図へ戻しました。'));
lose.addEventListener('click', () => active?.device.destroy());
window.addEventListener('pagehide', () => finish('静止図を表示しています。'));
</script></body></html>