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: 640px; margin: auto; }
button { font: inherit; margin: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style>
</head>
<body>
<main>
<h1>資源を一組ずつ作り直す</h1>
<p>描画を行わず、bufferとtextureの寿命を確かめます。</p>
<button id="create" type="button" disabled>作成・作り直し</button>
<button id="release" type="button" disabled>解放</button>
<button id="fail" type="button" disabled>texture作成の失敗を再現</button>
<pre id="result" role="status">JavaScriptとWebGLを確認しています。</pre>
<canvas id="gpu" width="1" height="1" hidden></canvas>
</main>
<script>
const canvas = document.querySelector('#gpu');
const result = document.querySelector('#result');
const buttons = [...document.querySelectorAll('button')];
const gl = canvas.getContext('webgl');
let active = null;

function createPair(failTexture = false) {
  let buffer = null;
  let texture = null;
  let disposed = false;
  function dispose() {
    if (disposed) return;
    disposed = true;
    if (texture) gl.deleteTexture(texture);
    if (buffer) gl.deleteBuffer(buffer);
  }
  function describe() {
    return `buffer: ${gl.isBuffer(buffer)}, texture: ${gl.isTexture(texture)}`;
  }
  try {
    buffer = gl.createBuffer();
    if (!buffer) throw new Error('bufferを作成できません');
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    texture = failTexture ? null : gl.createTexture();
    if (!texture) throw new Error('textureを作成できません');
    gl.bindTexture(gl.TEXTURE_2D, texture);
    if (gl.isContextLost()) throw new Error('WebGLを失いました');
    return { dispose, describe };
  } catch (error) {
    dispose();
    throw new Error(error.message + '\n後始末後 ' + describe());
  } finally {
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
    gl.bindTexture(gl.TEXTURE_2D, null);
  }
}

function replace(failTexture) {
  active?.dispose();
  active = null;
  try {
    active = createPair(failTexture);
    result.textContent = '作成後 ' + active.describe();
  } catch (error) {
    result.textContent = error.message;
  }
}

if (gl) {
  buttons.forEach(button => { button.disabled = false; });
  result.textContent = '現在の組：なし';
  document.querySelector('#create').addEventListener('click', () => replace(false));
  document.querySelector('#fail').addEventListener('click', () => replace(true));
  document.querySelector('#release').addEventListener('click', () => {
    if (!active) {
      result.textContent = '現在の組：なし';
      return;
    }
    active.dispose();
    active.dispose(); // 二重に呼んでも片付けは一度だけ
    result.textContent = '解放後 ' + active.describe();
    active = null;
  });
} else {
  result.textContent = 'この環境ではWebGLを利用できません。';
}
canvas.addEventListener('webglcontextlost', () => {
  active?.dispose();
  active = null;
  buttons.forEach(button => { button.disabled = true; });
  result.textContent = 'WebGLを失いました。再読み込みしてください。';
});
</script>
</body>
</html>