WebGLコンテキストの復元：資源を作り直し、選択した色を戻す

<!doctype html>
<html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebGLの喪失と復元</title>
<style>
body { margin: 16px; font-family: sans-serif; line-height: 1.8; }
main { max-width: 560px; margin: auto; }
.frame { position: relative; width: 100%; aspect-ratio: 2; }
canvas, svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[hidden] { display: none; }
button, select { font: inherit; margin: 4px; max-width: 100%; }
:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style></head><body><main>
<h1>三角形の色見本（架空の練習）</h1>
<label for="color">色</label>
<select id="color"><option value="orange">橙色</option><option value="blue">青色</option></select>
<div class="frame">
<svg id="fallback" role="img" aria-label="選択した色の三角形の静止図" viewBox="0 0 200 100">
<rect width="200" height="100" fill="#fff"/><path id="triangle" d="M30 85L170 85L100 15Z" fill="#ff8000"/>
</svg>
<canvas id="canvas" aria-label="選択した色の三角形" hidden></canvas>
</div>
<p id="status" role="status">静止図を表示しています。</p>
<button id="lose" type="button" disabled>喪失を模擬</button>
<button id="restore" type="button" disabled>復元を要求</button>
<button id="stop" type="button">描画を終了</button>
</main><script>
const canvas = document.querySelector('#canvas');
const fallback = document.querySelector('#fallback');
const status = document.querySelector('#status');
const select = document.querySelector('#color');
const lose = document.querySelector('#lose');
const restore = document.querySelector('#restore');
const stop = document.querySelector('#stop');
const gl = canvas.getContext('webgl');
let active = null;
let generation = 0;
let ended = false;
let color = 'orange';
let extension = null;
const events = new AbortController();
const options = { signal: events.signal };
const observer = new ResizeObserver(() => draw());
function staticView(message) {
  canvas.hidden = true;
  fallback.hidden = false;
  status.textContent = message;
}
function dispose() {
  if (!active) return;
  if (!gl.isContextLost()) {
    gl.deleteBuffer(active.buffer);
    gl.deleteProgram(active.program);
  }
  active = null;
}
function initialize() {
  if (ended || gl.isContextLost()) return;
  dispose();
  const shaders = [];
  let program;
  let buffer;
  try {
    function compile(type, source) {
      const shader = gl.createShader(type);
      if (!shader) throw new Error('shader作成失敗');
      shaders.push(shader);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error('shaderの検証失敗');
      return shader;
    }
    const vertex = compile(gl.VERTEX_SHADER,
      'attribute vec2 position; void main(){ gl_Position = vec4(position, 0.0, 1.0); }');
    const fragment = compile(gl.FRAGMENT_SHADER,
      'precision mediump float; uniform vec3 ink; void main(){ gl_FragColor = vec4(ink, 1.0); }');
    program = gl.createProgram();
    if (!program) throw new Error('program作成失敗');
    gl.attachShader(program, vertex);
    gl.attachShader(program, fragment);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error('リンク失敗');
    buffer = gl.createBuffer();
    if (!buffer) throw new Error('buffer作成失敗');
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.7,-0.7, 0.7,-0.7, 0,0.7]), gl.STATIC_DRAW);
    const position = gl.getAttribLocation(program, 'position');
    const ink = gl.getUniformLocation(program, 'ink');
    if (position < 0 || ink === null) throw new Error('描画項目が見つかりません');
    active = { program, buffer, position, ink };
    generation++;
    extension = gl.getExtension('WEBGL_lose_context');
    canvas.hidden = false;
    fallback.hidden = true;
    lose.disabled = !extension;
    restore.disabled = true;
    draw();
  } catch (error) {
    if (buffer) gl.deleteBuffer(buffer);
    if (program) gl.deleteProgram(program);
    active = null;
    lose.disabled = true;
    staticView(error.message + '。静止図を表示します。');
  } finally {
    shaders.forEach(shader => gl.deleteShader(shader));
  }
}
function draw() {
  if (ended || !active || gl.isContextLost()) return;
  const box = canvas.parentElement.getBoundingClientRect();
  const dpr = Math.min(devicePixelRatio, 2);
  canvas.width = Math.max(1, Math.round(box.width * dpr));
  canvas.height = Math.max(1, Math.round(box.height * dpr));
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1, 1, 1, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.useProgram(active.program);
  gl.bindBuffer(gl.ARRAY_BUFFER, active.buffer);
  gl.enableVertexAttribArray(active.position);
  gl.vertexAttribPointer(active.position, 2, gl.FLOAT, false, 0, 0);
  gl.uniform3fv(active.ink, color === 'blue' ? [0,0.4,0.8] : [1,0.5,0]);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  status.textContent = `描画中：第${generation}世代、${color === 'blue' ? '青色' : '橙色'}`;
}
select.addEventListener('change', () => {
  color = select.value;
  document.querySelector('#triangle').setAttribute('fill', color === 'blue' ? '#0066cc' : '#ff8000');
  draw();
}, options);
canvas.addEventListener('webglcontextlost', event => {
  event.preventDefault();
  active = null;
  lose.disabled = true;
  restore.disabled = !extension;
  staticView('コンテキストを失いました。選択した色は静止図に残ります。');
}, options);
canvas.addEventListener('webglcontextrestored', initialize, options);
lose.addEventListener('click', () => extension?.loseContext(), options);
restore.addEventListener('click', () => {
  extension?.restoreContext();
  status.textContent = '復元を要求しました。完了までは静止図を表示します。';
}, options);
stop.addEventListener('click', () => {
  ended = true;
  observer.disconnect();
  events.abort();
  dispose();
  select.disabled = lose.disabled = restore.disabled = stop.disabled = true;
  staticView('描画を終了しました。再開するにはページを読み直してください。');
}, options);
if (gl) { initialize(); observer.observe(canvas.parentElement); }
else { staticView('WebGLを利用できないため静止図を表示します。'); }
</script></body></html>