インタラクションと出力 — ポインタ・オーディオ反応・書き出し

canvas.addEventListener('pointerdown', (event) => {
  // マウスの右クリック・中クリックは無視する。touch / pen は button = 0
  if (event.pointerType === 'mouse' && event.button !== 0) return;
  pointers.set(event.pointerId, {
    type: event.pointerType,
    downClientX: event.clientX,
    downClientY: event.clientY,
    clientX: event.clientX,
    clientY: event.clientY,
    x: 0,
    y: 0,
    downX: 0,
    downY: 0,
  });
  // 捕獲しておくと、canvas の外へ出ても pointermove / pointerup が届く(第15章 3 節)
  canvas.setPointerCapture(event.pointerId);
  resetGesture();
});

function markRectDirty(): void {
  rectDirty = true;
}

function refreshRect(): void {
  if (!rectDirty) return;
  const box = canvas.getBoundingClientRect();
  rectReads++;
  rectLeft = box.left;
  rectTop = box.top;
  rectWidth = Math.max(1, box.width);
  rectHeight = Math.max(1, box.height);
  rectDirty = false;
}

const resizeObserver = new ResizeObserver(markRectDirty);
resizeObserver.observe(canvas);
// capture: true で、内側のスクロールコンテナが動いたときも拾う
window.addEventListener('scroll', markRectDirty, { capture: true, passive: true });
window.addEventListener('resize', markRectDirty);

beginFrame() {
  refreshRect();
  for (const state of pointers.values()) {
    state.x = toBufferX(state.clientX);
    state.y = toBufferY(state.clientY);
    state.downX = toBufferX(state.downClientX);
    state.downY = toBufferY(state.downClientY);
  }
},

function endPointer(event: PointerEvent): void {
  if (!pointers.delete(event.pointerId)) return;
  if (canvas.hasPointerCapture(event.pointerId)) {
    canvas.releasePointerCapture(event.pointerId);
  }
  // 1 本抜けたら基準を取り直す。取り直さないと、残った指の距離が
  // いきなり別の意味になって絵が飛ぶ(2 節)
  resetGesture();
}

const pair = twoPointers();
if (!gesture || !pair) return;
const dx = pair[1].clientX - pair[0].clientX;
const dy = pair[1].clientY - pair[0].clientY;
const distance = Math.max(1, Math.hypot(dx, dy));
const midX = (pair[0].clientX + pair[1].clientX) / 2;
const midY = (pair[0].clientY + pair[1].clientY) / 2;

// 倍率は**開始時の距離との比**。基準が 1 つなので指の本数が変わっても置き直すだけで済む(2 節)
const scale = distance / gesture.distance;
// 前回の倍率との差だけをズーム量へ渡す。log の差なので加算でよい
zoomLog -= Math.log(scale) - Math.log(pinchScale);
pinchScale = scale;

panX += midX - gesture.midX;
panY += midY - gesture.midY;
gesture.midX = midX;
gesture.midY = midY;

canvas.addEventListener(
  'wheel',
  (event) => {
    // ページのスクロールに取られないようにする。passive: false が要る
    event.preventDefault();
    const scale =
      event.deltaMode === WheelEvent.DOM_DELTA_LINE
        ? LINE_HEIGHT_PX
        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
          ? PAGE_HEIGHT_PX
          : 1;
    zoomLog += event.deltaY * scale * WHEEL_ZOOM_PER_PIXEL;
  },
  { passive: false },
);

window.addEventListener('keydown', (event) => {
  if (isTextEntry(event.target)) return;
  readModifiers(event);
  // event.repeat が true のイベントは無視する。集合はもう入っているし、
  // リピートの間隔は OS の設定で決まるので、絵の速さをそこに預けたくない(3 節)
  if (event.repeat) return;
  keys.add(event.code);
});

window.addEventListener('keyup', (event) => {
  readModifiers(event);
  keys.delete(event.code);
});

// キーはフレームで集合を読む。押されている間ずっと効く(3 節)
const boost = input.modifiers.shift ? 3 : 1;
const move = KEY_MOVE_SPEED * dt * boost;
let forward = 0;
let strafe = 0;
if (input.keys.has('KeyW')) forward += 1;
if (input.keys.has('KeyS')) forward -= 1;
if (input.keys.has('KeyD')) strafe += 1;
if (input.keys.has('KeyA')) strafe -= 1;

// タブを離れると keyup が来ないまま押しっぱなしの状態が残る。
// フォーカスを失ったら集合を空にする(3 節)
function clearKeys(): void {
  keys.clear();
  modifiers.shift = false;
  modifiers.ctrl = false;
  modifiers.alt = false;
  modifiers.meta = false;
}
window.addEventListener('blur', clearKeys);
document.addEventListener('visibilitychange', () => {
  if (document.hidden) clearKeys();
});

start() {
  const { context: ctx } = ensureContext();
  // ユーザー操作の中から呼ぶ。ここが autoplay policy の入口(4 節)
  void ctx.resume();
  if (!playing) {
    nextStepAt = ctx.currentTime + 0.05;
    playing = true;
  }
},

const created = new AudioContext();
const gain = created.createGain();
gain.gain.value = MASTER_GAIN;
const node = created.createAnalyser();
node.fftSize = FFT_SIZE;
// 既定のまま(minDecibels -100 / maxDecibels -30 / smoothingTimeConstant 0.8)。
// 既定値は仕様が決めている(§1.8.2)ので、ここで書き換える理由が無い
gain.connect(node);
node.connect(created.destination);

gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R8, BIN_COUNT, 2);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.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);
// 1 行が 1 バイト × 幅。既定の 4 だと、幅が 4 の倍数でないとき行の末尾に
// 詰め物が入る前提で読まれる(ES 3.0.6 §3.7.2.1 式 3.13)。
// ここは幅 1024 なのでたまたま 4 の倍数だが、幅を変えた瞬間に壊れるので 1 にしておく
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

gl.texSubImage2D(
  gl.TEXTURE_2D,
  0,
  0,
  0,
  BIN_COUNT,
  1,
  gl.RED,
  gl.UNSIGNED_BYTE,
  frequencyData,
);
// 波形は fftSize 個あるので、テクスチャの幅に合わせて**新しいほうから**ビン数ぶん使う
gl.texSubImage2D(
  gl.TEXTURE_2D,
  0,
  0,
  1,
  BIN_COUNT,
  1,
  gl.RED,
  gl.UNSIGNED_BYTE,
  waveformData.subarray(audio.fftSize - BIN_COUNT),
);

float sampled = texture(u_audio, vec2(a_uv.x, u_audioRow)).r - u_audioBias;
  v_audio = sampled;

  // 法線方向へ押し出すだけで、法線そのものは計算し直していない。
  // 陰影が変位に追従しないぶん形は素直に読めるので、この章ではこれで足りる
  vec3 displaced = a_position + a_normal * (u_audioAmount * sampled);

export function addSlider(parent: HTMLElement, options: SliderOptions): void {
  const { row, id } = createRow(parent, options.label);
  const input = document.createElement('input');
  input.type = 'range';
  input.id = id;
  input.min = String(options.min);
  input.max = String(options.max);
  input.step = String(options.step);
  input.value = String(options.value);

input.addEventListener('input', () => {
    const value = Number(input.value);
    output.textContent = value.toFixed(digits);
    options.onInput(value);
  });

addColorPicker(guiPanel, {
  label: '基本色',
  value: params.colorHex,
  onInput: (hex) => {
    params.colorHex = hex;
    hexToLinear(hex, params.baseColor);
  },
});

function srgbToLinear(c: number): number {
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}

function hexToLinear(hex: string, out: vec3): vec3 {
  const value = Number.parseInt(hex.slice(1), 16);
  out[0] = srgbToLinear(((value >> 16) & 255) / 255);
  out[1] = srgbToLinear(((value >> 8) & 255) / 255);
  out[2] = srgbToLinear((value & 255) / 255);
  return out;
}

export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob | null> {
  return new Promise((resolve) => {
    // toBlob は非同期だが、**ビットマップの複製は呼んだ時点で作られる**
    // (HTML 仕様 §4.12.5: "set result to a copy of this canvas element's bitmap" までは
    //  同期で、PNG への直列化だけが in parallel)。だから rAF の中で描いた直後に
    // 呼べば、あとで PNG になるのは「そのときの絵」で正しい
    canvas.toBlob((blob) => resolve(blob), 'image/png');
  });
}

// --- 書き出し(6〜7 節) ------------------------------------------------------------
    // **描いた直後・同じタスクの中**でしか canvas.toBlob は正しい絵を返さない。
    // だから書き出しの処理はここ、rAF コールバックの末尾に置いてある
    if (captureRequested && captureScale === 1) {
      captureRequested = false;
      const width = gl.drawingBufferWidth;
      const height = gl.drawingBufferHeight;
      void canvasToBlob(canvas).then((blob) => {
        publish(blob, width, height, 1, 'canvas.toBlob(6 節)');
      });
    } else if (captureRequested) {

releaseSaveUrl();
    const url = URL.createObjectURL(blob);
    saveUrl = url;
    if (saveLink) {
      saveLink.href = url;
      saveLink.download = `webgl2-36-${width}x${height}.png`;
      saveLink.textContent = `保存 (${width}×${height} PNG)`;
      saveLink.hidden = false;
    }

function releaseSaveUrl(): void {
    if (saveUrl !== null) {
      // createObjectURL で作った URL は、明示的に解放しないとドキュメントが
      // 生きているあいだ Blob を掴んだままになる(6 節)
      URL.revokeObjectURL(saveUrl);
      saveUrl = null;
    }
    if (saveLink) saveLink.hidden = true;
  }

export function tileProjection(
  out: mat4,
  fovy: number,
  aspect: number,
  near: number,
  far: number,
  tilesX: number,
  tilesY: number,
  col: number,
  row: number,
): mat4 {
  const top = near * Math.tan(fovy / 2);
  const right = top * aspect;
  return mat4.frustum(
    out,
    -right + ((2 * right) / tilesX) * col,
    -right + ((2 * right) / tilesX) * (col + 1),
    -top + ((2 * top) / tilesY) * row,
    -top + ((2 * top) / tilesY) * (row + 1),
    near,
    far,
  );
}

// PACK_ALIGNMENT の既定は 4(ES 3.0.6 Table 4.4)。RGBA / UNSIGNED_BYTE は
  // 1 画素 4 バイトなので、幅が何であっても行の先頭は 4 の倍数に乗る = 詰め物は入らない
  gl.readPixels(0, 0, job.tileWidth, job.tileHeight, gl.RGBA, gl.UNSIGNED_BYTE, job.scratch);
  bindRenderTarget(gl, null);

  // readPixels は**左下原点**、ImageData は上が先。ここで行の並びを逆にしておけば、
  // あとでもう一度全面をひっくり返す必要がない(7 節)
  const rowBytes = job.tileWidth * 4;
  const destRowBytes = job.width * 4;
  for (let y = 0; y < job.tileHeight; y++) {
    const destY = job.height - (row * job.tileHeight + y) - 1;
    const destAt = destY * destRowBytes + col * rowBytes;
    job.pixels.set(job.scratch.subarray(y * rowBytes, (y + 1) * rowBytes), destAt);
  }

if (job) {
      const current = job;
      const done = captureNextTile(gl, current, FOVY, NEAR, FAR, (tileProjectionMatrix) => {
        drawScene(tileProjectionMatrix, time);
      });
      captureNote = `書き出し中… タイル ${current.rendered} / ${current.total}`;

// 第36章: インタラクションと出力 — ポインタ・オーディオ反応・書き出し
//
// この章は WebGL の外側の道具を 4 つ足す。シーンは 4 本のデモで共通で、
// 変わるのは「何がそのシーンを動かすか」だけ:
//   1 入力   input.ts   ポインタ・ピンチ・キーを 1 本にまとめてカメラへ(1〜3 節)
//   2 音     audio.ts   自前の音源の FFT を R8 テクスチャで GPU へ(4 節)
//   3 つまみ gui.ts     自作の GUI からシーンのパラメータへ(5 節)
//   4 書き出し capture.ts toBlob と、FBO タイル分割(6〜7 節)
//
// 4 つに共通する設計がひとつある ―― **イベントは状態を更新するだけで、
// 絵は 1 フレームに 1 回、その状態を読んで描く**。入力も GUI も同じ形をしている。
//
// 第34章のミニエンジンは使っていない。この章のコードは
// src/lib/shader.ts / geometry.ts / framebuffer.ts と、この章のファイルだけで閉じている。

import { mat3, mat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import { createSphere, createTorus, type Geometry, interleave } from '../../lib/geometry';
import { compileShader, linkProgram } from '../../lib/shader';
import { createAudio } from './audio';
import {
  beginTileCapture,
  canvasToBlob,
  captureNextTile,
  deleteTileCapture,
  finishTileCapture,
  type TileCapture,
} from './capture';
import colorChunkSource from './color.glsl?raw';
import { addColorPicker, addSlider, addToggle, clearGui } from './gui';
import { createInput } from './input';
import overlayFragmentTemplate from './overlay.frag?raw';
import overlayVertexSource from './overlay.vert?raw';
import sceneFragmentTemplate from './scene.frag?raw';
import sceneVertexSource from './scene.vert?raw';

// #include の解決は第23章からの文字列置換。置換文字列を関数で渡しているのは、
// String.replace が `$&` などを特別扱いするため
function resolveIncludes(source: string): string {
  return source.replace('#include "color.glsl"', () => colorChunkSource.trim());
}

// ---------------------------------------------------------------------------
// 定数
// ---------------------------------------------------------------------------

// カメラ定数(第3部の標準): fovy 45°・near 0.1・far 100
const FOVY = (45 * Math.PI) / 180;
const NEAR = 0.1;
const FAR = 100;

const UP: ReadonlyVec3 = vec3.fromValues(0, 1, 0);
// canvas の CSS 背景色と同じ
const BACKGROUND_COLOR: ReadonlyVec3 = vec3.fromValues(0.06, 0.07, 0.09);

const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;

// 描画バッファの上限を dpr 1.5 に抑える。理由は 7 節のタイル書き出しで、
// 仕上がりが描画バッファの 4 倍(面積で 16 倍)まで伸びるため。
// dpr 2 のままだと 4 倍書き出しの中間バッファだけで 80 MB を超える。
// 解像度スケールの一般論は第35章 5 節
const MAX_DPR = 1.5;

// 面から光源へ向かう単位ベクトル(第17章の約束)
const LIGHT_DIRECTION: ReadonlyVec3 = vec3.normalize(
  vec3.create(),
  vec3.fromValues(0.4, 0.8, 0.45),
);
const LIGHT_COLOR: ReadonlyVec3 = vec3.fromValues(1.0, 0.96, 0.9);

const PHI_LIMIT = Math.PI / 2 - 0.05;
const MIN_RADIUS = 2.0;
const MAX_RADIUS = 14;

/** キー操作でターゲットが動く速さ(ワールド単位/秒) */
const KEY_MOVE_SPEED = 1.6;
/** キー操作で半径が変わる速さ(1 秒あたりの対数) */
const KEY_ZOOM_SPEED = 1.2;

/** 波形の「無音の位置」。b[k] = floor(128 (1 + x[k])) なので x = 0 で 128(4 節) */
const WAVEFORM_CENTER = 128 / 255;

/** 音でトーラスを押し出す量(ワールド単位)。0〜1 の値に掛かる */
const AUDIO_DISPLACEMENT = 0.45;

const DEMO_IDS = ['input', 'audio', 'gui', 'capture'] as const;
type DemoId = (typeof DEMO_IDS)[number];

const DEMO_LABELS: Record<DemoId, string> = {
  input: '入力',
  audio: '音に反応',
  gui: 'つまみ',
  capture: '書き出す',
};

// ---------------------------------------------------------------------------
// 色: sRGB エンコード値 → リニア値(第27章 2 節)
// ---------------------------------------------------------------------------

// color.glsl の srgbToLinear と同じ式(ES 3.0.6 §3.8.16 式 3.26)を CPU に書き写したもの。
// <input type="color"> が返す "#rrggbb" は sRGB エンコード値なので、
// リニア空間で計算するシーンへ渡す前にここを通す(5 節)
function srgbToLinear(c: number): number {
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}

function hexToLinear(hex: string, out: vec3): vec3 {
  const value = Number.parseInt(hex.slice(1), 16);
  out[0] = srgbToLinear(((value >> 16) & 255) / 255);
  out[1] = srgbToLinear(((value >> 8) & 255) / 255);
  out[2] = srgbToLinear((value & 255) / 255);
  return out;
}

// ---------------------------------------------------------------------------
// メッシュ
// ---------------------------------------------------------------------------

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

/** interleave() の [pos3, normal3, uv2] をそのまま VAO に配線する(第14章) */
function createMesh(gl: WebGL2RenderingContext, geometry: Geometry): Mesh {
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  const vbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, interleave(geometry), gl.STATIC_DRAW);

  const stride = 8 * FLOAT_BYTES;
  gl.enableVertexAttribArray(0); // a_position
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
  gl.enableVertexAttribArray(1); // a_normal
  gl.vertexAttribPointer(1, 3, gl.FLOAT, false, stride, 3 * FLOAT_BYTES);
  gl.enableVertexAttribArray(2); // a_uv
  gl.vertexAttribPointer(2, 2, gl.FLOAT, false, stride, 6 * FLOAT_BYTES);

  const ibo = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); // IBO のバインドは VAO に記録される(第13章)
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geometry.indices, gl.STATIC_DRAW);

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

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

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  controls: HTMLParagraphElement,
  options: HTMLParagraphElement,
  captureControls: HTMLParagraphElement,
  guiPanel: HTMLDivElement,
  readout: HTMLParagraphElement,
): void {
  // --- プログラム ---------------------------------------------------------------
  const sceneProgram = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, sceneVertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, resolveIncludes(sceneFragmentTemplate)),
  );
  const overlayProgram = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, overlayVertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, resolveIncludes(overlayFragmentTemplate)),
  );

  const sceneLocations = {
    model: gl.getUniformLocation(sceneProgram, 'u_model'),
    view: gl.getUniformLocation(sceneProgram, 'u_view'),
    projection: gl.getUniformLocation(sceneProgram, 'u_projection'),
    normalMatrix: gl.getUniformLocation(sceneProgram, 'u_normalMatrix'),
    audio: gl.getUniformLocation(sceneProgram, 'u_audio'),
    audioAmount: gl.getUniformLocation(sceneProgram, 'u_audioAmount'),
    audioRow: gl.getUniformLocation(sceneProgram, 'u_audioRow'),
    audioBias: gl.getUniformLocation(sceneProgram, 'u_audioBias'),
    audioTint: gl.getUniformLocation(sceneProgram, 'u_audioTint'),
    lightDirection: gl.getUniformLocation(sceneProgram, 'u_lightDirection'),
    lightColor: gl.getUniformLocation(sceneProgram, 'u_lightColor'),
    cameraPosition: gl.getUniformLocation(sceneProgram, 'u_cameraPosition'),
    baseColor: gl.getUniformLocation(sceneProgram, 'u_baseColor'),
    shininess: gl.getUniformLocation(sceneProgram, 'u_shininess'),
    ambient: gl.getUniformLocation(sceneProgram, 'u_ambient'),
  };

  // --- メッシュ -------------------------------------------------------------------
  const torus = createMesh(gl, createTorus(1.15, 0.34, 96, 32));
  const sphere = createMesh(gl, createSphere(0.5, 32, 16));

  // --- 音(4 節) -----------------------------------------------------------------
  // AudioContext はここでは作らない。作るのは最初に「再生」が押されたとき
  const audio = createAudio();
  const BIN_COUNT = audio.binCount;
  const frequencyData = new Uint8Array(BIN_COUNT);
  const waveformData = new Uint8Array(audio.fftSize);
  /** 1 フレームにアプリが WebGL へ渡す音のバイト数。2 行ぶん */
  const AUDIO_BYTES_PER_FRAME = BIN_COUNT * 2;

  // 幅 = ビン数・高さ 2 の R8。行 0 がスペクトル、行 1 が波形
  const audioTexture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, audioTexture);
  gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R8, BIN_COUNT, 2);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.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);
  // 1 行が 1 バイト × 幅。既定の 4 だと、幅が 4 の倍数でないとき行の末尾に
  // 詰め物が入る前提で読まれる(ES 3.0.6 §3.7.2.1 式 3.13)。
  // ここは幅 1024 なのでたまたま 4 の倍数だが、幅を変えた瞬間に壊れるので 1 にしておく
  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
  gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, BIN_COUNT, 1, gl.RED, gl.UNSIGNED_BYTE, frequencyData);
  waveformData.fill(128);
  gl.texSubImage2D(
    gl.TEXTURE_2D,
    0,
    0,
    1,
    BIN_COUNT,
    1,
    gl.RED,
    gl.UNSIGNED_BYTE,
    waveformData.subarray(audio.fftSize - BIN_COUNT),
  );

  // --- シーンのパラメータ(5 節の GUI が書き換える) ---------------------------------
  const params = {
    colorHex: '#4da3ff',
    baseColor: vec3.fromValues(0, 0, 0),
    shininess: 48,
    spin: 0.35,
    ambient: 1.0,
    showSphere: true,
    showOverlay: true,
  };
  hexToLinear(params.colorHex, params.baseColor);

  // --- 入力(1〜3 節) --------------------------------------------------------------
  const input = createInput(canvas);
  const orbit = { theta: 0.6, phi: 0.3, radius: 4.4 };
  const target = vec3.fromValues(0, 0, 0);

  // --- 状態 -------------------------------------------------------------------------
  let demoId: DemoId = 'input';
  let audioView: 'spectrum' | 'waveform' = 'spectrum';
  let captureScale = 1;
  let job: TileCapture | null = null;
  let captureRequested = false;
  let saveUrl: string | null = null;
  let captureNote = 'まだ書き出していません';
  let bassLevel = 0;

  // --- 可視化用のバッファ(デモ 1) ---------------------------------------------------
  // 1 点 = [x, y, size, r, g, b]。ポインタは多くても数本なので 32 点で足りる
  const OVERLAY_FLOATS = 6;
  const OVERLAY_CAPACITY = 32;
  const overlayData = new Float32Array(OVERLAY_CAPACITY * OVERLAY_FLOATS);
  const overlayVao = gl.createVertexArray();
  gl.bindVertexArray(overlayVao);
  const overlayBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, overlayBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, overlayData.byteLength, gl.DYNAMIC_DRAW);
  const overlayStride = OVERLAY_FLOATS * FLOAT_BYTES;
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, overlayStride, 0);
  gl.enableVertexAttribArray(1);
  gl.vertexAttribPointer(1, 1, gl.FLOAT, false, overlayStride, 2 * FLOAT_BYTES);
  gl.enableVertexAttribArray(2);
  gl.vertexAttribPointer(2, 3, gl.FLOAT, false, overlayStride, 3 * FLOAT_BYTES);
  gl.bindVertexArray(null);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  // --- 毎フレーム使い回す入れ物 -------------------------------------------------------
  const eye = vec3.create();
  const view = mat4.create();
  const projection = mat4.create();
  const model = mat4.create();
  const normalMatrix = mat3.create();
  const cameraRight = vec3.create();
  const cameraForward = vec3.create();

  // ---------------------------------------------------------------------------
  // ボタン
  // ---------------------------------------------------------------------------

  /** aria-pressed で選択状態を持つボタンの並びを作る(第30章の option-buttons と同じ形) */
  function createButtonGroup(
    parent: HTMLElement,
    labels: string[],
    selected: number,
    onSelect: (index: number) => void,
  ): void {
    const buttons: HTMLButtonElement[] = [];
    labels.forEach((label, index) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = label;
      button.setAttribute('aria-pressed', index === selected ? '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);
      parent.append(button);
    });
  }

  /** 押しても選択状態にならない、ただの動作ボタン */
  function createActionButton(parent: HTMLElement, label: string): HTMLButtonElement {
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = label;
    parent.append(button);
    return button;
  }

  let captureButton: HTMLButtonElement | null = null;
  let saveLink: HTMLAnchorElement | null = null;

  function releaseSaveUrl(): void {
    if (saveUrl !== null) {
      // createObjectURL で作った URL は、明示的に解放しないとドキュメントが
      // 生きているあいだ Blob を掴んだままになる(6 節)
      URL.revokeObjectURL(saveUrl);
      saveUrl = null;
    }
    if (saveLink) saveLink.hidden = true;
  }

  function cancelCapture(): void {
    if (job) {
      deleteTileCapture(gl, job);
      job = null;
    }
    captureRequested = false;
    if (captureButton) captureButton.disabled = false;
  }

  function buildOptions(): void {
    options.replaceChildren();
    captureControls.replaceChildren();
    clearGui(guiPanel);
    captureButton = null;
    saveLink = null;
    options.hidden = false;
    captureControls.hidden = true;
    guiPanel.hidden = true;

    if (demoId === 'input') {
      createButtonGroup(options, ['可視化 on', '可視化 off'], params.showOverlay ? 0 : 1, (i) => {
        params.showOverlay = i === 0;
      });
      return;
    }

    if (demoId === 'audio') {
      createButtonGroup(options, ['再生', '停止'], audio.playing ? 0 : 1, (i) => {
        // resume() はユーザー操作のハンドラの中から呼ぶ(4 節)
        if (i === 0) audio.start();
        else audio.stop();
      });
      createButtonGroup(options, ['スペクトル', '波形'], audioView === 'spectrum' ? 0 : 1, (i) => {
        audioView = i === 0 ? 'spectrum' : 'waveform';
      });
      return;
    }

    if (demoId === 'gui') {
      // GUI 自体が操作面なので option-buttons は要らない
      options.hidden = true;
      guiPanel.hidden = false;
      addColorPicker(guiPanel, {
        label: '基本色',
        value: params.colorHex,
        onInput: (hex) => {
          params.colorHex = hex;
          hexToLinear(hex, params.baseColor);
        },
      });
      addSlider(guiPanel, {
        label: '鋭さ (shininess)',
        min: 2,
        max: 256,
        step: 1,
        value: params.shininess,
        digits: 0,
        onInput: (value) => {
          params.shininess = value;
        },
      });
      addSlider(guiPanel, {
        label: '回転 (回/秒)',
        min: -1,
        max: 1,
        step: 0.01,
        value: params.spin,
        onInput: (value) => {
          params.spin = value;
        },
      });
      addSlider(guiPanel, {
        label: '環境光',
        min: 0,
        max: 2,
        step: 0.01,
        value: params.ambient,
        onInput: (value) => {
          params.ambient = value;
        },
      });
      addToggle(guiPanel, {
        label: '中の球を出す',
        value: params.showSphere,
        onChange: (value) => {
          params.showSphere = value;
        },
      });
      return;
    }

    // demoId === 'capture'
    captureControls.hidden = false;
    createButtonGroup(
      options,
      ['等倍', '2 倍', '4 倍'],
      captureScale === 1 ? 0 : captureScale === 2 ? 1 : 2,
      (i) => {
        captureScale = i === 0 ? 1 : i === 1 ? 2 : 4;
      },
    );
    captureButton = createActionButton(captureControls, '書き出す');
    captureButton.addEventListener('click', () => {
      releaseSaveUrl();
      captureRequested = true;
      if (captureButton) captureButton.disabled = true;
      captureNote = '書き出し中…';
    });
    const link = document.createElement('a');
    link.className = 'save-link';
    link.hidden = true;
    link.textContent = '保存';
    captureControls.append(link);
    saveLink = link;
  }

  function selectDemo(id: DemoId): void {
    demoId = id;
    // 音は止める。止め忘れると、別のデモを見ているあいだ鳴り続ける
    if (id !== 'audio') audio.stop();
    if (id !== 'capture') {
      cancelCapture();
      releaseSaveUrl();
    }
    buildOptions();
    // rAF 間隔の標本も捨てる。前のデモのフレームが混ざった平均を出さないため
    resetFrameSamples();
  }

  createButtonGroup(
    controls,
    DEMO_IDS.map((id) => DEMO_LABELS[id]),
    0,
    (index) => selectDemo(DEMO_IDS[index]),
  );
  buildOptions();

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

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, MAX_DPR);
    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;
      // viewport も必ずセットで切り替える(既定値は 300×150 のまま)
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

  // ---------------------------------------------------------------------------
  // 描画
  // ---------------------------------------------------------------------------

  function drawMesh(mesh: Mesh, matrix: mat4, audioAmount: number): void {
    mat3.normalFromMat4(normalMatrix, matrix);
    gl.uniformMatrix4fv(sceneLocations.model, false, matrix); // transpose は常に false
    gl.uniformMatrix3fv(sceneLocations.normalMatrix, false, normalMatrix);
    gl.uniform1f(sceneLocations.audioAmount, audioAmount);
    gl.bindVertexArray(mesh.vao);
    gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0);
    gl.bindVertexArray(null);
  }

  /**
   * いまバインドされている描画先へシーンを描く。
   * 射影行列を引数で受けるのは、7 節のタイル書き出しがここへ
   * 「視錐台の一部を切り出した行列」を渡すため
   */
  function drawScene(currentProjection: mat4, time: number): void {
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);
    gl.clearColor(BACKGROUND_COLOR[0], BACKGROUND_COLOR[1], BACKGROUND_COLOR[2], 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.useProgram(sceneProgram);
    gl.uniformMatrix4fv(sceneLocations.view, false, view);
    gl.uniformMatrix4fv(sceneLocations.projection, false, currentProjection);
    gl.uniform3fv(sceneLocations.lightDirection, LIGHT_DIRECTION);
    gl.uniform3fv(sceneLocations.lightColor, LIGHT_COLOR);
    gl.uniform3fv(sceneLocations.cameraPosition, eye);
    gl.uniform3fv(sceneLocations.baseColor, params.baseColor);
    gl.uniform1f(sceneLocations.shininess, params.shininess);
    gl.uniform1f(sceneLocations.ambient, params.ambient);
    gl.uniform1f(sceneLocations.audioRow, audioView === 'spectrum' ? 0.25 : 0.75);
    gl.uniform1f(sceneLocations.audioBias, audioView === 'spectrum' ? 0.0 : WAVEFORM_CENTER);
    gl.uniform1f(sceneLocations.audioTint, demoId === 'audio' ? 1.2 : 0.0);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, audioTexture);
    gl.uniform1i(sceneLocations.audio, 0);

    // トーラス: 傾けてから回す。uv.x が大円 1 周なので、スペクトルが輪に巻かれる
    mat4.fromXRotation(model, -1.0);
    mat4.rotateZ(model, model, time * params.spin * Math.PI * 2);
    drawMesh(torus, model, demoId === 'audio' ? AUDIO_DISPLACEMENT : 0);

    // 中の球: 低音の強さでふくらむ。こちらは CPU 側で平均を取っている
    if (params.showSphere) {
      const scale = 1 + (demoId === 'audio' ? bassLevel * 0.7 : 0);
      mat4.fromScaling(model, [scale, scale, scale]);
      drawMesh(sphere, model, 0);
    }

    gl.disable(gl.CULL_FACE);
  }

  /** デモ 1 の可視化。シーンの上に重ねる UI なので、ふつうのアルファブレンド */
  function drawOverlay(): void {
    let count = 0;
    const push = (x: number, y: number, size: number, r: number, g: number, b: number): void => {
      if (count >= OVERLAY_CAPACITY) return;
      const at = count * OVERLAY_FLOATS;
      // 描画バッファ座標(左上原点)→ NDC(左下原点)
      overlayData[at] = (x / canvas.width) * 2 - 1;
      overlayData[at + 1] = 1 - (y / canvas.height) * 2;
      overlayData[at + 2] = size;
      overlayData[at + 3] = r;
      overlayData[at + 4] = g;
      overlayData[at + 5] = b;
      count++;
    };

    let midX = 0;
    let midY = 0;
    for (const pointer of input.pointers.values()) {
      push(pointer.downX, pointer.downY, 20, 0.05, 0.12, 0.35);
      push(pointer.x, pointer.y, 38, 0.9, 0.55, 0.15);
      midX += pointer.x;
      midY += pointer.y;
    }
    if (input.pointers.size === 2) {
      push(midX / 2, midY / 2, 28, 0.1, 0.6, 0.3);
    }
    if (count === 0) return;

    gl.useProgram(overlayProgram);
    gl.bindVertexArray(overlayVao);
    gl.bindBuffer(gl.ARRAY_BUFFER, overlayBuffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, overlayData, 0, count * OVERLAY_FLOATS);
    gl.disable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.drawArrays(gl.POINTS, 0, count);
    gl.disable(gl.BLEND);
    gl.bindVertexArray(null);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
  }

  // ---------------------------------------------------------------------------
  // 読み出し行
  // ---------------------------------------------------------------------------

  const FRAME_SAMPLES = 30;
  const frameTimes: number[] = [];
  let lastReadoutAt = 0;

  function resetFrameSamples(): void {
    frameTimes.length = 0;
  }

  function averageFrameMs(): number {
    if (frameTimes.length === 0) return 0;
    let total = 0;
    for (const value of frameTimes) total += value;
    return total / frameTimes.length;
  }

  function describeInput(): string {
    const types = [...input.pointers.values()].map((p) => p.type || '(不明)');
    const keys = [...input.keys];
    return (
      `押されているポインタ ${input.pointers.size} 本` +
      `${types.length > 0 ? `(${types.join(', ')})` : ''} / ` +
      `キー {${keys.length > 0 ? keys.join(', ') : ''}} / ` +
      `ピンチ ${input.pinchScale.toFixed(3)} 倍 / ` +
      `getBoundingClientRect の呼び出し ${input.rectReads} 回(ページを開いてから)`
    );
  }

  function describeAudio(): string {
    if (audio.sampleRate === 0) {
      return `AudioContext はまだ作っていません(「再生」を押すと作ります・4 節) / fftSize ${audio.fftSize} / ビン数 ${BIN_COUNT}`;
    }
    return (
      `${audio.playing ? '再生中' : '停止中'} / sampleRate ${audio.sampleRate} Hz / ` +
      `fftSize ${audio.fftSize} / ビン数 ${BIN_COUNT} / ` +
      `1 ビン ${audio.hzPerBin.toFixed(2)} Hz(上端 ${(audio.sampleRate / 2 / 1000).toFixed(1)} kHz) / ` +
      `表示 ${audioView === 'spectrum' ? 'スペクトル' : '波形'} / ` +
      `毎フレーム ${AUDIO_BYTES_PER_FRAME.toLocaleString('en-US')} バイトを texSubImage2D で WebGL に渡す`
    );
  }

  function describeGui(): string {
    return (
      `基本色 ${params.colorHex}(リニア ` +
      `${params.baseColor[0].toFixed(3)}, ${params.baseColor[1].toFixed(3)}, ${params.baseColor[2].toFixed(3)}) / ` +
      `鋭さ ${params.shininess.toFixed(0)} / 回転 ${params.spin.toFixed(2)} 回/秒 / ` +
      `環境光 ${params.ambient.toFixed(2)} / 中の球 ${params.showSphere ? 'あり' : 'なし'}`
    );
  }

  function describeCapture(): string {
    const base = `${gl.drawingBufferWidth} × ${gl.drawingBufferHeight}`;
    const progress = job ? ` / タイル ${job.rendered} / ${job.total}` : '';
    return `描画バッファ ${base} / 倍率 ${captureScale} 倍${progress} / ${captureNote}`;
  }

  function updateReadout(): void {
    const ms = frameTimes.length === 0 ? '—' : `${averageFrameMs().toFixed(1)} ms`;
    const body =
      demoId === 'input'
        ? describeInput()
        : demoId === 'audio'
          ? describeAudio()
          : demoId === 'gui'
            ? describeGui()
            : describeCapture();
    readout.textContent = `${body} / rAF 間隔 ${ms}(CPU 側の計測。GPU 時間ではありません・第35章 3 節)`;
  }

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

  let lastTimestamp = 0;

  function frame(timestamp: DOMHighResTimeStamp): void {
    resizeIfNeeded();
    const time = timestamp / 1000;

    const delta = timestamp - lastTimestamp;
    if (lastTimestamp !== 0 && delta < 200) {
      frameTimes.push(delta);
      if (frameTimes.length > FRAME_SAMPLES) frameTimes.shift();
    }
    const dt = lastTimestamp === 0 ? 0 : Math.min(delta / 1000, 1 / 15);
    lastTimestamp = timestamp;

    // --- 入力を「フレームで読む状態」として受け取る(1 節) --------------------------
    input.beginFrame();

    const drag = input.takeDrag();
    const speed = (2 * Math.PI) / canvas.height;
    orbit.theta -= drag.x * speed;
    orbit.phi += drag.y * speed;

    orbit.radius *= Math.exp(input.takeZoomLog());

    // キーはフレームで集合を読む。押されている間ずっと効く(3 節)
    const boost = input.modifiers.shift ? 3 : 1;
    const move = KEY_MOVE_SPEED * dt * boost;
    let forward = 0;
    let strafe = 0;
    if (input.keys.has('KeyW')) forward += 1;
    if (input.keys.has('KeyS')) forward -= 1;
    if (input.keys.has('KeyD')) strafe += 1;
    if (input.keys.has('KeyA')) strafe -= 1;
    if (input.keys.has('KeyQ')) orbit.radius *= Math.exp(KEY_ZOOM_SPEED * dt);
    if (input.keys.has('KeyE')) orbit.radius *= Math.exp(-KEY_ZOOM_SPEED * dt);
    if (input.keys.has('KeyR')) {
      orbit.theta = 0.6;
      orbit.phi = 0.3;
      orbit.radius = 4.4;
      vec3.set(target, 0, 0, 0);
    }

    orbit.phi = Math.min(PHI_LIMIT, Math.max(-PHI_LIMIT, orbit.phi));
    orbit.radius = Math.min(MAX_RADIUS, Math.max(MIN_RADIUS, orbit.radius));

    // カメラの水平基底。キーと 2 本指のパンはこの上で動かす
    vec3.set(cameraForward, -Math.sin(orbit.theta), 0, -Math.cos(orbit.theta));
    vec3.set(cameraRight, Math.cos(orbit.theta), 0, -Math.sin(orbit.theta));
    vec3.scaleAndAdd(target, target, cameraForward, forward * move);
    vec3.scaleAndAdd(target, target, cameraRight, strafe * move);

    const pan = input.takePan();
    // 2 本指のパン。画面の 1 px が、いまの距離で何ワールド単位かに直す
    const worldPerPixel = (2 * orbit.radius * Math.tan(FOVY / 2)) / canvas.height;
    vec3.scaleAndAdd(target, target, cameraRight, -pan.x * worldPerPixel);
    vec3.scaleAndAdd(target, target, UP, pan.y * worldPerPixel);

    // --- 音を読んで GPU へ(4 節) ---------------------------------------------------
    if (demoId === 'audio') {
      audio.update();
      audio.readFrequency(frequencyData);
      audio.readWaveform(waveformData);
      let total = 0;
      for (let i = 0; i < 16; i++) total += frequencyData[i];
      bassLevel = total / (16 * 255);

      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, audioTexture);
      gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
      gl.texSubImage2D(
        gl.TEXTURE_2D,
        0,
        0,
        0,
        BIN_COUNT,
        1,
        gl.RED,
        gl.UNSIGNED_BYTE,
        frequencyData,
      );
      // 波形は fftSize 個あるので、テクスチャの幅に合わせて**新しいほうから**ビン数ぶん使う
      gl.texSubImage2D(
        gl.TEXTURE_2D,
        0,
        0,
        1,
        BIN_COUNT,
        1,
        gl.RED,
        gl.UNSIGNED_BYTE,
        waveformData.subarray(audio.fftSize - BIN_COUNT),
      );
    }

    // --- カメラ行列 -------------------------------------------------------------------
    eye[0] = target[0] + orbit.radius * Math.cos(orbit.phi) * Math.sin(orbit.theta);
    eye[1] = target[1] + orbit.radius * Math.sin(orbit.phi);
    eye[2] = target[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);

    // --- 画面へ描く -----------------------------------------------------------------
    drawScene(projection, time);
    if (demoId === 'input' && params.showOverlay) {
      drawOverlay();
    }

    // --- 書き出し(6〜7 節) ------------------------------------------------------------
    // **描いた直後・同じタスクの中**でしか canvas.toBlob は正しい絵を返さない。
    // だから書き出しの処理はここ、rAF コールバックの末尾に置いてある
    if (captureRequested && captureScale === 1) {
      captureRequested = false;
      const width = gl.drawingBufferWidth;
      const height = gl.drawingBufferHeight;
      void canvasToBlob(canvas).then((blob) => {
        publish(blob, width, height, 1, 'canvas.toBlob(6 節)');
      });
    } else if (captureRequested) {
      captureRequested = false;
      job = beginTileCapture(gl, {
        tileWidth: gl.drawingBufferWidth,
        tileHeight: gl.drawingBufferHeight,
        tilesX: captureScale,
        tilesY: captureScale,
      });
    }

    if (job) {
      const current = job;
      const done = captureNextTile(gl, current, FOVY, NEAR, FAR, (tileProjectionMatrix) => {
        drawScene(tileProjectionMatrix, time);
      });
      captureNote = `書き出し中… タイル ${current.rendered} / ${current.total}`;
      if (done) {
        job = null;
        void finishTileCapture(current).then((blob) => {
          publish(blob, current.width, current.height, current.total, 'FBO タイル(7 節)');
          deleteTileCapture(gl, current);
        });
      }
    }

    if (timestamp - lastReadoutAt > 250) {
      updateReadout();
      lastReadoutAt = timestamp;
    }
    requestAnimationFrame(frame);
  }

  /**
   * 書き出せた PNG を「保存」リンクにぶら下げる。
   * ここで自動的にダウンロードを始めないのは意図的で、押すかどうかは読者が決める
   */
  function publish(
    blob: Blob | null,
    width: number,
    height: number,
    tiles: number,
    path: string,
  ): void {
    if (captureButton) captureButton.disabled = false;
    if (!blob) {
      captureNote = '書き出しに失敗しました';
      return;
    }
    releaseSaveUrl();
    const url = URL.createObjectURL(blob);
    saveUrl = url;
    if (saveLink) {
      saveLink.href = url;
      saveLink.download = `webgl2-36-${width}x${height}.png`;
      saveLink.textContent = `保存 (${width}×${height} PNG)`;
      saveLink.hidden = false;
    }
    const kib = blob.size / 1024;
    captureNote =
      `${path} / ${width} × ${height} px / タイル ${tiles} 枚 / ` +
      `PNG ${blob.size.toLocaleString('en-US')} バイト(${kib.toFixed(1)} KiB) / ` +
      `1 画素あたり ${((blob.size * 8) / (width * height)).toFixed(2)} ビット`;
  }

  // このページのデモはページと寿命を共にするので、rAF ループの停止もリスナーの解除も
  // していない。GPU リソース解放の一般論は第35章 7 節(この章の deleteTileCapture と
  // revokeObjectURL は「使い終わったら消す」ぶんだけを実践している)
  requestAnimationFrame(frame);
}

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

const canvas = document.querySelector<HTMLCanvasElement>('#demo');
const controls = document.querySelector<HTMLParagraphElement>('#demo-buttons');
const options = document.querySelector<HTMLParagraphElement>('#option-buttons');
const captureControls = document.querySelector<HTMLParagraphElement>('#capture-buttons');
const guiPanel = document.querySelector<HTMLDivElement>('#gui');
const readout = document.querySelector<HTMLParagraphElement>('#readout');
if (!canvas || !controls || !options || !captureControls || !guiPanel || !readout) {
  throw new Error('デモに必要な要素が見つかりません');
}

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

setup(gl, canvas, controls, options, captureControls, guiPanel, readout);