ポストプロセス — ブルーム・トーンマップ・FXAA

  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec3 sum = texture(u_source, uv).rgb * WEIGHTS[0];

  /** 段 i のぼかし 2 本。入力は段 0 なら抽出の結果、それ以外は 1 つ上の段の結果 */
  function blurPassesFor(index: number): Pass[] {
    const source = index === 0 ? levels[0].a : levels[index - 1].a;
    return [
      // 段 1 以降は横パスがそのまま縮小も兼ねる(描画先が半分なので LINEAR が 2×2 を平均する)。
      // 段 0 のソースは抽出の結果で、すでに半分の解像度なので縮小は起きない
      blurPass(source, levels[index].b, true),
      blurPass(levels[index].b, levels[index].a, false),
    ];
  }

  interface Pass {
    label: string;
    /** null なら画面(既定のフレームバッファ) */
    target: RenderTarget | null;
    /** 描画先の幅・高さを受け取って、プログラムと uniform を用意する */
    setup: (width: number, height: number) => void;
  }

    // --- 全画面パスのチェーン。並べた配列を 1 本のループで流すだけ -------------------
    const passes = buildPasses();
    // 全画面三角形は深度を持たないし、書き潰すだけなので深度テストは切る
    gl.disable(gl.DEPTH_TEST);
    for (const pass of passes) {
      bindRenderTarget(gl, pass.target); // viewport も一緒に切り替わる(第20章)
      const targetWidth = pass.target ? pass.target.width : gl.drawingBufferWidth;
      const targetHeight = pass.target ? pass.target.height : gl.drawingBufferHeight;
      pass.setup(targetWidth, targetHeight);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    }
    gl.enable(gl.DEPTH_TEST);

    passes.push(thresholdPass(levels[0].a));
    for (let i = 0; i < levelCount; i++) passes.push(...blurPassesFor(i));

    if (demo.id === 'bloom') {
      passes.push(compositePass(null, levelCount));
      return passes;
    }

  vec3 color = u_baseColor * (u_ambientColor + u_lightColor * NdotL)
    + u_lightColor * specular * u_specularStrength
    + u_emissive;

  // リニア HDR。1 を超えた値は RGBA16F にそのまま入る(2 節)
  fragColor = vec4(color, 1.0);

  const hasColorBufferFloat = gl.getExtension('EXT_color_buffer_float') !== null;
  const hasColorBufferHalfFloat = gl.getExtension('EXT_color_buffer_half_float') !== null;
  const hdrFormat = hasColorBufferFloat || hasColorBufferHalfFloat ? gl.RGBA16F : gl.RGBA8;
  const hdrBytesPerPixel = hdrFormat === gl.RGBA8 ? 4 : 8;
  const hdrFormatName = hdrFormat === gl.RGBA8 ? 'RGBA8' : 'RGBA16F';
  // RGBA8 に落ちたときは 1 を超える明るさが保持できないので、**しきい値のほうを 0.35 倍に
  // 下げて**抽出する。ブルームは出るが「1 を超えた分」ではなくなる(本文 2 節)
  const thresholdScale = hdrFormat === gl.RGBA8 ? 0.35 : 1.0;

  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec3 color = texture(u_source, uv).rgb;

  float luma = dot(color, LUMA_BT709);
  // smoothstep の edge0 < edge1 は守ること。逆順は GLSL ES 3.00 §8.3 で「未定義」
  // (第30章が実際にこれを踏んだ)。u_knee は CPU 側で必ず正の値にしてある
  float weight = smoothstep(u_threshold, u_threshold + u_knee, luma);

  fragColor = vec4(color * weight, 1.0);

  color *= u_exposure; // 露出 → トーンマップ → sRGB の順(第27章 5 節)
  color = toneMapReinhard(color);

  fragColor = vec4(linearToSrgb(color), 1.0);

const float WEIGHTS[5] = float[5](0.204164, 0.180174, 0.123832, 0.066282, 0.027631);

out vec4 fragColor;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec3 sum = texture(u_source, uv).rgb * WEIGHTS[0];

  for (int i = 1; i < 5; i++) {
    vec2 offset = u_direction * u_texelStep * float(i);
    sum += texture(u_source, uv + offset).rgb * WEIGHTS[i];
    sum += texture(u_source, uv - offset).rgb * WEIGHTS[i];
  }

  const color = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, color);
  gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, internalFormat, width, height);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, color);

  // 深度も同じサンプル数で作る。揃っていないと FRAMEBUFFER_INCOMPLETE_MULTISAMPLE になる
  const depth = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, depth);
  gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT24, width, height);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth);

      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, multisample.framebuffer);
      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, sceneTarget.framebuffer);
      gl.blitFramebuffer(
        0,
        0,
        multisample.width,
        multisample.height,
        0,
        0,
        sceneTarget.width,
        sceneTarget.height,
        gl.COLOR_BUFFER_BIT,
        gl.NEAREST, // 解決のときは filter は無視される(§4.3.3)
      );

function supportedSampleCounts(gl: WebGL2RenderingContext, internalFormat: GLenum): number[] {
  const counts = gl.getInternalformatParameter(gl.RENDERBUFFER, internalFormat, gl.SAMPLES);
  return counts instanceof Int32Array ? Array.from(counts) : [];
}

float fxaaLuma(vec3 rgb) {
  return rgb.g * (0.587 / 0.299) + rgb.r;
}

  float rangeMin = min(lumaM, min(min(lumaN, lumaW), min(lumaS, lumaE)));
  float rangeMax = max(lumaM, max(max(lumaN, lumaW), max(lumaS, lumaE)));
  float range = rangeMax - rangeMin;
  if (range < max(EDGE_THRESHOLD_MIN, rangeMax * EDGE_THRESHOLD)) {
    fragColor = vec4(rgbM, 1.0);
    return;
  }

  vec2 posB = pos + across * (lengthSign * 0.5);
  vec2 posN = posB - along;
  vec2 posP = posB + along;
  float lumaEndN = lumaPair;
  float lumaEndP = lumaPair;
  bool doneN = false;
  bool doneP = false;
  for (int i = 0; i < SEARCH_STEPS; i++) {
    if (!doneN) lumaEndN = fxaaLuma(fetch(posN));
    if (!doneP) lumaEndP = fxaaLuma(fetch(posP));
    doneN = doneN || abs(lumaEndN - lumaPair) >= gradient;
    doneP = doneP || abs(lumaEndP - lumaPair) >= gradient;
    if (doneN && doneP) break;
    if (!doneN) posN -= along;
    if (!doneP) posP += along;
  }

  if (u_grain > 0.0) {
    // hash21 は 0〜1 なので、-0.5 して ±0.5 にする。座標をフレーム番号でずらすと
    // 毎フレーム別の模様になる。u_frame を整数のまま渡すのがこの章の約束(6 節)
    ivec2 cell = ivec2(gl_FragCoord.xy) + ivec2(u_frame * 1237, u_frame * 9781);
    color += (hash21(cell) - 0.5) * u_grain;
  }

  if (u_dither > 0.0) {
    // 三角 PDF ±1 段のディザ。**8 ビットへ落ちる直前のこのパスでだけ**掛ける(6 節)。
    // 原理は第27章 8 節
    color += triangularDither(ivec2(gl_FragCoord.xy)) / 255.0;
  }

// 第33章: ポストプロセス — ブルーム・トーンマップ・FXAA
//
// この章の骨格は「1 枚の絵を作るのに、描画パスを何本も並べる」こと。
// 4 本のデモは**同じシーン**を描き、変わるのは後段のパスだけ。
//
//   シーン(3D・RGBA16F へ)
//     → 抽出(しきい値・半分の解像度へ)
//     → ぼかし(横 → 縦。段を下げながら N 回)
//     → 合成(シーン + ブルーム → 露出 → トーンマップ → sRGB エンコード)
//     → FXAA
//     → 仕上げ(色収差・グレイン・ビネット・ディザ)
//     → 画面(8 ビット)
//
// 後段のパスはすべて「全画面三角形 1 枚 + フラグメントシェーダー」で、
// 頂点シェーダーは第6章の src/lib/fullscreen.vert をそのまま使い回す(第23章と同じ)。
//
// パスをヘルパーモジュールに畳まず、配列と 1 本のループで書いてある。
// この章で見せたいのはチェーンの形そのものなので、並べてあるほうが読める(本文 1 節)。

import { mat3, mat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import {
  bindRenderTarget,
  createRenderTarget,
  deleteRenderTarget,
  type RenderTarget,
  resizeRenderTarget,
} from '../../lib/framebuffer';
import fullscreenVertexSource from '../../lib/fullscreen.vert?raw';
import {
  createPlane,
  createSphere,
  createTorus,
  type Geometry,
  interleave,
} from '../../lib/geometry';
import { compileShader, linkProgram } from '../../lib/shader';
import blurFragmentSource from './blur.frag?raw';
import colorChunkSource from './color.glsl?raw';
import compositeFragmentTemplate from './composite.frag?raw';
import fxaaFragmentSource from './fxaa.frag?raw';
import gradeFragmentTemplate from './grade.frag?raw';
import hashChunkSource from './hash.glsl?raw';
import passthroughFragmentTemplate from './passthrough.frag?raw';
import sceneFragmentSource from './scene.frag?raw';
import sceneVertexSource from './scene.vert?raw';
import thresholdFragmentSource from './threshold.frag?raw';

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

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

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

// ポストプロセスのコストはピクセル数にそのまま比例するので、dpr の上限を 2 から 1.5 へ下げる。
// ピクセル数は (1.5 / 2)² = 0.5625 倍になる(第23・28章と同じ判断。一般論は第35章 5 節)
const MAX_DPR = 1.5;

// ブルームの段数の上限。composite.frag のサンプラの本数と必ず揃えること
const MAX_BLOOM_LEVELS = 5;
// blur.frag の重みは半径 4(9 タップ)。読み取り回数の計算に使う
const BLUR_TAPS = 9;
// fxaa.frag の SEARCH_STEPS と揃える。読み取り回数の上限の計算に使う
const FXAA_SEARCH_STEPS = 8;

const UP: ReadonlyVec3 = vec3.fromValues(0, 1, 0);
const TARGET: ReadonlyVec3 = vec3.fromValues(0, 0, 0);

// canvas の CSS 背景色と同じ sRGB 値。ただしシーンを描く FBO はリニア空間なので、
// クリアにはこれを srgbToLinear で通した値を使う(第27章 3 節の約束)
const BACKGROUND_SRGB: ReadonlyVec3 = vec3.fromValues(0.06, 0.07, 0.09);

// 光の向きは「面から光源へ」(第17章の約束)
const LIGHT_DIRECTION: ReadonlyVec3 = vec3.normalize(
  vec3.create(),
  vec3.fromValues(0.45, 0.8, 0.4),
);
const LIGHT_COLOR: ReadonlyVec3 = vec3.fromValues(1.0, 0.95, 0.86);
const AMBIENT_COLOR: ReadonlyVec3 = vec3.fromValues(0.05, 0.06, 0.08);

const EXPOSURE = 1.0;
const BLOOM_STRENGTH = 1.0;

/** sRGB エンコード値 → リニア値。color.glsl の srgbToLinear を CPU 側に書き写したもの */
function srgbToLinear(c: number): number {
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}

// ---------------------------------------------------------------------------
// メッシュ(第13〜15章の手順そのまま。この章の主題ではない)
// ---------------------------------------------------------------------------

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

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

  const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
  const stride = 8 * FLOAT_BYTES; // 1 頂点 = 位置 3 + 法線 3 + UV 2
  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);
  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);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geometry.indices, gl.STATIC_DRAW);

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

// ---------------------------------------------------------------------------
// マルチサンプルのレンダーターゲット(この章ローカル)
//
// src/lib/framebuffer.ts の createRenderTarget はカラーをテクスチャで持つ。
// マルチサンプルの画像はテクスチャにできない(サンプルの束であって 1 枚の絵ではない)ので、
// レンダーバッファで作り、blitFramebuffer で解決してからテクスチャへ移す(本文 5 節)。
// 共通ヘルパーにモードを足さないのは第23・24・29・32章と同じ判断
// ---------------------------------------------------------------------------

interface MultisampleTarget {
  framebuffer: WebGLFramebuffer;
  color: WebGLRenderbuffer;
  depth: WebGLRenderbuffer;
  width: number;
  height: number;
  samples: number;
}

/**
 * この形式で使えるサンプル数を GPU に聞く。降順で返ってくる(ES 3.0.6 §6.1.15)。
 * RGBA16F のマルチサンプルは EXT_color_buffer_float では**任意**なので、
 * 「拡張があるから 4x が使える」とは限らない。必ず問い合わせる(本文 5 節)
 */
function supportedSampleCounts(gl: WebGL2RenderingContext, internalFormat: GLenum): number[] {
  const counts = gl.getInternalformatParameter(gl.RENDERBUFFER, internalFormat, gl.SAMPLES);
  return counts instanceof Int32Array ? Array.from(counts) : [];
}

function createMultisampleTarget(
  gl: WebGL2RenderingContext,
  width: number,
  height: number,
  samples: number,
  internalFormat: GLenum,
): MultisampleTarget {
  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

  const color = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, color);
  gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, internalFormat, width, height);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, color);

  // 深度も同じサンプル数で作る。揃っていないと FRAMEBUFFER_INCOMPLETE_MULTISAMPLE になる
  const depth = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, depth);
  gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT24, width, height);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth);
  gl.bindRenderbuffer(gl.RENDERBUFFER, null);

  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  if (status !== gl.FRAMEBUFFER_COMPLETE) {
    gl.deleteFramebuffer(framebuffer);
    gl.deleteRenderbuffer(color);
    gl.deleteRenderbuffer(depth);
    throw new Error(`マルチサンプル FBO が不完全です(0x${status.toString(16)})`);
  }
  // 実際に確保されたサンプル数は「要求以上・実装が対応する次の段以下」なので、聞き直す
  gl.bindRenderbuffer(gl.RENDERBUFFER, color);
  const actual = gl.getRenderbufferParameter(gl.RENDERBUFFER, gl.RENDERBUFFER_SAMPLES) as number;
  gl.bindRenderbuffer(gl.RENDERBUFFER, null);

  return { framebuffer, color, depth, width, height, samples: actual };
}

function deleteMultisampleTarget(gl: WebGL2RenderingContext, target: MultisampleTarget): void {
  gl.deleteFramebuffer(target.framebuffer);
  gl.deleteRenderbuffer(target.color);
  gl.deleteRenderbuffer(target.depth);
}

// ---------------------------------------------------------------------------
// デモとオプション
// ---------------------------------------------------------------------------

type PeekStage = 'scene' | 'threshold' | 'blur' | 'composite';
type AntialiasMode = 'none' | 'fxaa' | 'msaa';

interface Demo {
  id: string;
  label: string;
  note: string;
}

const demos: Demo[] = [
  { id: 'peek', label: 'パスを覗く', note: 'チェーンの途中の FBO をそのまま画面に出す' },
  { id: 'bloom', label: 'ブルーム', note: 'しきい値と段数でブルームの出方が変わる' },
  { id: 'aa', label: 'アンチエイリアス', note: '同じ絵を「なし / FXAA / MSAA」で見比べる' },
  { id: 'grade', label: '仕上げ', note: '色収差・グレイン・ビネット・ディザの on-off' },
];

// つまみの既定値。デモを切り替えるたびにここへ戻す(下の切替ボタンを参照)
const DEFAULT_STATE = {
  peek: 'composite' as PeekStage,
  threshold: 1.5,
  levels: 3,
  antialias: 'fxaa' as AntialiasMode,
  chromatic: true,
  grain: true,
  vignette: true,
  dither: true,
};

const state = { ...DEFAULT_STATE };

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

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  controls: HTMLParagraphElement,
  options: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  // --- float の描画先が使えるか(第20章 8 節・本文 2 節) --------------------------
  // EXT_color_buffer_float が本命。無ければ EXT_color_buffer_half_float
  // (「16 ビット float にしか描けない端末のために WebGL 2.0 へも公開した」と
  //  拡張仕様の 2020-08-31 の改訂に書いてある)。どちらも無ければ RGBA8 へ落ちる
  const hasColorBufferFloat = gl.getExtension('EXT_color_buffer_float') !== null;
  const hasColorBufferHalfFloat = gl.getExtension('EXT_color_buffer_half_float') !== null;
  const hdrFormat = hasColorBufferFloat || hasColorBufferHalfFloat ? gl.RGBA16F : gl.RGBA8;
  const hdrBytesPerPixel = hdrFormat === gl.RGBA8 ? 4 : 8;
  const hdrFormatName = hdrFormat === gl.RGBA8 ? 'RGBA8' : 'RGBA16F';
  // RGBA8 に落ちたときは 1 を超える明るさが保持できないので、**しきい値のほうを 0.35 倍に
  // 下げて**抽出する。ブルームは出るが「1 を超えた分」ではなくなる(本文 2 節)
  const thresholdScale = hdrFormat === gl.RGBA8 ? 0.35 : 1.0;

  // --- MSAA が使えるか(本文 5 節) -------------------------------------------------
  // RGBA16F のマルチサンプルは EXT_color_buffer_float では任意扱いなので、
  // 深度と合わせて「両方が対応しているサンプル数」を取る
  const colorSamples = supportedSampleCounts(gl, hdrFormat);
  const depthSamples = supportedSampleCounts(gl, gl.DEPTH_COMPONENT24);
  const msaaSamples = colorSamples
    .filter((s) => s <= 4 && depthSamples.includes(s))
    .reduce((best, s) => Math.max(best, s), 0);

  // --- プログラム -------------------------------------------------------------------
  const sceneProgram = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, sceneVertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, sceneFragmentSource),
  );

  /** 全画面パスのプログラム。頂点シェーダーは第6章の資産をそのまま使い回す */
  function createPostProgram(fragmentSource: string): WebGLProgram {
    return linkProgram(
      gl,
      compileShader(gl, gl.VERTEX_SHADER, fullscreenVertexSource),
      compileShader(gl, gl.FRAGMENT_SHADER, resolveIncludes(fragmentSource)),
    );
  }

  const thresholdProgram = createPostProgram(thresholdFragmentSource);
  const blurProgram = createPostProgram(blurFragmentSource);
  const compositeProgram = createPostProgram(compositeFragmentTemplate);
  const fxaaProgram = createPostProgram(fxaaFragmentSource);
  const gradeProgram = createPostProgram(gradeFragmentTemplate);
  const passthroughProgram = createPostProgram(passthroughFragmentTemplate);

  const sceneUniforms = {
    model: gl.getUniformLocation(sceneProgram, 'u_model'),
    view: gl.getUniformLocation(sceneProgram, 'u_view'),
    projection: gl.getUniformLocation(sceneProgram, 'u_projection'),
    normalMatrix: gl.getUniformLocation(sceneProgram, 'u_normalMatrix'),
    baseColor: gl.getUniformLocation(sceneProgram, 'u_baseColor'),
    emissive: gl.getUniformLocation(sceneProgram, 'u_emissive'),
    lightDirection: gl.getUniformLocation(sceneProgram, 'u_lightDirection'),
    lightColor: gl.getUniformLocation(sceneProgram, 'u_lightColor'),
    ambientColor: gl.getUniformLocation(sceneProgram, 'u_ambientColor'),
    cameraPosition: gl.getUniformLocation(sceneProgram, 'u_cameraPosition'),
    shininess: gl.getUniformLocation(sceneProgram, 'u_shininess'),
    specularStrength: gl.getUniformLocation(sceneProgram, 'u_specularStrength'),
  };
  const thresholdUniforms = {
    source: gl.getUniformLocation(thresholdProgram, 'u_source'),
    resolution: gl.getUniformLocation(thresholdProgram, 'u_resolution'),
    threshold: gl.getUniformLocation(thresholdProgram, 'u_threshold'),
    knee: gl.getUniformLocation(thresholdProgram, 'u_knee'),
  };
  const blurUniforms = {
    source: gl.getUniformLocation(blurProgram, 'u_source'),
    resolution: gl.getUniformLocation(blurProgram, 'u_resolution'),
    texelStep: gl.getUniformLocation(blurProgram, 'u_texelStep'),
    direction: gl.getUniformLocation(blurProgram, 'u_direction'),
  };
  const compositeUniforms = {
    scene: gl.getUniformLocation(compositeProgram, 'u_scene'),
    bloom: [0, 1, 2, 3, 4].map((i) => gl.getUniformLocation(compositeProgram, `u_bloom${i}`)),
    resolution: gl.getUniformLocation(compositeProgram, 'u_resolution'),
    bloomLevels: gl.getUniformLocation(compositeProgram, 'u_bloomLevels'),
    bloomStrength: gl.getUniformLocation(compositeProgram, 'u_bloomStrength'),
    exposure: gl.getUniformLocation(compositeProgram, 'u_exposure'),
  };
  const fxaaUniforms = {
    source: gl.getUniformLocation(fxaaProgram, 'u_source'),
    resolution: gl.getUniformLocation(fxaaProgram, 'u_resolution'),
  };
  const gradeUniforms = {
    source: gl.getUniformLocation(gradeProgram, 'u_source'),
    resolution: gl.getUniformLocation(gradeProgram, 'u_resolution'),
    frame: gl.getUniformLocation(gradeProgram, 'u_frame'),
    chromatic: gl.getUniformLocation(gradeProgram, 'u_chromatic'),
    grain: gl.getUniformLocation(gradeProgram, 'u_grain'),
    vignette: gl.getUniformLocation(gradeProgram, 'u_vignette'),
    dither: gl.getUniformLocation(gradeProgram, 'u_dither'),
  };
  const passthroughUniforms = {
    source: gl.getUniformLocation(passthroughProgram, 'u_source'),
    resolution: gl.getUniformLocation(passthroughProgram, 'u_resolution'),
    gain: gl.getUniformLocation(passthroughProgram, 'u_gain'),
    tonemap: gl.getUniformLocation(passthroughProgram, 'u_tonemap'),
  };

  // --- シーン(第13〜17章の道具をそのまま使っているだけ) ---------------------------
  const floorMesh = createMesh(gl, createPlane(26, 26));
  const torusMesh = createMesh(gl, createTorus(1.55, 0.42, 72, 32));
  const sphereMesh = createMesh(gl, createSphere(0.85, 48, 24));
  const lampMesh = createMesh(gl, createSphere(0.15, 20, 12));

  // 自発光の小球。リニア値で 1 を大きく超える色を入れる。これがブルームの種になる(2 節)
  const LAMP_COLORS: readonly ReadonlyVec3[] = [
    vec3.fromValues(1.0, 0.42, 0.14),
    vec3.fromValues(0.2, 0.62, 1.0),
    vec3.fromValues(0.95, 0.85, 0.25),
    vec3.fromValues(0.85, 0.24, 0.62),
    vec3.fromValues(0.3, 1.0, 0.62),
    vec3.fromValues(0.55, 0.4, 1.0),
  ];
  const LAMP_INTENSITY = 16;
  const LAMP_RADIUS = 2.9;

  const FLOOR_BASE_COLOR: ReadonlyVec3 = vec3.fromValues(0.045, 0.05, 0.06);
  const TORUS_BASE_COLOR: ReadonlyVec3 = vec3.fromValues(0.34, 0.16, 0.09);
  const SPHERE_BASE_COLOR: ReadonlyVec3 = vec3.fromValues(0.55, 0.56, 0.58);
  const NO_EMISSIVE: ReadonlyVec3 = vec3.fromValues(0, 0, 0);

  const backgroundLinear = vec3.fromValues(
    srgbToLinear(BACKGROUND_SRGB[0]),
    srgbToLinear(BACKGROUND_SRGB[1]),
    srgbToLinear(BACKGROUND_SRGB[2]),
  );

  // --- レンダーターゲット -------------------------------------------------------------
  interface BloomLevel {
    a: RenderTarget;
    b: RenderTarget;
  }

  function levelSize(width: number, height: number, index: number): [number, number] {
    // 段 0 が半分。1 ピクセル未満にならないように必ず 1 で止める
    const shift = index + 1;
    return [Math.max(1, width >> shift), Math.max(1, height >> shift)];
  }

  function createLevel(width: number, height: number, index: number): BloomLevel {
    const [w, h] = levelSize(width, height, index);
    const opts = { depth: false, internalFormat: hdrFormat, filter: gl.LINEAR };
    return { a: createRenderTarget(gl, w, h, opts), b: createRenderTarget(gl, w, h, opts) };
  }

  let sceneTarget = createRenderTarget(gl, 1, 1, {
    depth: true, // シーンパスだけは深度が要る
    internalFormat: hdrFormat,
    filter: gl.LINEAR,
  });
  // 合成 → FXAA → 仕上げ を数珠つなぎにするための 2 枚。**中身は sRGB エンコード済みの値**だが、
  // 入れ物は float のまま。8 ビットに落ちるのは画面だけ、という形にしてある(本文 7 節)
  let ldrA = createRenderTarget(gl, 1, 1, {
    depth: false,
    internalFormat: hdrFormat,
    filter: gl.LINEAR,
  });
  let ldrB = createRenderTarget(gl, 1, 1, {
    depth: false,
    internalFormat: hdrFormat,
    filter: gl.LINEAR,
  });
  const levels: BloomLevel[] = [];
  let multisample: MultisampleTarget | null = null;

  /** 描画バッファのサイズと段数に、全 FBO を合わせる */
  function syncTargets(width: number, height: number, levelCount: number): void {
    // resizeRenderTarget は「サイズが違えば新しく作ってから古いものを消す」ので、
    // **戻り値を必ず受け取り直す**(渡したほうは解放済みになっている)
    sceneTarget = resizeRenderTarget(gl, sceneTarget, width, height);
    ldrA = resizeRenderTarget(gl, ldrA, width, height);
    ldrB = resizeRenderTarget(gl, ldrB, width, height);

    while (levels.length > levelCount) {
      const level = levels.pop();
      if (level) {
        deleteRenderTarget(gl, level.a);
        deleteRenderTarget(gl, level.b);
      }
    }
    for (let i = 0; i < levelCount; i++) {
      const [w, h] = levelSize(width, height, i);
      if (i < levels.length) {
        levels[i] = {
          a: resizeRenderTarget(gl, levels[i].a, w, h),
          b: resizeRenderTarget(gl, levels[i].b, w, h),
        };
      } else {
        levels.push(createLevel(width, height, i));
      }
    }

    // MSAA のレンダーバッファは使うときだけ持つ。デモを離れたら解放する
    const wantMultisample = demos[demoIndex].id === 'aa' && state.antialias === 'msaa';
    if (
      multisample &&
      (!wantMultisample || multisample.width !== width || multisample.height !== height)
    ) {
      deleteMultisampleTarget(gl, multisample);
      multisample = null;
    }
    if (wantMultisample && multisample === null && msaaSamples > 0) {
      multisample = createMultisampleTarget(gl, width, height, msaaSamples, hdrFormat);
    }
  }

  /** 中間 FBO の枚数と、カラーアタッチメントの合計バイト数 */
  function targetStats(): { count: number; bytes: number } {
    const rts = [sceneTarget, ldrA, ldrB];
    for (const level of levels) rts.push(level.a, level.b);
    let bytes = 0;
    for (const rt of rts) bytes += rt.width * rt.height * hdrBytesPerPixel;
    let count = rts.length;
    if (multisample) {
      // マルチサンプルのカラーは 1 ピクセルにつきサンプル数だけ持つ
      bytes += multisample.width * multisample.height * hdrBytesPerPixel * multisample.samples;
      count += 1;
    }
    return { count, bytes };
  }

  // --- 状態 -----------------------------------------------------------------------
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);

  let demoIndex = 0;
  let frameNumber = 0;

  // --- 軌道カメラ(第15章。解説はそちらの担当) -------------------------------------
  const orbit = { theta: 0.55, phi: 0.22, radius: 8.2 };
  const PHI_LIMIT = Math.PI / 2 - 0.05;
  const MIN_RADIUS = 3.5;
  const MAX_RADIUS = 20;

  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();
      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 },
  );

  // --- 切替ボタン(第13章の作りをそのまま) ---------------------------------------
  interface OptionButton {
    label: string;
    pressed: () => boolean;
    apply: () => void;
  }

  function currentOptions(): OptionButton[] {
    switch (demos[demoIndex].id) {
      case 'peek':
        return (
          [
            ['シーン', 'scene'],
            ['しきい値', 'threshold'],
            ['ぼかし', 'blur'],
            ['合成', 'composite'],
          ] as [string, PeekStage][]
        ).map(([label, stage]) => ({
          label,
          pressed: () => state.peek === stage,
          apply: () => {
            state.peek = stage;
          },
        }));
      case 'bloom':
        return [
          ...[0.8, 1.5, 3.0].map((value) => ({
            label: `しきい値 ${value.toFixed(1)}`,
            pressed: () => state.threshold === value,
            apply: () => {
              state.threshold = value;
            },
          })),
          ...[1, 3, 5].map((value) => ({
            label: `段数 ${value}`,
            pressed: () => state.levels === value,
            apply: () => {
              state.levels = value;
            },
          })),
        ];
      case 'aa':
        return (
          [
            ['なし', 'none'],
            ['FXAA', 'fxaa'],
            [msaaSamples > 0 ? `MSAA ${msaaSamples}x` : 'MSAA(非対応)', 'msaa'],
          ] as [string, AntialiasMode][]
        ).map(([label, mode]) => ({
          label,
          pressed: () => state.antialias === mode,
          apply: () => {
            if (mode === 'msaa' && msaaSamples === 0) return;
            state.antialias = mode;
          },
        }));
      default: {
        const toggles: [string, 'chromatic' | 'grain' | 'vignette' | 'dither'][] = [
          ['色収差', 'chromatic'],
          ['グレイン', 'grain'],
          ['ビネット', 'vignette'],
          ['ディザ', 'dither'],
        ];
        return toggles.map(([label, key]) => ({
          label,
          pressed: () => state[key],
          apply: () => {
            state[key] = !state[key];
          },
        }));
      }
    }
  }

  function renderOptions(): void {
    options.replaceChildren();
    const items = currentOptions();
    options.hidden = items.length === 0;
    for (const item of items) {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = item.label;
      button.setAttribute('aria-pressed', item.pressed() ? 'true' : 'false');
      button.addEventListener('click', () => {
        item.apply();
        renderOptions();
      });
      options.append(button);
    }
  }

  for (const [index, demo] of demos.entries()) {
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = demo.label;
    button.setAttribute('aria-pressed', index === 0 ? 'true' : 'false');
    button.addEventListener('click', () => {
      demoIndex = index;
      // つまみを既定へ戻す。戻さないと「前のデモで動かしたつまみ」が残る。とくに
      // ブルームの段数はデモ 3 / 4 にボタンが出ないので、戻さないと読み出し行の
      // 中間 FBO の枚数がなぜ変わったのか画面から読み取れなくなる(第35章も同じ扱い)
      Object.assign(state, DEFAULT_STATE);
      for (const other of controls.querySelectorAll('button')) {
        other.setAttribute('aria-pressed', 'false');
      }
      button.setAttribute('aria-pressed', 'true');
      renderOptions();
    });
    controls.append(button);
  }
  renderOptions();

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

  // --- リサイズ -----------------------------------------------------------------
  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 も必ずセットで切り替える。既定値は canvas の初期サイズ(300×150)のまま
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

  // --- シーンパス ---------------------------------------------------------------
  function drawObject(
    mesh: Mesh,
    baseColor: ReadonlyVec3,
    emissive: ReadonlyVec3,
    shininess: number,
    specularStrength: number,
  ): void {
    mat3.normalFromMat4(normalMatrix, model);
    gl.uniformMatrix4fv(sceneUniforms.model, false, model); // transpose は常に false
    gl.uniformMatrix3fv(sceneUniforms.normalMatrix, false, normalMatrix);
    gl.uniform3fv(sceneUniforms.baseColor, baseColor);
    gl.uniform3fv(sceneUniforms.emissive, emissive);
    gl.uniform1f(sceneUniforms.shininess, shininess);
    gl.uniform1f(sceneUniforms.specularStrength, specularStrength);
    gl.bindVertexArray(mesh.vao);
    gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0);
  }

  function drawScene(width: number, height: number, time: number): void {
    gl.clearColor(backgroundLinear[0], backgroundLinear[1], backgroundLinear[2], 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    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);
    // aspect は描画先の幅 / 高さから(第3部の規約)。ここは FBO なので FBO のサイズ
    mat4.perspective(projection, FOVY, width / height, NEAR, FAR);

    gl.useProgram(sceneProgram);
    gl.uniformMatrix4fv(sceneUniforms.view, false, view);
    gl.uniformMatrix4fv(sceneUniforms.projection, false, projection);
    gl.uniform3fv(sceneUniforms.lightDirection, LIGHT_DIRECTION);
    gl.uniform3fv(sceneUniforms.lightColor, LIGHT_COLOR);
    gl.uniform3fv(sceneUniforms.ambientColor, AMBIENT_COLOR);
    gl.uniform3fv(sceneUniforms.cameraPosition, eye);

    mat4.fromTranslation(model, [0, -1.6, 0]);
    mat4.rotateX(model, model, -Math.PI / 2);
    drawObject(floorMesh, FLOOR_BASE_COLOR, NO_EMISSIVE, 24, 0.2);

    mat4.identity(model);
    mat4.rotateY(model, model, time * 0.25);
    mat4.rotateX(model, model, Math.PI / 2 + Math.sin(time * 0.35) * 0.25);
    drawObject(torusMesh, TORUS_BASE_COLOR, NO_EMISSIVE, 96, 1.6);

    mat4.identity(model);
    // 鏡面が 1 を大きく超えるように強めに。この白飛びがブルームの種になる(2 節)
    drawObject(sphereMesh, SPHERE_BASE_COLOR, NO_EMISSIVE, 220, 6.0);

    for (const [index, color] of LAMP_COLORS.entries()) {
      const angle = time * 0.18 + (index / LAMP_COLORS.length) * Math.PI * 2;
      lampPosition[0] = Math.cos(angle) * LAMP_RADIUS;
      lampPosition[1] = Math.sin(angle * 2 + index) * 0.9;
      lampPosition[2] = Math.sin(angle) * LAMP_RADIUS;
      mat4.fromTranslation(model, lampPosition);
      vec3.scale(lampEmissive, color, LAMP_INTENSITY);
      drawObject(lampMesh, NO_EMISSIVE, lampEmissive, 32, 0.0);
    }

    gl.bindVertexArray(null);
  }

  // --- 全画面パスのチェーン -------------------------------------------------------
  interface Pass {
    label: string;
    /** null なら画面(既定のフレームバッファ) */
    target: RenderTarget | null;
    /** 描画先の幅・高さを受け取って、プログラムと uniform を用意する */
    setup: (width: number, height: number) => void;
  }

  function bindSource(
    unit: number,
    texture: WebGLTexture,
    location: WebGLUniformLocation | null,
  ): void {
    gl.activeTexture(gl.TEXTURE0 + unit);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.uniform1i(location, unit);
  }

  function thresholdPass(target: RenderTarget): Pass {
    return {
      label: '抽出',
      target,
      setup: (width, height) => {
        gl.useProgram(thresholdProgram);
        gl.uniform2f(thresholdUniforms.resolution, width, height);
        gl.uniform1f(thresholdUniforms.threshold, state.threshold * thresholdScale);
        // smoothstep の edge0 < edge1 を守るため、幅は必ず正にする(3 節)
        gl.uniform1f(thresholdUniforms.knee, Math.max(0.05, state.threshold * 0.5));
        bindSource(0, sceneTarget.texture, thresholdUniforms.source);
      },
    };
  }

  function blurPass(source: RenderTarget, target: RenderTarget, horizontal: boolean): Pass {
    return {
      label: horizontal ? 'ぼかし(横)' : 'ぼかし(縦)',
      target,
      setup: (width, height) => {
        gl.useProgram(blurProgram);
        gl.uniform2f(blurUniforms.resolution, width, height);
        // 歩幅は**描画先**のテクセル 1 つぶん。ソースのテクセル幅にすると、縮小を兼ねる
        // 横パスだけ歩幅が画面ピクセル換算で半分になって滲みが縦長になる(4 節)
        gl.uniform2f(blurUniforms.texelStep, 1 / target.width, 1 / target.height);
        gl.uniform2f(blurUniforms.direction, horizontal ? 1 : 0, horizontal ? 0 : 1);
        bindSource(0, source.texture, blurUniforms.source);
      },
    };
  }

  function compositePass(target: RenderTarget | null, bloomLevels: number): Pass {
    return {
      label: '合成',
      target,
      setup: (width, height) => {
        gl.useProgram(compositeProgram);
        gl.uniform2f(compositeUniforms.resolution, width, height);
        gl.uniform1i(compositeUniforms.bloomLevels, bloomLevels);
        gl.uniform1f(compositeUniforms.bloomStrength, BLOOM_STRENGTH);
        gl.uniform1f(compositeUniforms.exposure, EXPOSURE);
        bindSource(0, sceneTarget.texture, compositeUniforms.scene);
        // 使わない段のサンプラにも、有効なテクスチャを結んでおく。不完全なテクスチャを
        // 読んでもエラーにはならず、黙って (0, 0, 0, 1) が返るだけ(ES 3.0.6 §3.9.2)なので、
        // 結び忘れは「絵が変わらない不具合」になって気づきにくい
        for (let i = 0; i < MAX_BLOOM_LEVELS; i++) {
          const level = levels[Math.min(i, Math.max(0, levels.length - 1))];
          bindSource(1 + i, level.a.texture, compositeUniforms.bloom[i]);
        }
      },
    };
  }

  function fxaaPass(source: RenderTarget, target: RenderTarget | null): Pass {
    return {
      label: 'FXAA',
      target,
      setup: (width, height) => {
        gl.useProgram(fxaaProgram);
        gl.uniform2f(fxaaUniforms.resolution, width, height);
        bindSource(0, source.texture, fxaaUniforms.source);
      },
    };
  }

  function gradePass(source: RenderTarget, target: RenderTarget | null): Pass {
    return {
      label: '仕上げ',
      target,
      setup: (width, height) => {
        gl.useProgram(gradeProgram);
        gl.uniform2f(gradeUniforms.resolution, width, height);
        gl.uniform1i(gradeUniforms.frame, frameNumber);
        gl.uniform1f(gradeUniforms.chromatic, state.chromatic ? 3.0 : 0.0);
        gl.uniform1f(gradeUniforms.grain, state.grain ? 0.045 : 0.0);
        gl.uniform1f(gradeUniforms.vignette, state.vignette ? 0.55 : 0.0);
        gl.uniform1f(gradeUniforms.dither, state.dither ? 1.0 : 0.0);
        bindSource(0, source.texture, gradeUniforms.source);
      },
    };
  }

  function passthroughPass(source: RenderTarget, tonemap: boolean, gain: number): Pass {
    return {
      label: '覗き見',
      target: null,
      setup: (width, height) => {
        gl.useProgram(passthroughProgram);
        gl.uniform2f(passthroughUniforms.resolution, width, height);
        gl.uniform1f(passthroughUniforms.gain, gain);
        gl.uniform1f(passthroughUniforms.tonemap, tonemap ? 1 : 0);
        bindSource(0, source.texture, passthroughUniforms.source);
      },
    };
  }

  /** 段 i のぼかし 2 本。入力は段 0 なら抽出の結果、それ以外は 1 つ上の段の結果 */
  function blurPassesFor(index: number): Pass[] {
    const source = index === 0 ? levels[0].a : levels[index - 1].a;
    return [
      // 段 1 以降は横パスがそのまま縮小も兼ねる(描画先が半分なので LINEAR が 2×2 を平均する)。
      // 段 0 のソースは抽出の結果で、すでに半分の解像度なので縮小は起きない
      blurPass(source, levels[index].b, true),
      blurPass(levels[index].b, levels[index].a, false),
    ];
  }

  /** この 1 フレームで走らせるパスの並びを組み立てる。デモの違いはここに全部出る */
  function buildPasses(): Pass[] {
    const demo = demos[demoIndex];
    const passes: Pass[] = [];
    const levelCount = levels.length;

    if (demo.id === 'peek') {
      // 覗くところでチェーンを打ち切る。パス数がそのまま変わるのが読み出し行に出る
      if (state.peek === 'scene') {
        return [passthroughPass(sceneTarget, true, 1.0)];
      }
      passes.push(thresholdPass(levels[0].a));
      if (state.peek === 'threshold') {
        return [...passes, passthroughPass(levels[0].a, true, 1.0)];
      }
      for (let i = 0; i < levelCount; i++) passes.push(...blurPassesFor(i));
      if (state.peek === 'blur') {
        return [...passes, passthroughPass(levels[0].a, true, 1.0)];
      }
      passes.push(compositePass(ldrA, levelCount));
      return [...passes, passthroughPass(ldrA, false, 1.0)];
    }

    passes.push(thresholdPass(levels[0].a));
    for (let i = 0; i < levelCount; i++) passes.push(...blurPassesFor(i));

    if (demo.id === 'bloom') {
      passes.push(compositePass(null, levelCount));
      return passes;
    }
    if (demo.id === 'aa') {
      if (state.antialias === 'fxaa') {
        passes.push(compositePass(ldrA, levelCount));
        passes.push(fxaaPass(ldrA, null));
      } else {
        // 「なし」も「MSAA」も後段は同じ。MSAA はシーンパスの側で効いている
        passes.push(compositePass(null, levelCount));
      }
      return passes;
    }
    // 仕上げ: 合成 → FXAA → 色収差・グレイン・ビネット・ディザ
    passes.push(compositePass(ldrA, levelCount));
    passes.push(fxaaPass(ldrA, ldrB));
    passes.push(gradePass(ldrB, null));
    return passes;
  }

  // --- 読み出し行 -----------------------------------------------------------------
  // この章は時間を測らない。ポストプロセスのコストは「何ピクセルを何回読んで何回書くか」で
  // ほぼ決まるので、数えられる量だけを出す。GPU 時間・rAF 間隔の読み方は第35章

  /** 画面 1 ピクセルあたりのテクスチャ読み取り回数。段は面積が 1/4 ずつ減る */
  function textureReadsPerPixel(passes: Pass[]): number {
    let total = 0;
    for (const pass of passes) {
      const width = pass.target ? pass.target.width : gl.drawingBufferWidth;
      const height = pass.target ? pass.target.height : gl.drawingBufferHeight;
      const area = (width * height) / (gl.drawingBufferWidth * gl.drawingBufferHeight);
      let taps = 1;
      if (pass.label.startsWith('ぼかし')) taps = BLUR_TAPS;
      else if (pass.label === '合成') taps = 1 + levels.length;
      // FXAA は最悪の場合: 十字 5 + 角 4 + 探索 2 × 歩数 + 再サンプル 1
      else if (pass.label === 'FXAA') taps = 5 + 4 + 2 * FXAA_SEARCH_STEPS + 1;
      else if (pass.label === '仕上げ') taps = state.chromatic ? 3 : 1;
      total += taps * area;
    }
    return total;
  }

  let lastReadoutAt = 0;

  function updateReadout(passes: Pass[]): void {
    const demo = demos[demoIndex];
    const stats = targetStats();
    const pixels = gl.drawingBufferWidth * gl.drawingBufferHeight;
    const mib = stats.bytes / (1024 * 1024);
    // multisample が非 null なのは「デモ 3 で MSAA を選べた」ときだけ。
    // 使えない環境では apply() が state.antialias を 'msaa' にしないので、
    // 読者が見るのはボタンのラベル `MSAA(非対応)` のほうになる(本文 5 節)
    const msaaNote = multisample
      ? ` / MSAA ${multisample.samples}x のレンダーバッファ 1 枚を blitFramebuffer で解決`
      : '';
    readout.textContent =
      `${demo.note} / パス ${passes.length + 1} 本(シーン 1 + 全画面 ${passes.length}) / ` +
      `中間 FBO ${stats.count} 枚・カラーの合計 ${stats.bytes.toLocaleString('en-US')} B ` +
      `= ${mib.toFixed(1)} MiB(${hdrFormatName} = 4 成分 × ${hdrBytesPerPixel / 4} バイト) / ` +
      `画面 1 px あたりのテクスチャ読み取り ${textureReadsPerPixel(passes).toFixed(2)} 回 / ` +
      `描画バッファ ${gl.drawingBufferWidth}×${gl.drawingBufferHeight} = ` +
      `${pixels.toLocaleString('en-US')} px${msaaNote}`;
  }

  // --- 描画ループ -----------------------------------------------------------------
  function frame(timestamp: DOMHighResTimeStamp): void {
    resizeIfNeeded();
    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;
    syncTargets(width, height, state.levels);
    const time = timestamp / 1000;
    // grade.frag は u_frame に定数を掛けて座標をずらすので、その掛け算が 32 ビットに
    // 収まる範囲で折り返しておく(GLSL ES 3.00 §4.1.3 は overflow も「下位 n ビットへ
    // 折り返す」と定めているので壊れはしないが、追える形にしておく)。
    // それでも 32767 は軽く超えるので、grade.frag 側は precision highp int が要る(第29章 2 節)
    frameNumber = (frameNumber + 1) % 65536;

    // --- シーンパス。MSAA のときだけレンダーバッファへ描いて解決する ----------------
    if (multisample) {
      gl.bindFramebuffer(gl.FRAMEBUFFER, multisample.framebuffer);
      gl.viewport(0, 0, multisample.width, multisample.height);
      drawScene(multisample.width, multisample.height, time);
      // マルチサンプルの束を 1 枚の絵に解決してテクスチャへ移す。
      // 読み側と書き側で形式が違ったり、矩形の大きさが違ったりすると INVALID_OPERATION
      // (ES 3.0.6 §4.3.3)。ここは同じ RGBA16F・同じ矩形
      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, multisample.framebuffer);
      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, sceneTarget.framebuffer);
      gl.blitFramebuffer(
        0,
        0,
        multisample.width,
        multisample.height,
        0,
        0,
        sceneTarget.width,
        sceneTarget.height,
        gl.COLOR_BUFFER_BIT,
        gl.NEAREST, // 解決のときは filter は無視される(§4.3.3)
      );
      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
    } else {
      bindRenderTarget(gl, sceneTarget);
      drawScene(sceneTarget.width, sceneTarget.height, time);
    }

    // --- 全画面パスのチェーン。並べた配列を 1 本のループで流すだけ -------------------
    const passes = buildPasses();
    // 全画面三角形は深度を持たないし、書き潰すだけなので深度テストは切る
    gl.disable(gl.DEPTH_TEST);
    for (const pass of passes) {
      bindRenderTarget(gl, pass.target); // viewport も一緒に切り替わる(第20章)
      const targetWidth = pass.target ? pass.target.width : gl.drawingBufferWidth;
      const targetHeight = pass.target ? pass.target.height : gl.drawingBufferHeight;
      pass.setup(targetWidth, targetHeight);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    }
    gl.enable(gl.DEPTH_TEST);

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

  // このページのデモはページと寿命を共にするので、rAF ループの停止もリスナーの解除も
  // していない。GPU リソース解放の一般論は第35章 7 節(この章は「作り直すときに古いものを
  // 消す」ぶんだけを resizeRenderTarget / deleteRenderTarget / deleteMultisampleTarget で
  // 実践している)
  requestAnimationFrame(frame);
}

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

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

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

setup(gl, canvas, controls, optionControls, readout);