WebGL シェーダーのエラーを読む：コンパイルとリンクを分ける

<!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: 640px; margin: auto; }
button, select { font: inherit; margin-block: 8px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style>
</head>
<body>
<main>
<h1>シェーダーの診断</h1>
<p>描画前のコンパイルとリンクを調べる練習です。</p>
<label for="mode">検査する条件</label>
<select id="mode">
  <option value="ok">正常</option>
  <option value="syntax">構文エラー</option>
  <option value="link">リンクエラー</option>
</select>
<button id="run" type="button" disabled>検査する</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 button = document.querySelector('#run');
const mode = document.querySelector('#mode');
const gl = canvas.getContext('webgl');

const vertex = `
varying mediump vec3 vTint;
void main() {
  vTint = vec3(1.0, 0.4, 0.0);
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}`;
const fragment = `
precision mediump float;
varying mediump vec3 vTint;
void main() {
  gl_FragColor = vec4(vTint, 1.0);
}`;

function diagnose(kind) {
  const shaders = [];
  let program = null;
  function compile(type, source, label) {
    const shader = gl.createShader(type);
    if (!shader) throw new Error(label + ': 作成できません');
    shaders.push(shader);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      throw new Error(label + ' compile\n' +
        (gl.getShaderInfoLog(shader) || 'ログなし'));
    }
    return shader;
  }
  try {
    let source = fragment;
    if (kind === 'syntax') {
      source = source.replace('vec4(vTint, 1.0);', 'vec4(vTint, 1.0)');
    }
    if (kind === 'link') {
      source = source.replace('vec3 vTint', 'vec2 vTint')
        .replace('vec4(vTint, 1.0)', 'vec4(vTint, 0.0, 1.0)');
    }
    const vs = compile(gl.VERTEX_SHADER, vertex, 'vertex');
    const fs = compile(gl.FRAGMENT_SHADER, source, 'fragment');
    program = gl.createProgram();
    if (!program) throw new Error('program: 作成できません');
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      throw new Error('program link\n' +
        (gl.getProgramInfoLog(program) || 'ログなし'));
    }
    return 'vertex compile: OK\nfragment compile: OK\nprogram link: OK';
  } catch (error) {
    return gl.isContextLost() ? 'WebGLを失いました。再読み込みしてください。'
      : error.message;
  } finally {
    if (program) gl.deleteProgram(program);
    for (const shader of shaders) gl.deleteShader(shader);
  }
}

if (gl) {
  button.disabled = false;
  result.textContent = '条件を選び、検査してください。';
  button.addEventListener('click', () => {
    result.textContent = diagnose(mode.value);
  });
} else {
  result.textContent = 'この環境ではWebGLを利用できません。';
}
canvas.addEventListener('webglcontextlost', () => {
  button.disabled = true;
  result.textContent = 'WebGLを失いました。再読み込みしてください。';
});
</script>
</body>
</html>