フィードバック

    // --- 更新パス: 前の状態を読み、新しい状態を書き、役を入れ替える -----------
    gl.useProgram(simProgram);
    stepBudget += stepsPerFrame;
    while (stepBudget >= 1) {
      stepBudget -= 1;
      // 描画先を write に切り替える(viewport も一緒に切り替わる)
      bindRenderTarget(gl, write);

      // サンプルするのは read。描画先は write。この 2 つが同じテクスチャに
      // なると WebGL は INVALID_OPERATION を返す(本文 1 節)。
      // バインドは必ず drawArrays の直前にやり直す — 役の交代でずれるため
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, read.texture);
      gl.drawArrays(gl.TRIANGLES, 0, 3);

      const swapped = read;
      read = write;
      write = swapped;
      frame++;
    }

    // --- 表示パス: いちばん新しい状態(= read)を画面へ ------------------------
    bindRenderTarget(gl, null);
    gl.useProgram(showProgram);
    gl.uniform1f(showTime, time);
    gl.uniform2f(showResolution, gl.drawingBufferWidth, gl.drawingBufferHeight);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, read.texture);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

  if (u_frame == 0) {
    // 1 ステップ目には前の状態が無い。真っ暗から始める
    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
    return;
  }

export interface FeedbackOptions {
  /**
   * 状態テクスチャの 1 セルが、描画バッファの何ピクセルにあたるか(既定 1)。
   * 2 以上にすると状態の解像度が画面より粗くなる。ライフゲームのようにセルを
   * 目で数えたい場合と、更新コストを下げたい場合に使う
   */
  cellSize?: number;
  /**
   * 1 フレームあたりの更新パスの回数(既定 1)。
   * 1 より大きくすると 1 フレームで何ステップも進む(リアクション・ディフュージョン)。
   * 1 未満なら数フレームに 1 回になる(0.2 なら 5 フレームに 1 回 = 毎秒 12 世代)
   */
  stepsPerFrame?: number;
  /** devicePixelRatio の上限(既定 2)。負荷を抑えたいときは 1 に下げる */
  maxDpr?: number;
}

  function createState(width: number, height: number): RenderTarget {
    return createRenderTarget(gl, width, height, {
      depth: false,
      filter: gl.NEAREST,
      internalFormat: stateFormat.internalFormat,
    });
  }

  // 更新パスの uniform。u_resolution は「状態テクスチャの解像度」
  const simPrev = gl.getUniformLocation(simProgram, 'u_prev');
  const simResolution = gl.getUniformLocation(simProgram, 'u_resolution');

  ivec2 stateSize = textureSize(u_state, 0);
  ivec2 cell = screenToCell(gl_FragCoord.xy, u_resolution, stateSize);

    read = resizeRenderTarget(gl, read, width, height);
    write = resizeRenderTarget(gl, write, width, height);
    frame = 0;
    stepBudget = 1;

      deleteRenderTarget(gl, read);
      deleteRenderTarget(gl, write);
      gl.deleteProgram(simProgram);
      gl.deleteProgram(showProgram);

  if (gl.getExtension('EXT_color_buffer_float')) {
    return { internalFormat: gl.RGBA16F, label: 'RGBA16F (EXT_color_buffer_float)' };
  }
  // 32 ビットに描けない端末のための拡張。RGBA16F への描画は実装に必須(第20章 8 節)
  if (gl.getExtension('EXT_color_buffer_half_float')) {
    return { internalFormat: gl.RGBA16F, label: 'RGBA16F (EXT_color_buffer_half_float)' };
  }

ivec2 wrapCell(ivec2 cell, ivec2 size) {
  return (cell + size) % size;
}

// 説明用: texture() で前フレームを読む書き方と、texelFetch との対応
vec2 uv = (gl_FragCoord.xy) / u_resolution;          // 中心を指す(第7章)
vec2 bad = (floor(gl_FragCoord.xy)) / u_resolution;  // 半テクセル手前を指す
vec3 a = texture(u_prev, uv).rgb;                    // フィルタとラップを通る
vec3 b = texelFetch(u_prev, ivec2(gl_FragCoord.xy), 0).rgb; // どちらも通らない

  // ① 前の状態を少しだけ暗くする
  vec3 next = prev * DECAY;

  // 足し算はリニア空間で(第27章 4 節)。背景も光もリニアの量として扱う
  vec3 color = srgbToLinear(BACKGROUND) + glow;

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

#version 300 es

// 第29章 デモ1 更新パス: トレイル(残像)。
// 前の状態を少しだけ暗くして、そこに新しい光を足す。それだけ。
//   next = prev * DECAY + brush
// 隣のセルを読まないので、この更新パスだけは近傍もラップも要らない。
//
// ポインタ: 光る点がついてくる。動かすと軌跡が残る(未操作のあいだは画面中央)。
// 自動で動く点(リサージュ図形)も 1 つ走っていて、こちらは常に軌跡を描く。

precision highp float;
// u_frame を 32 ビットで受けるため。フラグメントシェーダーの int の既定精度は mediump で、
// mediump の符号付き整数の保証は [-2^15, 2^15 - 1] しかない(GLSL ES 3.00 §4.5.1)。
// 毎秒 60 ステップだと 9 分ほどで越えてしまう。同じ構図の話は第25章 3 節
precision highp int;

// 状態テクスチャは float。値が 0〜1 に収まらないので highp を明示する(第21章 6 節)。
// 既定は lowp sampler2D で、texture() / texelFetch() の戻り値もその精度になる
uniform highp sampler2D u_prev;
// この 3 つは「状態テクスチャの」解像度と座標系。画面の解像度ではない(本文 4 節)
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// 更新パスの通し番号。0 なら前の状態が無いので、初期化に使う
uniform int u_frame;

out vec4 fragColor;

// ---- 書き換えて試すための定数 ----------------------------------------
// 1 ステップで前の状態に掛ける倍率。1.0 に近いほど尾が長い
const float DECAY = 0.955;
// ブラシの半径(状態テクスチャのセル)
const float BRUSH_RADIUS = 14.0;
// ブラシが 1 ステップで足す量。ブラシを止めたときの明るさは
// BRUSH_GAIN / (1 - DECAY) = 13.3 まで上がり、表示側の clamp で白く飛ぶ
const float BRUSH_GAIN = 0.6;
// 自動で動く点の速さ
const float ORBIT_SPEED = 0.55;
// ブラシの色。sRGB のコード値ではなく「光の量」の比として、リニアで書いている
// (第27章 3 節。単位のない 0〜1 はリニア値として扱うと決める)
const vec3 ORBIT_COLOR = vec3(0.30, 0.60, 1.00);
const vec3 POINTER_COLOR = vec3(1.00, 0.52, 0.20);
// ----------------------------------------------------------------------

/** 中心 center に、ふちがぼける光を置く。戻り値は「足す量」 */
vec3 brush(vec2 pixel, vec2 center, vec3 color) {
  float d = length(pixel - center) / BRUSH_RADIUS;
  return color * BRUSH_GAIN * exp(-4.0 * d * d);
}

void main() {
  if (u_frame == 0) {
    // 1 ステップ目には前の状態が無い。真っ暗から始める
    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
    return;
  }

  // 更新パスの viewport は状態テクスチャそのものなので、
  // gl_FragCoord はそのままセルの座標になる。整数に落として texelFetch へ
  ivec2 cell = ivec2(gl_FragCoord.xy);
  vec3 prev = texelFetch(u_prev, cell, 0).rgb;

  // ① 前の状態を少しだけ暗くする
  vec3 next = prev * DECAY;

  // ② 新しい光を足す
  vec2 orbit = 0.5 * u_resolution
    + 0.34 * u_resolution * vec2(sin(u_time * ORBIT_SPEED), sin(u_time * ORBIT_SPEED * 1.37 + 1.1));
  next += brush(gl_FragCoord.xy, orbit, ORBIT_COLOR);
  next += brush(gl_FragCoord.xy, u_mouse, POINTER_COLOR);

  fragColor = vec4(next, 1.0);
}

  // 近傍 8 セルを数える。texelFetch なのでフィルタも正規化座標も経由しない
  int neighbours = 0;
  for (int j = -1; j <= 1; j++) {
    for (int i = -1; i <= 1; i++) {
      if (i == 0 && j == 0) {
        continue; // 自分は数えない
      }
      float n = texelFetch(u_prev, wrapCell(cell + ivec2(i, j), size), 0).r;
      neighbours += n > 0.5 ? 1 : 0;
    }
  }

  bool alive = texelFetch(u_prev, cell, 0).r > 0.5;
  bool born = neighbours == BIRTH;
  bool survives = alive && neighbours >= SURVIVE_MIN && neighbours <= SURVIVE_MAX;

#version 300 es

// 第29章 デモ2 更新パス: ライフゲーム (Conway's Game of Life)。
// ルールが世に出た記事: Martin Gardner, "Mathematical Games",
//   Scientific American 223(4), October 1970, pp.120-123.
//   DOI 10.1038/scientificamerican1070-120
//
// 状態は 1 セルにつき「生きているか」の 1 ビットだけ。それを float テクスチャの
// r 成分に 0.0 / 1.0 で入れている。g 成分には 1 つ前の世代を残しておき、
// 表示パスで「たったいま死んだセル」を薄く光らせるのに使う。

precision highp float;
// hash.glsl のため(理由は第25章 3 節)。理由はもう 1 つあって、下の u_frame も
// mediump では足りない(符号付き整数の保証は 32767 まで)。この行を消すと両方壊れる
precision highp int;

// float テクスチャを読むサンプラには highp を明示する(第21章 6 節)。既定は lowp。
// ライフゲームの状態は 0 か 1 だけなので lowp でも足りるが、章の 6 本で揃えている。
// 精度が本当に効くのは 03-reaction.sim.frag のほう
uniform highp sampler2D u_prev;
uniform vec2 u_resolution; // 状態テクスチャ = 格子の解像度
uniform int u_frame;

out vec4 fragColor;

#include "hash.glsl"
#include "grid.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 初期配置で生きているセルの割合
const float SEED_DENSITY = 0.28;
// ルール。標準のライフゲームは「生存 2〜3・誕生 3」(B3/S23)
const int SURVIVE_MIN = 2;
const int SURVIVE_MAX = 3;
const int BIRTH = 3;
// ----------------------------------------------------------------------

void main() {
  ivec2 size = ivec2(u_resolution);
  ivec2 cell = ivec2(gl_FragCoord.xy);

  if (u_frame == 0) {
    // 初期配置。セルの番地から直接乱数を引く(第25章のハッシュ)。
    // 前の状態を一切見ないので、1 ステップ目でも問題なく決まる
    float alive = hash21(cell) < SEED_DENSITY ? 1.0 : 0.0;
    fragColor = vec4(alive, 0.0, 0.0, 1.0);
    return;
  }

  // 近傍 8 セルを数える。texelFetch なのでフィルタも正規化座標も経由しない
  int neighbours = 0;
  for (int j = -1; j <= 1; j++) {
    for (int i = -1; i <= 1; i++) {
      if (i == 0 && j == 0) {
        continue; // 自分は数えない
      }
      float n = texelFetch(u_prev, wrapCell(cell + ivec2(i, j), size), 0).r;
      neighbours += n > 0.5 ? 1 : 0;
    }
  }

  bool alive = texelFetch(u_prev, cell, 0).r > 0.5;
  bool born = neighbours == BIRTH;
  bool survives = alive && neighbours >= SURVIVE_MIN && neighbours <= SURVIVE_MAX;

  // r = 新しい世代 / g = 1 つ前の世代(表示で余韻として使う)
  fragColor = vec4((born || survives) ? 1.0 : 0.0, alive ? 1.0 : 0.0, 0.0, 1.0);
}

vec2 laplacian(ivec2 cell, ivec2 size) {
  vec2 sum = vec2(0.0);
  for (int j = -1; j <= 1; j++) {
    for (int i = -1; i <= 1; i++) {
      float weight;
      if (i == 0 && j == 0) {
        weight = -1.0;
      } else if (i == 0 || j == 0) {
        weight = 0.2;
      } else {
        weight = 0.05;
      }
      sum += weight * texelFetch(u_prev, wrapCell(cell + ivec2(i, j), size), 0).rg;
    }
  }
  return sum;
}

  // U + 2V → 3V の反応。U を 1 つ食って V が 1 つ増える
  float reaction = u * v * v;
  float nextU = u + DT * (DU * lap.x - reaction + f * (1.0 - u));
  float nextV = v + DT * (DV * lap.y + reaction - (f + k) * v);

    // 模様ができるまでに 1000 ステップ以上かかるので、1 フレームで 8 回進める。
    // 1 セル = 3 ピクセルにしているのは、更新の回数が 8 倍あるぶんの節約
    options: { cellSize: 3, stepsPerFrame: 8 },

    // Pearson の初期条件と同じ組み立て: 全体を (U, V) = (1, 0) にしてから、
    // 一部を (0.5, 0.25) に乱し、さらに ±1% の乱数で正方形の対称性を崩す
    bool seeded = hash21(cell / SEED_BLOCK) < SEED_RATIO;
    float jitter = 1.0 + 0.01 * (hash21(cell) - 0.5) * 2.0;

#version 300 es

// 第29章 デモ3 更新パス: リアクション・ディフュージョン(Gray-Scott モデル)。
//
// 元の式(出典: John E. Pearson, "Complex Patterns in a Simple System",
//   Science 261(5118), 1993, pp.189-192. DOI 10.1126/science.261.5118.189。
//   本文は arXiv:patt-sol/9304003 で読める):
//
//   ∂U/∂t = Du ∇²U − U V² + F (1 − U)
//   ∂V/∂t = Dv ∇²V + U V² − (F + k) V
//
// これを前進オイラー法で 1 ステップずつ進める。∇² は下の 3×3 の重みで近似する。
// U と V の 2 つの濃度を、状態テクスチャの r 成分と g 成分に入れている。
//
// ポインタ: 左右で k、上下で F。この 2 つで模様がまるごと変わる。

precision highp float;
// hash.glsl のため(理由は第25章 3 節)。理由はもう 1 つあって、下の u_frame も
// mediump では足りない(符号付き整数の保証は 32767 まで)。この行を消すと両方壊れる
precision highp int;

// float テクスチャを読むサンプラには highp を明示する(第21章 6 節)。既定は lowp で、
// 絶対精度の保証は 2⁻⁸ = 3.9e-3 しかない。模様が落ち着いたあとの 1 ステップの変化は
// |ΔV| ≈ 2e-3 でそれより細かいので、状態が 0〜1 に収まっていても lowp では足りない
uniform highp sampler2D u_prev;
uniform vec2 u_resolution; // 状態テクスチャ = 格子の解像度
uniform vec2 u_mouse;      // 状態テクスチャの座標系
uniform int u_frame;

out vec4 fragColor;

#include "hash.glsl"
#include "grid.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// U と V の拡散の速さ。比が 2:1 なのは Pearson の Du = 2e-5 / Dv = 1e-5 と同じ。
// 絶対値のほうは格子の刻みと時間刻みに依存する量で、この値は Karl Sims
// (karlsims.com/rd.html) の実装が使っているもの
const float DU = 1.0;
const float DV = 0.5;
// 1 ステップの時間刻み。DT * DU が 1.25 を超えると発散する(本文 7 節)
const float DT = 1.0;
// 初期配置: 一辺 SEED_BLOCK セルのブロック単位で、SEED_RATIO の割合に種を置く。
// ブロックが小さすぎると種は育たずに消える(本文 7 節の実測)
const int SEED_BLOCK = 8;
const float SEED_RATIO = 0.08;
// 種を絶やさないための固定のブロック(番地)。模様が死ぬパラメータへ行っても、
// 戻ってくればここから生え直す
const int PIN_X = 3;
const int PIN_Y = 3;
// ポインタが動かす範囲。Karl Sims の (k, F) の地図が k = .045〜.07 /
// F = .01〜.1 を張っているうちの、模様が出る三日月形に沿った帯
const float K_MIN = 0.052;
const float K_MAX = 0.064;
const float F_BASE = 0.020;
const float F_SLOPE = 3.0;
const float F_SPREAD = 0.020;
// ----------------------------------------------------------------------

/**
 * ラプラシアン ∇² の 3×3 近似。中心 −1・上下左右 0.2・斜め 0.05。
 * これは標準的な 9 点ラプラシアン ∇² ≈ (1/6h²)·[[1,4,1],[4,−20,4],[1,4,1]] の
 * 係数行列だけを 20 で割ったもので、前係数 1/(6h²) は落としている。だから
 * この重み付き和は ∇² の (3/10)h² 倍 — 逆に言えば ∇² ≈ (10/3)·(重み付き和)/h²。
 * 落とした前係数のぶんは DU / DV が吸う(本文 7 節)。
 * U と V を同時に計算するので、戻り値は vec2(∇²U, ∇²V)。
 */
vec2 laplacian(ivec2 cell, ivec2 size) {
  vec2 sum = vec2(0.0);
  for (int j = -1; j <= 1; j++) {
    for (int i = -1; i <= 1; i++) {
      float weight;
      if (i == 0 && j == 0) {
        weight = -1.0;
      } else if (i == 0 || j == 0) {
        weight = 0.2;
      } else {
        weight = 0.05;
      }
      sum += weight * texelFetch(u_prev, wrapCell(cell + ivec2(i, j), size), 0).rg;
    }
  }
  return sum;
}

void main() {
  ivec2 size = ivec2(u_resolution);
  ivec2 cell = ivec2(gl_FragCoord.xy);

  if (u_frame == 0) {
    // Pearson の初期条件と同じ組み立て: 全体を (U, V) = (1, 0) にしてから、
    // 一部を (0.5, 0.25) に乱し、さらに ±1% の乱数で正方形の対称性を崩す
    bool seeded = hash21(cell / SEED_BLOCK) < SEED_RATIO;
    float jitter = 1.0 + 0.01 * (hash21(cell) - 0.5) * 2.0;
    fragColor = vec4((seeded ? 0.5 : 1.0) * jitter, (seeded ? 0.25 : 0.0) * jitter, 0.0, 1.0);
    return;
  }

  // ポインタから F と k を作る。x で k、y で F の帯の中の位置
  float mx = clamp(u_mouse.x / u_resolution.x, 0.0, 1.0);
  float my = clamp(u_mouse.y / u_resolution.y, 0.0, 1.0);
  float k = mix(K_MIN, K_MAX, mx);
  float f = F_BASE + (k - K_MIN) * F_SLOPE + (my - 0.5) * F_SPREAD;

  vec2 state = texelFetch(u_prev, cell, 0).rg;
  vec2 lap = laplacian(cell, size);
  float u = state.x;
  float v = state.y;

  // U + 2V → 3V の反応。U を 1 つ食って V が 1 つ増える
  float reaction = u * v * v;
  float nextU = u + DT * (DU * lap.x - reaction + f * (1.0 - u));
  float nextV = v + DT * (DV * lap.y + reaction - (f + k) * v);

  ivec2 block = cell / SEED_BLOCK;
  if (block.x == PIN_X && block.y == PIN_Y) {
    nextU = min(nextU, 0.5);
    nextV = max(nextV, 0.25);
  }

  // わざと clamp していない。DT を上げたときに発散するのが見えるようにするため
  fragColor = vec4(nextU, nextV, 0.0, 1.0);
}

// 第29章 章ローカルのハーネス: ping-pong する 2 枚の FBO で「前フレームの状態」を読む
//
// 第4部のデモはここまで src/lib/fullscreen-shader.ts の startFullscreenShader だけで
// 書いてきた。あれは「フラグメントシェーダー 1 本を、毎フレーム画面へ」という形に
// 特化していて、この章がやりたいことは 3 か所でその前提から外れる。
//   (a) 描画先が画面ではなく FBO
//   (b) パスが 1 本ではなく 2 本(状態を更新するパスと、状態を絵にするパス)
//   (c) 「前フレームの状態」というテクスチャの uniform が要る
// これはオプションで足せる差ではなく前提そのものの違いなので、共通ハーネスに手を
// 入れるのではなく、章ローカルの別のハーネスにした(判断の筋は本文 3 節)。
//
// 再利用しているもの:
//   src/lib/shader.ts      … compileShader / linkProgram(第3章 → 第6章で共通化)
//   src/lib/framebuffer.ts … createRenderTarget / bindRenderTarget /
//                            resizeRenderTarget / deleteRenderTarget(第20章)
//   src/lib/fullscreen.vert … gl_VertexID で作る全画面三角形(第6章)
// リサイズ・時間・ポインタの扱いは fullscreen-shader.ts をそのまま踏襲している。

import {
  bindRenderTarget,
  createRenderTarget,
  deleteRenderTarget,
  type RenderTarget,
  resizeRenderTarget,
} from '../../lib/framebuffer';
import vertexSource from '../../lib/fullscreen.vert?raw';
import { compileShader, linkProgram } from '../../lib/shader';

export interface FeedbackOptions {
  /**
   * 状態テクスチャの 1 セルが、描画バッファの何ピクセルにあたるか(既定 1)。
   * 2 以上にすると状態の解像度が画面より粗くなる。ライフゲームのようにセルを
   * 目で数えたい場合と、更新コストを下げたい場合に使う
   */
  cellSize?: number;
  /**
   * 1 フレームあたりの更新パスの回数(既定 1)。
   * 1 より大きくすると 1 フレームで何ステップも進む(リアクション・ディフュージョン)。
   * 1 未満なら数フレームに 1 回になる(0.2 なら 5 フレームに 1 回 = 毎秒 12 世代)
   */
  stepsPerFrame?: number;
  /** devicePixelRatio の上限(既定 2)。負荷を抑えたいときは 1 に下げる */
  maxDpr?: number;
}

export interface FeedbackHandle {
  /** 描画ループを止め、リスナーを外し、FBO とプログラムを解放する */
  stop: () => void;
  /** 実際に使われた状態テクスチャの形式(読み出し行に出すため) */
  stateFormat: string;
}

/** 状態テクスチャの形式を決める。float に「描く」には拡張が要る(第20章 8 節) */
function chooseStateFormat(gl: WebGL2RenderingContext): {
  internalFormat: GLenum;
  label: string;
} {
  // RGBA16F を第一希望にする。0〜1 の外の値を持てて(本文 4 節)、
  // OpenGL ES 3.0 の Table 3.13 で texture-filterable が付いている形式でもある
  if (gl.getExtension('EXT_color_buffer_float')) {
    return { internalFormat: gl.RGBA16F, label: 'RGBA16F (EXT_color_buffer_float)' };
  }
  // 32 ビットに描けない端末のための拡張。RGBA16F への描画は実装に必須(第20章 8 節)
  if (gl.getExtension('EXT_color_buffer_half_float')) {
    return { internalFormat: gl.RGBA16F, label: 'RGBA16F (EXT_color_buffer_half_float)' };
  }
  // どちらも無ければ 8 ビットへ落とす。動くが、トレイルの減衰は途中で止まり、
  // リアクション・ディフュージョンは「書いた式とは別の系」の模様になる(本文 4 節)
  return { internalFormat: gl.RGBA8, label: 'RGBA8 (float バッファの拡張なし)' };
}

export function startFeedback(
  canvas: HTMLCanvasElement,
  simSource: string,
  showSource: string,
  options: FeedbackOptions = {},
): FeedbackHandle {
  const cellSize = Math.max(1, Math.floor(options.cellSize ?? 1));
  const stepsPerFrame = options.stepsPerFrame ?? 1;
  const maxDpr = options.maxDpr ?? 2;

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

  // 2 本のプログラム。頂点シェーダーは同じソースだが、シェーダーオブジェクトは
  // 別々にコンパイルする — linkProgram はリンク後に deleteShader するので、
  // 1 つのオブジェクトを 2 つのプログラムで使い回すことはできない
  const simProgram = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, simSource),
  );
  const showProgram = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, showSource),
  );

  // 更新パスの uniform。u_resolution は「状態テクスチャの解像度」
  const simPrev = gl.getUniformLocation(simProgram, 'u_prev');
  const simResolution = gl.getUniformLocation(simProgram, 'u_resolution');
  const simMouse = gl.getUniformLocation(simProgram, 'u_mouse');
  const simTime = gl.getUniformLocation(simProgram, 'u_time');
  const simFrame = gl.getUniformLocation(simProgram, 'u_frame');

  // 表示パスの uniform。u_resolution は「画面の解像度」— 更新パスとは別物
  const showState = gl.getUniformLocation(showProgram, 'u_state');
  const showResolution = gl.getUniformLocation(showProgram, 'u_resolution');
  // 表示パスも u_time を受け取れるようにしてある。この章の 3 本は宣言していないので
  // ロケーションは null で、null 相手の uniform1f は仕様どおり無視される(第4章 2 節)
  const showTime = gl.getUniformLocation(showProgram, 'u_time');

  // サンプラはどちらのパスもテクスチャユニット 0 を見る(第16章)。
  // 一度設定すればプログラムの状態として残る
  gl.useProgram(simProgram);
  gl.uniform1i(simPrev, 0);
  gl.useProgram(showProgram);
  gl.uniform1i(showState, 0);

  const stateFormat = chooseStateFormat(gl);

  /** 状態を 1 枚作る。深度は要らない。フィルタは必ず NEAREST(本文 4 節) */
  function createState(width: number, height: number): RenderTarget {
    return createRenderTarget(gl, width, height, {
      depth: false,
      filter: gl.NEAREST,
      internalFormat: stateFormat.internalFormat,
    });
  }

  function stateWidth(): number {
    return Math.max(1, Math.ceil(gl.drawingBufferWidth / cellSize));
  }
  function stateHeight(): number {
    return Math.max(1, Math.ceil(gl.drawingBufferHeight / cellSize));
  }

  // 毎フレーム先頭でサイズを確認し、変わっていたときだけ描画バッファを作り直す
  // (fullscreen-shader.ts と同じ。表示サイズ 0 でも 1px は確保する)
  function resizeCanvas(): void {
    const dpr = Math.min(window.devicePixelRatio, maxDpr);
    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;
    }
  }

  /**
   * 状態を 2 枚作る。createRenderTarget は completeness が通らなければ throw する
   * (第20章 4 節)ので、これは実際に通る道 — main.ts はその例外を捕まえて読み出し行に
   * 出している。途中で抜けると、ここまでに作ったプログラム 2 本と 1 枚目の状態が
   * 漏れる。stop() で後始末をする章がここに穴を空けているのは筋が通らないので、
   * 自分で解放してから投げ直す
   */
  function createStatePair(): [RenderTarget, RenderTarget] {
    let first: RenderTarget | null = null;
    try {
      first = createState(stateWidth(), stateHeight());
      return [first, createState(stateWidth(), stateHeight())];
    } catch (error) {
      if (first) {
        deleteRenderTarget(gl, first);
      }
      gl.deleteProgram(simProgram);
      gl.deleteProgram(showProgram);
      throw error;
    }
  }

  // canvas のサイズを決めてから状態を作る。順番を逆にすると
  // drawingBufferWidth が既定の 300×150 のまま読まれる
  resizeCanvas();
  // read = 前の状態(サンプルする側) / write = 新しい状態(描き込む側)。
  // 毎ステップこの 2 つが役を交代する。これが ping-pong
  const [initialRead, initialWrite] = createStatePair();
  let read = initialRead;
  let write = initialWrite;

  // 更新パスに渡す通し番号。0 のあいだは前の状態が無いので、シェーダー側は
  // u_frame == 0 を初期化の分岐に使う(本文 2 節)。
  // これは増え続けるので、u_frame を宣言するシェーダーは precision highp int; を
  // 書くこと — mediump の int の保証は 16 ビットしかない(本文 2 節・第25章 3 節)
  let frame = 0;
  // 1 未満の stepsPerFrame を扱うための持ち越し。1 で始めるのは、
  // 最初のフレームで必ず 1 回初期化を走らせるため
  let stepBudget = 1;

  // u_mouse は fullscreen-shader.ts と同じ「描画バッファのピクセル・左下原点」で
  // 受け取り、更新パスへ渡すときだけ状態テクスチャの座標系へ直す
  let pointerActive = false;
  let mouseX = 0;
  let mouseY = 0;

  function onPointerMove(event: PointerEvent): void {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left - canvas.clientLeft;
    const y = event.clientY - rect.top - canvas.clientTop;
    const scaleX = canvas.width / canvas.clientWidth;
    const scaleY = canvas.height / canvas.clientHeight;
    mouseX = x * scaleX;
    mouseY = (canvas.clientHeight - y) * scaleY;
    pointerActive = true;
  }
  canvas.addEventListener('pointermove', onPointerMove);

  function resizeIfNeeded(): void {
    resizeCanvas();
    const width = stateWidth();
    const height = stateHeight();
    if (read.width === width && read.height === height) {
      return;
    }
    // resizeRenderTarget は「同じ設定で作り直す」だけなので(第20章 7 節)、
    // 中身は消える。だからリサイズしたら初期化からやり直す。黙って状態が
    // 消えるように見えないよう、この挙動は本文にも書いてある(本文 3 節)
    read = resizeRenderTarget(gl, read, width, height);
    write = resizeRenderTarget(gl, write, width, height);
    frame = 0;
    stepBudget = 1;
  }

  let rafId = 0;

  function render(timestamp: DOMHighResTimeStamp): void {
    resizeIfNeeded();
    const time = timestamp * 0.001;

    // --- 更新パス: 前の状態を読み、新しい状態を書き、役を入れ替える -----------
    gl.useProgram(simProgram);
    stepBudget += stepsPerFrame;
    while (stepBudget >= 1) {
      stepBudget -= 1;
      // 描画先を write に切り替える(viewport も一緒に切り替わる)
      bindRenderTarget(gl, write);
      gl.uniform1f(simTime, time);
      gl.uniform2f(simResolution, write.width, write.height);
      const stateScaleX = write.width / gl.drawingBufferWidth;
      const stateScaleY = write.height / gl.drawingBufferHeight;
      if (pointerActive) {
        gl.uniform2f(simMouse, mouseX * stateScaleX, mouseY * stateScaleY);
      } else {
        gl.uniform2f(simMouse, write.width / 2, write.height / 2);
      }
      gl.uniform1i(simFrame, frame);
      // サンプルするのは read。描画先は write。この 2 つが同じテクスチャに
      // なると WebGL は INVALID_OPERATION を返す(本文 1 節)。
      // バインドは必ず drawArrays の直前にやり直す — 役の交代でずれるため
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, read.texture);
      gl.drawArrays(gl.TRIANGLES, 0, 3);

      const swapped = read;
      read = write;
      write = swapped;
      frame++;
    }

    // --- 表示パス: いちばん新しい状態(= read)を画面へ ------------------------
    bindRenderTarget(gl, null);
    gl.useProgram(showProgram);
    gl.uniform1f(showTime, time);
    gl.uniform2f(showResolution, gl.drawingBufferWidth, gl.drawingBufferHeight);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, read.texture);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    rafId = requestAnimationFrame(render);
  }
  rafId = requestAnimationFrame(render);

  return {
    stop(): void {
      cancelAnimationFrame(rafId);
      canvas.removeEventListener('pointermove', onPointerMove);
      // 第6章のハーネスは stop() で GPU リソースを解放していない(第35章の宿題)。
      // この章のハーネスはデモを切り替えるたびに FBO 2 枚 = テクスチャ 2 枚を
      // 作るので、放置すると切り替えた回数だけ状態テクスチャが残る。ここで消す
      deleteRenderTarget(gl, read);
      deleteRenderTarget(gl, write);
      gl.deleteProgram(simProgram);
      gl.deleteProgram(showProgram);
    },
    stateFormat: stateFormat.label,
  };
}

// 第29章 状態テクスチャを「2 次元配列」として扱うための 2 行。
// 更新パスと表示パスで座標系が違う(状態の解像度 / 画面の解像度)ので、
// その行き来をここに閉じ込めている。混同すると必ずバグる場所(本文 4 節)。

/**
 * 格子の外へ出たセル番地を、反対側へ折り返す — 上下左右がつながったトーラスになる。
 *
 * texelFetch はテクスチャのラップモード(TEXTURE_WRAP_S / _T)を見ないので(第16章 7 節)、
 * 端の扱いはこちらで書くしかない。逆に言えば、端を「壁」にしたいなら
 * clamp(cell, ivec2(0), size - 1) に差し替えるだけでよい。
 *
 * size を足してから % を取っているのは、GLSL ES 3.00 の % が
 * 「どちらかの被演算子が負なら結果は未定義」(§5.9)だから。近傍は上下左右斜めの
 * 1 セルだけなので cell >= -1 で、size >= 1 なら cell + size は必ず 0 以上になる。
 */
ivec2 wrapCell(ivec2 cell, ivec2 size) {
  return (cell + size) % size;
}

/**
 * 画面のピクセル座標 → 状態テクスチャのセル番地。表示パスが使う。
 * fragCoord はピクセルの中心なので 0.5 〜 size - 0.5 の範囲にあり(第7章)、
 * 比を取って切り捨てれば 0 〜 stateSize - 1 に収まる。min はその保険 —
 * 範囲外の texelFetch は ES 3.0 では結果が未定義で、WebGL 2.0 は安全性のために
 * 「ゼロを返す」と定めている(WebGL 2.0 仕様 "Texel Fetches")。どちらにしても
 * 意図した値ではないので、はみ出させない。
 */
ivec2 screenToCell(vec2 fragCoord, vec2 screenSize, ivec2 stateSize) {
  return min(ivec2(fragCoord * vec2(stateSize) / screenSize), stateSize - 1);
}

#version 300 es

// 第29章 デモ1 表示パス: 状態テクスチャを画面へ出すだけ。
// 状態に入っているのは「光の量」で、1.0 を超えることもある。
// 背景色をリニア空間で足してから、最後の 1 行で sRGB へエンコードする。

precision highp float;

// float テクスチャを読むサンプラには highp を明示する(第21章 6 節)。既定は lowp
uniform highp sampler2D u_state;
// こちらの u_resolution は「画面の」解像度。更新パスとは別物
uniform vec2 u_resolution;

out vec4 fragColor;

#include "grid.glsl"
#include "color.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 背景の基調色(第4部の共通の値)。sRGB で書いてリニアへ直して使う
const vec3 BACKGROUND = vec3(0.06, 0.07, 0.09);
// ----------------------------------------------------------------------

void main() {
  ivec2 stateSize = textureSize(u_state, 0);
  ivec2 cell = screenToCell(gl_FragCoord.xy, u_resolution, stateSize);

  vec3 glow = texelFetch(u_state, cell, 0).rgb;

  // 足し算はリニア空間で(第27章 4 節)。背景も光もリニアの量として扱う
  vec3 color = srgbToLinear(BACKGROUND) + glow;

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

#version 300 es

// 第29章 デモ2 表示パス: 0 と 1 の格子を、セルが見える大きさで描く。
// 状態テクスチャは画面より粗い(1 セル = CELL_SIZE ピクセル)ので、
// 画面のピクセルからセルの番地を割り出してから読む。

precision highp float;

// float テクスチャを読むサンプラには highp を明示する(第21章 6 節)。既定は lowp
uniform highp sampler2D u_state;
uniform vec2 u_resolution; // 画面の解像度

out vec4 fragColor;

#include "grid.glsl"
#include "color.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 死んでいるセルの色 / たったいま死んだセルの余韻 / 生きているセルの色(いずれも sRGB)
const vec3 DEAD = vec3(0.06, 0.07, 0.09);
const vec3 GHOST = vec3(0.14, 0.19, 0.28);
const vec3 LIVE = vec3(0.86, 0.92, 1.00);
// セルの境目に沈める線の色と太さ(画面のピクセル)
const vec3 GRID_LINE = vec3(0.02, 0.02, 0.03);
const float GRID_WIDTH = 1.0;
// ----------------------------------------------------------------------

void main() {
  ivec2 stateSize = textureSize(u_state, 0);
  // grid.glsl の screenToCell とまったく同じ計算だが、下の境目の線に小数部
  // fract(cellF) が要るので、切り捨てる前の値を自分で持っている
  vec2 cellF = gl_FragCoord.xy * vec2(stateSize) / u_resolution;
  ivec2 cell = min(ivec2(cellF), stateSize - 1);

  // r = いまの世代 / g = 1 つ前の世代
  vec2 state = texelFetch(u_state, cell, 0).rg;

  // 混ぜるのはリニア空間で。生死そのものは 0 か 1 しかないので、
  // 生きたセルの色は LIVE、死んだセルの色は DEAD にぴったり一致する
  vec3 color = mix(srgbToLinear(DEAD), srgbToLinear(GHOST), state.g);
  color = mix(color, srgbToLinear(LIVE), state.r);

  // セルの境目。第4部の仕切り線と同じ式を、格子の目に当てている
  vec2 toEdge = min(fract(cellF), 1.0 - fract(cellF)) * u_resolution / vec2(stateSize);
  float edge = smoothstep(0.0, GRID_WIDTH, min(toEdge.x, toEdge.y));
  color = mix(srgbToLinear(GRID_LINE), color, edge);

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

#version 300 es

// 第29章 デモ3 表示パス: V の濃度を色に写す。
// 状態に入っている V の最大は (F, k) によって 0.24〜0.47 まで振れる(CPU で 128×128 を
// 2000 ステップ、デモが割り当てる帯を 9×5 で掃いて測った値)。0.43 あたりを 1.0 に
// 合わせる目安で伸ばしてから 3 色の階調へ流し、それを超える帯は下の clamp で白に潰す。
// 色そのものの設計(余弦パレットなど)は第27章 7 節の担当。

precision highp float;

// float テクスチャを読むサンプラには highp を明示する(第21章 6 節)。既定は lowp
uniform highp sampler2D u_state;
uniform vec2 u_resolution; // 画面の解像度

out vec4 fragColor;

#include "grid.glsl"
#include "color.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// V を 0〜1 へ伸ばす倍率。0.43 × 2.4 ≒ 1.03 が目安(本文 7 節)
const float V_SCALE = 2.4;
// 3 色の階調(いずれも sRGB で書き、リニアへ直して混ぜる)
const vec3 LOW = vec3(0.06, 0.07, 0.09);
const vec3 MID = vec3(0.17, 0.35, 0.55);
const vec3 HIGH = vec3(0.95, 0.97, 0.92);
// ----------------------------------------------------------------------

void main() {
  ivec2 stateSize = textureSize(u_state, 0);
  ivec2 cell = screenToCell(gl_FragCoord.xy, u_resolution, stateSize);

  float v = clamp(texelFetch(u_state, cell, 0).g * V_SCALE, 0.0, 1.0);

  vec3 color = mix(srgbToLinear(LOW), srgbToLinear(MID), smoothstep(0.0, 0.55, v));
  color = mix(color, srgbToLinear(HIGH), smoothstep(0.52, 1.0, v));

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

// 第29章: フィードバック
// 「1 canvas + 切替ボタン」構成は第10章以来のものと同じ。違うのは 2 つだけ。
//   - ハーネスが startFullscreenShader ではなく、この章の startFeedback(理由は 3 節)
//   - デモ 1 本につきシェーダーが 2 本(更新パス .sim.frag / 表示パス .show.frag)
// #include の解決は第23章からの文字列置換。置換文字列を関数で渡しているのは、
// String.replace が `$&` などを特別扱いするため。

import trailShowSource from './01-trail.show.frag?raw';
import trailSimSource from './01-trail.sim.frag?raw';
import lifeShowSource from './02-life.show.frag?raw';
import lifeSimSource from './02-life.sim.frag?raw';
import reactionShowSource from './03-reaction.show.frag?raw';
import reactionSimSource from './03-reaction.sim.frag?raw';
import colorChunkSource from './color.glsl?raw';
import { type FeedbackHandle, type FeedbackOptions, startFeedback } from './feedback';
import gridChunkSource from './grid.glsl?raw';
import hashChunkSource from './hash.glsl?raw';

function resolveIncludes(source: string): string {
  return source
    .replace('#include "hash.glsl"', () => hashChunkSource.trim())
    .replace('#include "grid.glsl"', () => gridChunkSource.trim())
    .replace('#include "color.glsl"', () => colorChunkSource.trim());
}

interface Demo {
  id: string;
  label: string;
  sim: string;
  show: string;
  options: FeedbackOptions;
}

const demos: Demo[] = [
  {
    id: 'trail',
    label: 'トレイル',
    sim: resolveIncludes(trailSimSource),
    show: resolveIncludes(trailShowSource),
    // 状態は画面と同じ解像度。1 フレーム 1 ステップ = 毎秒 60 回減衰する
    options: { cellSize: 1, stepsPerFrame: 1 },
  },
  {
    id: 'life',
    label: 'ライフゲーム',
    sim: resolveIncludes(lifeSimSource),
    show: resolveIncludes(lifeShowSource),
    // 1 セル = 10 ピクセルの粗い格子。6 フレームに 1 世代 = 毎秒 10 世代。
    // 毎フレーム進めると速すぎて、どのセルがどう動いたのか目で追えない
    options: { cellSize: 10, stepsPerFrame: 1 / 6 },
  },
  {
    id: 'reaction',
    label: 'リアクション・ディフュージョン',
    sim: resolveIncludes(reactionSimSource),
    show: resolveIncludes(reactionShowSource),
    // 模様ができるまでに 1000 ステップ以上かかるので、1 フレームで 8 回進める。
    // 1 セル = 3 ピクセルにしているのは、更新の回数が 8 倍あるぶんの節約
    options: { cellSize: 3, stepsPerFrame: 8 },
  },
];

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

let handle: FeedbackHandle | null = null;

// 関数宣言ではなくアロー関数にしているのは、上の null チェックによる型の絞り込みを
// この中でも効かせるため(関数宣言は巻き上げられるので、TypeScript は絞り込みを持ち越さない)
const start = (demo: Demo): void => {
  try {
    handle = startFeedback(canvas, demo.sim, demo.show, demo.options);
    const cell = demo.options.cellSize ?? 1;
    readout.textContent = `状態テクスチャ: ${handle.stateFormat} / 1 セル = ${cell} ピクセル`;
  } catch (error) {
    // createRenderTarget は completeness が通らなければステータス名付きで
    // throw する(第20章 4 節)。原因が分かるように、そのまま読者へ見せる
    handle = null;
    readout.textContent = error instanceof Error ? error.message : String(error);
  }
};

start(demos[0]);

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', () => {
    // このハーネスの stop() は FBO とプログラムまで解放する(第6章のハーネスは
    // していない。一般論は第35章)。状態テクスチャは画面いっぱいの大きさなので、
    // 切り替えるたびに残していくと効いてくる
    handle?.stop();
    start(demo);
    for (const b of controls.querySelectorAll('button')) {
      b.setAttribute('aria-pressed', 'false');
    }
    button.setAttribute('aria-pressed', 'true');
  });
  controls.append(button);
}