コンテキストとキャンバス

// 第 2 引数でコンテキストの性質を指定できる(省略時は既定値)
const gl = canvas.getContext('webgl2', {
  alpha: false, // 常に不透明にする(既定は true)
  antialias: true, // MSAA を「要求」する(既定どおり。保証はない)
  preserveDrawingBuffer: false, // 表示後に中身を保持しない(既定どおり)
});
if (!gl) {
  throw new Error('このブラウザは WebGL2 に対応していません');
}

// 実際に適用された値は、あとから確認できる
console.log(gl.getContextAttributes());

// 以降のクリア(と描画)は scissor の矩形内に制限される
gl.enable(gl.SCISSOR_TEST);

for (let y = 0; y * cell < height; y++) {
  for (let x = 0; x * cell < width; x++) {
    // 注意: scissor / viewport の原点は「左下」。y は上向き(DOM とは逆)
    gl.scissor(x * cell, y * cell, cell, cell);
    if ((x + y) % 2 === 0) {
      gl.clearColor(0.09, 0.11, 0.14, 1.0);
    } else {
      gl.clearColor(0.17, 0.2, 0.26, 1.0);
    }
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
}

// 制限を解除しておかないと、以降のクリアが最後の 1 マスにしか効かなくなる
gl.disable(gl.SCISSOR_TEST);

function resize(): void {
  const dpr = Math.min(window.devicePixelRatio, 2);
  const width = Math.floor(canvas.clientWidth * dpr);
  const height = Math.floor(canvas.clientHeight * dpr);

  // width / height への代入は描画バッファの作り直し(中身は消える)なので、変化時のみ行う
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width;
    canvas.height = height;
  }

  // 描画バッファのサイズが変わっても viewport は自動では追従しない。毎回合わせ直す
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

  draw();
}

// 要素の表示サイズの変化を監視する。要素が表示されていてサイズが 0 でなければ、
// observe() の直後にも 1 回発火する
const observer = new ResizeObserver(resize);
observer.observe(canvas);

// 第2章: コンテキストとキャンバス
// 描画バッファと表示サイズの関係、devicePixelRatio、scissor、リサイズ追従。
// シェーダーはまだ使わない。市松模様は scissor + clear だけで描いている。

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  readout: HTMLParagraphElement,
  toggle: HTMLButtonElement,
): void {
  // false にすると、描画バッファを CSS サイズのまま(dpr = 1 相当で)確保する。
  // 高 DPI のディスプレイでは、引き伸ばされてぼやける様子が観察できる
  let useHighResolution = true;

  // 市松模様を描く。1 マスは CSS 上で 16px 固定(解像度を切り替えても見た目の大きさを変えない)
  function draw(): void {
    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;
    const scale = width / canvas.clientWidth; // 描画バッファのピクセル / CSS ピクセル
    const cell = Math.max(1, Math.round(16 * scale));

    // 以降のクリア(と描画)は scissor の矩形内に制限される
    gl.enable(gl.SCISSOR_TEST);

    for (let y = 0; y * cell < height; y++) {
      for (let x = 0; x * cell < width; x++) {
        // 注意: scissor / viewport の原点は「左下」。y は上向き(DOM とは逆)
        gl.scissor(x * cell, y * cell, cell, cell);
        if ((x + y) % 2 === 0) {
          gl.clearColor(0.09, 0.11, 0.14, 1.0);
        } else {
          gl.clearColor(0.17, 0.2, 0.26, 1.0);
        }
        gl.clear(gl.COLOR_BUFFER_BIT);
      }
    }

    // 制限を解除しておかないと、以降のクリアが最後の 1 マスにしか効かなくなる
    gl.disable(gl.SCISSOR_TEST);
  }

  function updateReadout(): void {
    readout.textContent =
      `CSS サイズ: ${canvas.clientWidth} × ${canvas.clientHeight} px / ` +
      `描画バッファ: 要求 ${canvas.width} × ${canvas.height} px・` +
      `実確保 ${gl.drawingBufferWidth} × ${gl.drawingBufferHeight} px / ` +
      `devicePixelRatio: ${window.devicePixelRatio}`;
  }

  function resize(): void {
    const dpr = useHighResolution ? Math.min(window.devicePixelRatio, 2) : 1;
    const width = Math.floor(canvas.clientWidth * dpr);
    const height = Math.floor(canvas.clientHeight * dpr);

    // width / height への代入は描画バッファの作り直し(中身は消える)なので、変化時のみ行う
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }

    // 描画バッファのサイズが変わっても viewport は自動では追従しない。毎回合わせ直す。
    // (このデモは clear しか使わないため viewport は結果に影響しないが、習慣としてここで設定する)
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

    draw();
    updateReadout();
  }

  toggle.addEventListener('click', () => {
    useHighResolution = !useHighResolution;
    toggle.textContent = useHighResolution
      ? '低解像度に切り替える (dpr = 1 相当)'
      : '高解像度に戻す (devicePixelRatio に合わせる)';
    resize();
  });

  // 要素の表示サイズの変化を監視する。要素が表示されていてサイズが 0 でなければ
  // observe() の直後にも 1 回発火するので、初回の描画もこの経路で行われる
  const observer = new ResizeObserver(resize);
  observer.observe(canvas);

  // devicePixelRatio の変化(ブラウザのズーム、dpr の異なるディスプレイへの移動)は
  // CSS サイズが変わらないため ResizeObserver では検知できない。
  // 「現在の dpr に一致する」メディアクエリの変化を監視して拾う
  function watchDevicePixelRatio(): void {
    const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
    media.addEventListener(
      'change',
      () => {
        resize();
        watchDevicePixelRatio(); // 新しい dpr で監視を張り直す
      },
      { once: true },
    );
  }
  watchDevicePixelRatio();
}

// ---------------------------------------------------------------------------
// 要素とコンテキストの取得
// ---------------------------------------------------------------------------

const canvas = document.querySelector<HTMLCanvasElement>('#demo');
const readout = document.querySelector<HTMLParagraphElement>('#readout');
const toggle = document.querySelector<HTMLButtonElement>('#toggle-resolution');
if (!canvas || !readout || !toggle) {
  throw new Error('デモに必要な要素が見つかりません');
}

const gl = canvas.getContext('webgl2');
if (!gl) {
  throw new Error('このブラウザは WebGL2 に対応していません');
}

setup(gl, canvas, readout, toggle);