テクスチャ — フィルタ・ラップ・ミップマップ・複数ユニット

/**
 * 画像を読み込む。decode() は「デコードが終わるまで待つ」Promise を返すので、
 * これが解決した時点で texImage2D にそのまま渡せる(失敗時は EncodingError で reject)
 */
async function loadImage(url: string): Promise<HTMLImageElement> {
  const image = new Image();
  image.src = url;
  await image.decode();
  return image;
}

/**
 * 1×1 の単色テクスチャ。画像が届くまでの間に合わせに使う。
 * 1×1 はミップレベルが level 0 の 1 段しかないので、この時点で「ミップマップ完備」。
 * MIN_FILTER をミップ系にしても不完全なテクスチャにならない
 */
function createPlaceholderTexture(rgba: readonly [number, number, number, number]): WebGLTexture {
  const texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  // 幅・高さ・border を数値で渡す 9 引数版。中身は ArrayBufferView(ここでは 4 バイト)
  const pixel = new Uint8Array(rgba);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  return texture;
}

/** 画像を level 0 に転送し、縮小用の段を作らせる。y 反転を切り替えるたびに呼び直す */
function uploadGridImage(): void {
  if (!gridImage) return;
  bindForEdit(gridTexture);
  // 転送の設定であってテクスチャの設定ではない。しかもコンテキスト全体の状態なので、
  // 「いつ誰が false に戻したか」に依存しないよう、転送の直前に必ず指定する
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY ? 1 : 0);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, gridImage);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
  uploadedFlipY = flipY ? 1 : 0; // 読み出し行に出すのは、この転送に効いた値
  // 1/2, 1/4, ... の段を GPU に作らせる。これを忘れて MIN_FILTER をミップ系にすると
  // 「不完全なテクスチャ」になり、texture() は (0, 0, 0, 1) = 不透明な黒を返す
  gl.generateMipmap(gl.TEXTURE_2D);
}

// 頂点が持つ UV をそのままフラグメントへ渡す。三角形の内側では
// 3 頂点の UV が補間され、ピクセルごとに違う (u, v) が届く(第3章の色の補間と同じ仕組み)
v_uv = a_uv;

// 拡大と縮小で使われる関数は別物なので、MAG と MIN を 1 組にして持つ
const FILTER_MODES = [
  {
    label: 'NEAREST',
    mag: gl.NEAREST,
    magLabel: 'NEAREST',
    min: gl.NEAREST,
    minLabel: 'NEAREST',
  },
  { label: 'LINEAR', mag: gl.LINEAR, magLabel: 'LINEAR', min: gl.LINEAR, minLabel: 'LINEAR' },
  {
    label: 'ミップマップ',
    mag: gl.LINEAR,
    magLabel: 'LINEAR',
    min: gl.LINEAR_MIPMAP_LINEAR,
    minLabel: 'LINEAR_MIPMAP_LINEAR',
  },
] as const;

/** フィルタとラップはテクスチャオブジェクトの状態。切り替えるたびに書き込み直す */
function applySampling(): void {
  const filter = FILTER_MODES[filterIndex];
  const wrap = WRAP_MODES[wrapIndex];
  bindForEdit(gridTexture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter.mag);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter.min);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap.wrap);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap.wrap);
  updateReadout();
}

// sampler に渡すのはテクスチャではなくユニット番号。int なので uniform1i(第4章)。
// 番号は描画中に変えないので、ここで 1 回入れれば済む
gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0);
gl.uniform1i(gl.getUniformLocation(program, 'u_accentTexture'), 1);

// テクスチャユニットの三点セット。ユニットを選び、そこにテクスチャをバインドし、
// sampler にはユニット番号を入れる(番号は初期化時に入れ済み)
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, accentTexture);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, gridTexture);

/**
 * 設定のためにテクスチャをバインドする。bindTexture が効くのは
 * 「いま選ばれているテクスチャユニット」なので、作業台をユニット 0 に固定しておく。
 * これを省くと、描画ループが最後に選んだユニットの中身を書き換えてしまう
 */
function bindForEdit(texture: WebGLTexture): void {
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
}

// sampler2D は「テクスチャそのもの」ではなく「テクスチャユニットへの参照」。
// CPU 側は uniform1i(loc, i) でユニット番号 i を入れる(第4章の uniform 表の回収)
uniform sampler2D u_texture;
uniform sampler2D u_accentTexture;

// 頂点から来た UV は加工してよい。ここでは倍率をかけて 0〜1 の外へはみ出させる
vec2 uv = v_uv * u_uvScale;

// texture() は UV(0〜1 の実数)で読む。フィルタもラップもこの 1 行の内側で効く
vec4 base = texture(u_texture, uv);

// texelFetch を試すときは上の base の行をこれに差し替える(本文 7 節)。
// 整数のテクセル座標で 1 テクセルだけ読むので、フィルタもラップも通らない。
// 範囲外は結果が未定義なので、REPEAT 相当の折り返しは自分で % を取って作る:
// ivec2 size = textureSize(u_texture, 0);
// vec4 base = texelFetch(u_texture, ivec2(uv * vec2(size)) % size, 0);

/** accent 側は WebGL2 で追加された不変ストレージで作る(サイズが分かってから 1 回だけ) */
function createImmutableTexture(image: HTMLImageElement): WebGLTexture {
  const texture = gl.createTexture();
  bindForEdit(texture);
  // 全ミップレベルのサイズと形式をここで確定させる。段数 = floor(log2(長辺)) + 1
  const levels = Math.floor(Math.log2(Math.max(image.width, image.height))) + 1;
  gl.texStorage2D(gl.TEXTURE_2D, levels, gl.RGBA8, image.width, image.height);
  // 以降、中身の書き込みは texSubImage2D だけ(texImage2D は INVALID_OPERATION)
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
  gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  return texture;
}

// 第16章: テクスチャ — フィルタ・ラップ・ミップマップ・複数ユニット
// 第14章で生成した UV に、いよいよ画像を貼る。
//
// 見どころ:
// - 画像の読み込みは非同期。届くまでは 1×1 のテクスチャでしのぐ(three.js も同じ)
// - UNPACK_FLIP_Y_WEBGL は「テクスチャの設定」ではなく「転送の設定」で、
//   コンテキスト全体の状態。アップロードのたびに明示する
// - フィルタ・ラップは texParameteri でテクスチャオブジェクトに書き込む
// - 2 枚目は別のテクスチャユニットへ。sampler に渡すのはユニット番号(uniform1i)
// - 主テクスチャは texImage2D(可変)、accent は texStorage2D(不変ストレージ)で作り、
//   WebGL2 の 2 つの流儀を 1 つのデモに同居させている

import { mat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import {
  createPlane,
  createSphere,
  createTorus,
  type Geometry,
  interleave,
} from '../../lib/geometry';
import { compileShader, linkProgram } from '../../lib/shader';
import fragmentSource from './textures.frag?raw';
import vertexSource from './textures.vert?raw';

// ---------------------------------------------------------------------------
// 画像とメッシュ
// ---------------------------------------------------------------------------

const GRID_URL = '/textures/uv-grid.png'; // 256×256。上端が赤帯・下端が青帯・左端が白帯
const ACCENT_URL = '/textures/accent.png'; // 128×128。中央が明るい同心円

/**
 * 画像を読み込む。decode() は「デコードが終わるまで待つ」Promise を返すので、
 * これが解決した時点で texImage2D にそのまま渡せる(失敗時は EncodingError で reject)
 */
async function loadImage(url: string): Promise<HTMLImageElement> {
  const image = new Image();
  image.src = url;
  await image.decode();
  return image;
}

interface Mesh {
  vao: WebGLVertexArrayObject;
  indexCount: number;
}

function createMesh(gl: WebGL2RenderingContext, geometry: Geometry): Mesh {
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  // 1 頂点 = 位置 3 + 法線 3 + UV 2 の 8 float(第14章の interleave)。
  // stride / offset はバイト単位で、数値を直書きせず BYTES_PER_ELEMENT から組み立てる(第13章)
  const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
  const stride = 8 * FLOAT_BYTES;
  const vbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, interleave(geometry), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0); // a_position
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
  // 法線(3 float 目から)はこの章のシェーダーが使わないので配線しない。第17章から使う
  gl.enableVertexAttribArray(2); // a_uv: 位置 + 法線 6 つ分(24 バイト)の後ろ
  gl.vertexAttribPointer(2, 2, gl.FLOAT, false, stride, 6 * FLOAT_BYTES);

  const ibo = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geometry.indices, gl.STATIC_DRAW);

  gl.bindVertexArray(null);
  return { vao, indexCount: geometry.indices.length };
}

// ---------------------------------------------------------------------------
// カメラ定数(第3部の標準)
// ---------------------------------------------------------------------------

const FOVY = (45 * Math.PI) / 180;
const NEAR = 0.1;
const FAR = 100;
const UP: ReadonlyVec3 = vec3.fromValues(0, 1, 0);
const TARGET: ReadonlyVec3 = vec3.fromValues(0, 0, 0);

// ---------------------------------------------------------------------------
// デモ本体
// ---------------------------------------------------------------------------

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  sceneControls: HTMLParagraphElement,
  filterControls: HTMLParagraphElement,
  wrapControls: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  const program = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource),
  );

  // --- テクスチャの生成 -----------------------------------------------------

  /**
   * 1×1 の単色テクスチャ。画像が届くまでの間に合わせに使う。
   * 1×1 はミップレベルが level 0 の 1 段しかないので、この時点で「ミップマップ完備」。
   * MIN_FILTER をミップ系にしても不完全なテクスチャにならない
   */
  function createPlaceholderTexture(rgba: readonly [number, number, number, number]): WebGLTexture {
    const texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    // 幅・高さ・border を数値で渡す 9 引数版。中身は ArrayBufferView(ここでは 4 バイト)
    const pixel = new Uint8Array(rgba);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
    return texture;
  }

  const gridTexture = createPlaceholderTexture([48, 52, 60, 255]);
  let accentTexture = createPlaceholderTexture([0, 0, 0, 255]);
  let gridImage: HTMLImageElement | null = null;

  /**
   * 設定のためにテクスチャをバインドする。bindTexture が効くのは
   * 「いま選ばれているテクスチャユニット」なので、作業台をユニット 0 に固定しておく。
   * これを省くと、描画ループが最後に選んだユニットの中身を書き換えてしまう
   */
  function bindForEdit(texture: WebGLTexture): void {
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
  }

  // --- 切替の状態 -----------------------------------------------------------

  // 拡大と縮小で使われる関数は別物なので、MAG と MIN を 1 組にして持つ
  const FILTER_MODES = [
    {
      label: 'NEAREST',
      mag: gl.NEAREST,
      magLabel: 'NEAREST',
      min: gl.NEAREST,
      minLabel: 'NEAREST',
    },
    { label: 'LINEAR', mag: gl.LINEAR, magLabel: 'LINEAR', min: gl.LINEAR, minLabel: 'LINEAR' },
    {
      label: 'ミップマップ',
      mag: gl.LINEAR,
      magLabel: 'LINEAR',
      min: gl.LINEAR_MIPMAP_LINEAR,
      minLabel: 'LINEAR_MIPMAP_LINEAR',
    },
  ] as const;

  const WRAP_MODES = [
    { label: 'CLAMP ×1', wrap: gl.CLAMP_TO_EDGE, wrapLabel: 'CLAMP_TO_EDGE', uvScale: 1 },
    { label: 'CLAMP ×2.5', wrap: gl.CLAMP_TO_EDGE, wrapLabel: 'CLAMP_TO_EDGE', uvScale: 2.5 },
    { label: 'REPEAT ×2.5', wrap: gl.REPEAT, wrapLabel: 'REPEAT', uvScale: 2.5 },
    {
      label: 'MIRRORED ×2.5',
      wrap: gl.MIRRORED_REPEAT,
      wrapLabel: 'MIRRORED_REPEAT',
      uvScale: 2.5,
    },
  ] as const;

  const shapes = [
    { label: '平面', mesh: createMesh(gl, createPlane(2.4, 2.4)) },
    { label: '球', mesh: createMesh(gl, createSphere(1.1, 48, 24)) },
    { label: 'トーラス', mesh: createMesh(gl, createTorus(0.85, 0.34, 64, 32)) },
  ] as const;

  let shapeIndex = 0;
  let filterIndex = 1; // 既定は LINEAR
  let wrapIndex = 0; // 既定は CLAMP_TO_EDGE・UV 等倍
  let flipY = true;
  let useAccent = false;
  // 「最後に画像を転送したときの UNPACK_FLIP_Y_WEBGL」。GL の現在値ではない
  // (転送のたびに 0 へ戻しているので、GL 側の現在値は常に 0)
  let uploadedFlipY = 0;

  function updateReadout(): void {
    const filter = FILTER_MODES[filterIndex];
    const wrap = WRAP_MODES[wrapIndex];
    const size = gridImage ? `${gridImage.width}×${gridImage.height}` : '読み込み中';
    const levels = gridImage
      ? Math.floor(Math.log2(Math.max(gridImage.width, gridImage.height))) + 1
      : 1;
    readout.textContent =
      `MAG_FILTER=${filter.magLabel} ` +
      `MIN_FILTER=${filter.minLabel} / WRAP_S=WRAP_T=${wrap.wrapLabel} UV×${wrap.uvScale} / ` +
      `最後の転送時 UNPACK_FLIP_Y_WEBGL=${uploadedFlipY}(現在の GL 状態は常に 0) / ` +
      `ユニット0=uv-grid ${size}(ミップ ${levels} 段)・` +
      `ユニット1=accent(${useAccent ? '合成 ON' : '合成 OFF'})`;
  }

  /** フィルタとラップはテクスチャオブジェクトの状態。切り替えるたびに書き込み直す */
  function applySampling(): void {
    const filter = FILTER_MODES[filterIndex];
    const wrap = WRAP_MODES[wrapIndex];
    bindForEdit(gridTexture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter.mag);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter.min);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap.wrap);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap.wrap);
    updateReadout();
  }

  /** 画像を level 0 に転送し、縮小用の段を作らせる。y 反転を切り替えるたびに呼び直す */
  function uploadGridImage(): void {
    if (!gridImage) return;
    bindForEdit(gridTexture);
    // 転送の設定であってテクスチャの設定ではない。しかもコンテキスト全体の状態なので、
    // 「いつ誰が false に戻したか」に依存しないよう、転送の直前に必ず指定する
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY ? 1 : 0);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, gridImage);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
    uploadedFlipY = flipY ? 1 : 0; // 読み出し行に出すのは、この転送に効いた値
    // 1/2, 1/4, ... の段を GPU に作らせる。これを忘れて MIN_FILTER をミップ系にすると
    // 「不完全なテクスチャ」になり、texture() は (0, 0, 0, 1) = 不透明な黒を返す
    gl.generateMipmap(gl.TEXTURE_2D);
  }

  /** accent 側は WebGL2 で追加された不変ストレージで作る(サイズが分かってから 1 回だけ) */
  function createImmutableTexture(image: HTMLImageElement): WebGLTexture {
    const texture = gl.createTexture();
    bindForEdit(texture);
    // 全ミップレベルのサイズと形式をここで確定させる。段数 = floor(log2(長辺)) + 1
    const levels = Math.floor(Math.log2(Math.max(image.width, image.height))) + 1;
    gl.texStorage2D(gl.TEXTURE_2D, levels, gl.RGBA8, image.width, image.height);
    // 以降、中身の書き込みは texSubImage2D だけ(texImage2D は INVALID_OPERATION)
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
    gl.generateMipmap(gl.TEXTURE_2D);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    return texture;
  }

  // --- 切替ボタン -----------------------------------------------------------

  function addRadioButtons(
    container: HTMLParagraphElement,
    labels: readonly string[],
    initialIndex: number,
    onSelect: (index: number) => void,
  ): void {
    // 同じ列の中だけを見る。1 つの列に排他ボタンとトグルが混在してもよいように、
    // container.querySelectorAll ではなく自分で作ったボタンだけを覚えておく
    const buttons: HTMLButtonElement[] = [];
    for (const [index, label] of labels.entries()) {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = label;
      button.setAttribute('aria-pressed', index === initialIndex ? 'true' : 'false');
      button.addEventListener('click', () => {
        for (const other of buttons) other.setAttribute('aria-pressed', 'false');
        button.setAttribute('aria-pressed', 'true');
        onSelect(index);
      });
      buttons.push(button);
      container.append(button);
    }
  }

  function addToggleButton(
    container: HTMLParagraphElement,
    label: (on: boolean) => string,
    initial: boolean,
    onChange: (on: boolean) => void,
  ): void {
    let on = initial;
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = label(on);
    button.setAttribute('aria-pressed', String(on));
    button.addEventListener('click', () => {
      on = !on;
      button.textContent = label(on);
      button.setAttribute('aria-pressed', String(on));
      onChange(on);
    });
    container.append(button);
  }

  addRadioButtons(
    sceneControls,
    shapes.map((shape) => shape.label),
    shapeIndex,
    (index) => {
      shapeIndex = index;
    },
  );
  addToggleButton(
    sceneControls,
    (on) => `y 反転: ${on ? 'ON' : 'OFF'}`,
    flipY,
    (on) => {
      flipY = on;
      uploadGridImage(); // 反転は転送時にしか効かないので、画像を送り直す
      updateReadout();
    },
  );
  addToggleButton(
    sceneControls,
    (on) => `2 枚目: ${on ? 'ON' : 'OFF'}`,
    useAccent,
    (on) => {
      useAccent = on;
      updateReadout();
    },
  );

  addRadioButtons(
    filterControls,
    FILTER_MODES.map((mode) => mode.label),
    filterIndex,
    (index) => {
      filterIndex = index;
      applySampling();
    },
  );

  addRadioButtons(
    wrapControls,
    WRAP_MODES.map((mode) => mode.label),
    wrapIndex,
    (index) => {
      wrapIndex = index;
      applySampling();
    },
  );

  // --- 画像の読み込み(ここまでの準備はすべて画像なしで完了している) ---------

  loadImage(GRID_URL)
    .then((image) => {
      gridImage = image;
      uploadGridImage();
      applySampling(); // 1×1 のときに入れた設定を、本物のサイズで入れ直す
    })
    .catch((error: unknown) => {
      readout.textContent = `${GRID_URL} を読み込めませんでした: ${String(error)}`;
    });

  loadImage(ACCENT_URL)
    .then((image) => {
      // 1×1 のプレースホルダはもう使わない。作り直したら古いものを消す、が後始末の最小形
      gl.deleteTexture(accentTexture);
      accentTexture = createImmutableTexture(image);
    })
    .catch(() => {
      // 2 枚目は無くても主役は描けるので、1×1 の黒のままにしておく
    });

  // --- 描画の準備 -----------------------------------------------------------

  gl.useProgram(program);
  const modelLocation = gl.getUniformLocation(program, 'u_model');
  const viewLocation = gl.getUniformLocation(program, 'u_view');
  const projectionLocation = gl.getUniformLocation(program, 'u_projection');
  const uvScaleLocation = gl.getUniformLocation(program, 'u_uvScale');
  const useAccentLocation = gl.getUniformLocation(program, 'u_useAccent');

  // sampler に渡すのはテクスチャではなくユニット番号。int なので uniform1i(第4章)。
  // 番号は描画中に変えないので、ここで 1 回入れれば済む
  gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0);
  gl.uniform1i(gl.getUniformLocation(program, 'u_accentTexture'), 1);

  gl.enable(gl.DEPTH_TEST);
  // この章はカリングを切っている。板を裏側から眺めても消えないほうが、
  // フィルタやラップの効き方を確かめやすいため(第13章の CULL_FACE は有効のままでもよい)
  gl.disable(gl.CULL_FACE);
  gl.clearColor(0.06, 0.07, 0.09, 1.0);

  applySampling();

  // --- 軌道カメラ(第15章の簡略版。減衰なし・注視点は原点固定) --------------

  const orbit = { theta: 0.0, phi: 0.18, radius: 3.4 };
  const PHI_LIMIT = Math.PI / 2 - 0.05;
  const MIN_RADIUS = 1.2;
  const MAX_RADIUS = 24;

  let dragging = false;
  let activePointerId: number | null = null;
  let lastX = 0;
  let lastY = 0;

  canvas.addEventListener('pointerdown', (event) => {
    if (event.button !== 0) return;
    dragging = true;
    activePointerId = event.pointerId;
    lastX = event.clientX;
    lastY = event.clientY;
    canvas.setPointerCapture(event.pointerId);
  });

  canvas.addEventListener('pointermove', (event) => {
    if (!dragging || event.pointerId !== activePointerId) return;
    const speed = (2 * Math.PI) / canvas.clientHeight;
    orbit.theta -= (event.clientX - lastX) * speed;
    orbit.phi += (event.clientY - lastY) * speed;
    orbit.phi = Math.min(PHI_LIMIT, Math.max(-PHI_LIMIT, orbit.phi));
    lastX = event.clientX;
    lastY = event.clientY;
  });

  function endDrag(event: PointerEvent): void {
    if (event.pointerId !== activePointerId) return;
    dragging = false;
    activePointerId = null;
    if (canvas.hasPointerCapture(event.pointerId)) {
      canvas.releasePointerCapture(event.pointerId);
    }
  }
  canvas.addEventListener('pointerup', endDrag);
  canvas.addEventListener('pointercancel', endDrag);

  canvas.addEventListener(
    'wheel',
    (event) => {
      event.preventDefault();
      // 単位を px 相当に揃える(第15章)。ズームアウトすると縮小フィルタの差が出る
      const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 100 : 1;
      orbit.radius *= Math.exp(event.deltaY * scale * 0.001);
      orbit.radius = Math.min(MAX_RADIUS, Math.max(MIN_RADIUS, orbit.radius));
    },
    { passive: false },
  );

  // --- リサイズ -------------------------------------------------------------

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    const width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
    const height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

  // --- 描画ループ -----------------------------------------------------------

  const eye = vec3.create();
  const model = mat4.create();
  const view = mat4.create();
  const projection = mat4.create();

  function frame(): void {
    resizeIfNeeded();

    eye[0] = orbit.radius * Math.cos(orbit.phi) * Math.sin(orbit.theta);
    eye[1] = orbit.radius * Math.sin(orbit.phi);
    eye[2] = orbit.radius * Math.cos(orbit.phi) * Math.cos(orbit.theta);
    mat4.lookAt(view, eye, TARGET, UP);
    const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
    mat4.perspective(projection, FOVY, aspect, NEAR, FAR);
    mat4.identity(model);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.uniformMatrix4fv(modelLocation, false, model); // transpose は常に false
    gl.uniformMatrix4fv(viewLocation, false, view);
    gl.uniformMatrix4fv(projectionLocation, false, projection);
    gl.uniform1f(uvScaleLocation, WRAP_MODES[wrapIndex].uvScale);
    gl.uniform1f(useAccentLocation, useAccent ? 1.0 : 0.0);

    // テクスチャユニットの三点セット。ユニットを選び、そこにテクスチャをバインドし、
    // sampler にはユニット番号を入れる(番号は初期化時に入れ済み)
    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_2D, accentTexture);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, gridTexture);

    const mesh = shapes[shapeIndex].mesh;
    gl.bindVertexArray(mesh.vao);
    gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0);

    requestAnimationFrame(frame);
  }

  // このページのデモはページと寿命を共にするので、rAF ループの停止も canvas に付けた
  // 5 つのリスナーの解除もしていない。リソース解放の一般論は第35章
  requestAnimationFrame(frame);
}

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

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

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

setup(gl, canvas, sceneControls, filterControls, wrapControls, readout);

#version 300 es

// 第3部の共通の属性配置(第14章と同じ): 0 = 位置, 1 = 法線, 2 = UV。
// この章のシェーダーは法線を使わないので location = 1 は宣言しない
// (CPU 側もその配線を有効にしていない。法線が主役になるのは第17章)
layout(location = 0) in vec3 a_position;
layout(location = 2) in vec2 a_uv;

uniform mat4 u_model;
uniform mat4 u_view;
uniform mat4 u_projection;

out vec2 v_uv;

void main() {
  // 頂点が持つ UV をそのままフラグメントへ渡す。三角形の内側では
  // 3 頂点の UV が補間され、ピクセルごとに違う (u, v) が届く(第3章の色の補間と同じ仕組み)
  v_uv = a_uv;

  gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);
}

#version 300 es
precision highp float;

in vec2 v_uv;

// sampler2D は「テクスチャそのもの」ではなく「テクスチャユニットへの参照」。
// CPU 側は uniform1i(loc, i) でユニット番号 i を入れる(第4章の uniform 表の回収)
uniform sampler2D u_texture;
uniform sampler2D u_accentTexture;

// UV を何倍に引き伸ばすか。1.0 を超えるとラップモードの出番になる
uniform float u_uvScale;
// 0.0 = 1 枚だけ / 1.0 = 2 枚目(accent)を加算合成
uniform float u_useAccent;

out vec4 fragColor;

void main() {
  // 頂点から来た UV は加工してよい。ここでは倍率をかけて 0〜1 の外へはみ出させる
  vec2 uv = v_uv * u_uvScale;

  // texture() は UV(0〜1 の実数)で読む。フィルタもラップもこの 1 行の内側で効く
  vec4 base = texture(u_texture, uv);

  // 2 枚目は別のユニットにバインドされた別のテクスチャ。
  // タイリングさせたくないので、こちらは倍率をかけない生の v_uv で読む
  vec4 accent = texture(u_accentTexture, v_uv);

  // texelFetch を試すときは上の base の行をこれに差し替える(本文 7 節)。
  // 整数のテクセル座標で 1 テクセルだけ読むので、フィルタもラップも通らない。
  // 範囲外は結果が未定義なので、REPEAT 相当の折り返しは自分で % を取って作る:
  // ivec2 size = textureSize(u_texture, 0);
  // vec4 base = texelFetch(u_texture, ivec2(uv * vec2(size)) % size, 0);

  fragColor = vec4(base.rgb + accent.rgb * u_useAccent, 1.0);
}