Transform Feedback — GPU パーティクルと GPGPU

  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  // ここがこの章の入口。捕まえる変数の集合はリンク時に決まる(ES 3.0.6 §2.15)ので、
  // linkProgram の「前」に呼ばないと何も捕まらない
  gl.transformFeedbackVaryings(program, varyings, gl.INTERLEAVED_ATTRIBS);
  gl.linkProgram(program);

// 更新パスの頂点シェーダーが出力する変数。名前も順番も
// .vert の out 宣言と 1 対 1 で対応していること(本文 2 節)
const CAPTURED_VARYINGS = ['v_position', 'v_velocity', 'v_age'];

// transformFeedbackVaryings に渡す名前・順番と、ここの宣言が一致していること。
// INTERLEAVED_ATTRIBS なので、この順にそのまま 1 本のバッファへ書かれる(本文 3 節)
out vec3 v_position;
out vec3 v_velocity;
out float v_age;

  // 既定のオブジェクト(null)でも動くが、名前付きのものを 1 個作って使う。
  // 出力バッファのバインドを「オブジェクトごと外す」ことができるからで、
  // これが本文 5 節の二重バインドを避ける手になる
  const transformFeedback = gl.createTransformFeedback();

#version 300 es

// 第32章 更新パスのフラグメントシェーダー(3 本のデモで共通)。
//
// 中身は空でよい。更新パスは gl.RASTERIZER_DISCARD を有効にして走らせるので、
// プリミティブはラスタライズの直前で捨てられ、このシェーダーは 1 回も起動しない。
// それでもファイルが要るのは、リンクの失敗条件に
// 「プログラムが頂点シェーダーとフラグメントシェーダーの両方を含んでいない」
// が挙がっているため(OpenGL ES 3.0.6 §2.12 の LinkProgram)。本文 4 節。

precision highp float;

out vec4 fragColor;

void main() {
  fragColor = vec4(0.0);
}

    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.enableVertexAttribArray(0); // a_position
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, STATE_STRIDE, 0);
    gl.enableVertexAttribArray(1); // a_velocity
    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, STATE_STRIDE, 3 * FLOAT_BYTES);
    gl.enableVertexAttribArray(2); // a_age
    gl.vertexAttribPointer(2, 1, gl.FLOAT, false, STATE_STRIDE, 6 * FLOAT_BYTES);
    // 種は ping-pong に加わらないので、2 本の VAO が同じバッファを指す
    gl.bindBuffer(gl.ARRAY_BUFFER, seedBuffer);
    gl.enableVertexAttribArray(3); // a_seed
    gl.vertexAttribPointer(3, 4, gl.FLOAT, false, SEED_STRIDE, 0);
    gl.bindVertexArray(null);

    // --- パス 1: 更新(絵は出ない) ---------------------------------------------
    gl.enable(gl.RASTERIZER_DISCARD);
    gl.useProgram(updatePrograms[demoIndex]);
    gl.uniform1f(updateLocations[demoIndex].dt, dt);
    gl.uniform1f(updateLocations[demoIndex].time, time);

    // 読む側の VAO と、書く側のバッファ。この 2 つが同じだと WebGL は
    // INVALID_OPERATION を返す(本文 5 節)
    gl.bindVertexArray(system.slots[system.read].vao);
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, system.slots[write].buffer);

    // beginTransformFeedback のモードと drawArrays のモードは一致していること。
    // 一致していないと INVALID_OPERATION(ES 3.0.6 §2.15.2)。
    // drawElements はモードによらず使えないので、更新パスは必ず drawArrays
    gl.beginTransformFeedback(gl.POINTS);
    gl.drawArrays(gl.POINTS, 0, demo.count);
    gl.endTransformFeedback();

    // 書き終えたバッファは、次の描画パスで頂点属性として読む。transform feedback の
    // 出力先に付いたままだと二重バインドになって draw が INVALID_OPERATION になるので、
    // オブジェクトごと外す(本文 5 節の pitfall)
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
    // RASTERIZER_DISCARD は状態機械のスイッチ(第1章)。切り忘れると次の描画パスも、
    // それどころか gl.clear まで無視される(ES 3.0.6 §3.1)
    gl.disable(gl.RASTERIZER_DISCARD);

    system.read = write;

  vec3 position = a_position + a_velocity * u_dt;

  // はみ出した軸だけ 1 になるマスク。分岐を書かずに 3 軸まとめて処理する
  vec3 outside = step(vec3(BOUND), abs(position));
  // 壁を鏡にして折り返す: x > B なら 2B - x、x < -B なら -2B - x
  position = mix(position, sign(position) * (2.0 * BOUND) - position, outside);

  v_position = position;
  v_velocity = mix(a_velocity, -a_velocity, outside);
  v_age = a_age + u_dt;

// 粒子ごとの固定の種。x = 方位角 / y = 円錐内の傾き / z = 速さ / w = 寿命。
// 更新パスでも書き戻さないので、ping-pong の外に固定のバッファ 1 本で置いてある
layout(location = 3) in vec4 a_seed;

vec3 spawnVelocity(vec4 seed) {
  float azimuth = seed.x * TAU;
  float tilt = CONE_ANGLE * sqrt(seed.y);
  float speed = mix(SPEED_MIN, SPEED_MAX, seed.z);
  return speed * vec3(sin(tilt) * cos(azimuth), cos(tilt), sin(tilt) * sin(azimuth));
}

  float life = lifeOf(a_seed);
  if (age >= life) {
    age = mod(age, life);
    position = spawnPosition(a_seed);
    velocity = spawnVelocity(a_seed);
  }

vec3 flow(vec3 p, float t) {
  vec3 q = p * FIELD_SCALE + t * FIELD_DRIFT;
  return vec3(sin(q.y) - cos(q.z), sin(q.z) - cos(q.x), sin(q.x) - cos(q.y));
}

vec3 spawnPosition(vec4 seed) {
  // seed.z がどの噴き出し口かを決める。粒子はいつも同じ 1 か所へ戻る
  float k = min(floor(seed.z * EMITTER_COUNT), EMITTER_COUNT - 1.0);
  // 向きは球面らせん: 極角は k で等分し、方位角は黄金角ずつ回す
  float cosPolar = (k + 0.5) / EMITTER_COUNT * 2.0 - 1.0;
  float sinPolar = sqrt(max(0.0, 1.0 - cosPolar * cosPolar));
  float azimuth = k * GOLDEN_ANGLE;
  // 半径も k で振って、球面ではなく球の中いっぱいに噴き出し口を散らす。
  // fract(k * 黄金比) は 0〜1 を偏りなく埋める並び、3 乗根は球の中で均すため
  float radius = EMITTER_RADIUS * (0.25 + 0.75 * pow(fract(k * GOLDEN_FRACTION), 1.0 / 3.0));
  vec3 center = radius * vec3(sinPolar * cos(azimuth), cosPolar, sinPolar * sin(azimuth));

    // rAF の実測差分を使う。ただし上限で頭打ちにする(本文 6 節)
    const dt = lastTimestamp === 0 ? 0 : Math.min(delta / 1000, MAX_DT);
    lastTimestamp = timestamp;

// 第32章: Transform Feedback — GPU パーティクルと GPGPU
//
// 1 フレームでやることは 2 パス。
//   ① 更新パス: gl.RASTERIZER_DISCARD + transform feedback。頂点シェーダーの出力を
//      そのままバッファへ書き戻す。絵は 1 ピクセルも出ない
//   ② 描画パス: 書き終えたバッファを頂点属性として読み、gl.POINTS で描く
// 状態バッファは 2 本で、毎フレーム役を入れ替える(ping-pong・本文 5 節)。
// 属性の配線は VAO の状態なので、読む側のバッファが変われば VAO も変わる。だから VAO も 2 本。
//
// 3 本のデモが違うのは「更新パスの頂点シェーダー」だけで、描画パスは共通の 1 本。
// この章の主題が「状態をどう更新するか」だけであることが、ファイル構成にそのまま出ている。

import { mat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import { compileShader, linkProgram } from '../../lib/shader';
import minimalUpdateSource from './01-minimal.update.vert?raw';
import gravityUpdateSource from './02-gravity.update.vert?raw';
import flowUpdateSource from './03-flow.update.vert?raw';
import colorChunkSource from './color.glsl?raw';
import drawFragmentTemplate from './draw.frag?raw';
import drawVertexSource from './draw.vert?raw';
import updateFragmentSource from './update.frag?raw';

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

// ---------------------------------------------------------------------------
// リンク前に捕まえる変数を指定するための、この章ローカルのリンク関数
// ---------------------------------------------------------------------------

// src/lib/shader.ts の linkProgram は attach したらすぐ linkProgram を呼ぶので、
// transformFeedbackVaryings を差し込む隙間が無い。共通ヘルパーにモードを足すのではなく
// (第23・24・29章と同じ判断)、章ローカルにもう 1 本書く。compileShader は共通のものを使う。
// 要点は「attach → varyings → link」という順序ひとつだけ(本文 2 節)
function linkProgramWithVaryings(
  gl: WebGL2RenderingContext,
  vertexShader: WebGLShader,
  fragmentShader: WebGLShader,
  varyings: string[],
): WebGLProgram {
  const program = gl.createProgram();
  if (!program) {
    throw new Error('プログラムオブジェクトを作成できませんでした');
  }
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  // ここがこの章の入口。捕まえる変数の集合はリンク時に決まる(ES 3.0.6 §2.15)ので、
  // linkProgram の「前」に呼ばないと何も捕まらない
  gl.transformFeedbackVaryings(program, varyings, gl.INTERLEAVED_ATTRIBS);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    const log = gl.getProgramInfoLog(program);
    gl.deleteProgram(program);
    throw new Error(`プログラムのリンクに失敗しました:\n${log ?? '(ログなし)'}`);
  }
  gl.deleteShader(vertexShader);
  gl.deleteShader(fragmentShader);
  return program;
}

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

// カメラ定数(第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);
const TARGET: ReadonlyVec3 = vec3.fromValues(0, 0, 0);
// canvas の CSS 背景色と同じ
const BACKGROUND_COLOR: ReadonlyVec3 = vec3.fromValues(0.06, 0.07, 0.09);

const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;

// 1 粒子の状態 = 位置 3 + 速度 3 + 年齢 1 = 7 float。この並びが
// 頂点属性の並びであり、transform feedback が書き出す並びでもある
const STATE_FLOATS = 3 + 3 + 1;
const STATE_STRIDE = STATE_FLOATS * FLOAT_BYTES;
// 粒子ごとの固定の種 = 4 float。更新パスが書き戻さないので ping-pong の外に置く
const SEED_FLOATS = 4;
const SEED_STRIDE = SEED_FLOATS * FLOAT_BYTES;

// 更新パスの頂点シェーダーが出力する変数。名前も順番も
// .vert の out 宣言と 1 対 1 で対応していること(本文 2 節)
const CAPTURED_VARYINGS = ['v_position', 'v_velocity', 'v_age'];

// rAF の実測差分をそのまま使うが、この値で頭打ちにする。タブが裏から戻った直後の
// 巨大な差分をオイラー積分に入れると、粒子が一気に飛ぶ(第23章 main.ts も同じ問題に
// 別の手当てをしている)。本文 6 節
const MAX_DT = 1 / 30;

// ---------------------------------------------------------------------------
// デモ
// ---------------------------------------------------------------------------

interface Demo {
  id: string;
  label: string;
  count: number;
  updateSource: string;
  /** 状態バッファの初期値。種と同じ乱数列から作る */
  initialState: (count: number, random: () => number) => Float32Array;
  /** 点の直径(ワールド単位) */
  particleSize: number;
  /** この速さで u_colorFast になる */
  speedScale: number;
  colorSlow: ReadonlyVec3;
  colorFast: ReadonlyVec3;
  camera: { theta: number; phi: number; radius: number };
  note: string;
}

/** 見た目を毎回同じにするための、ごく小さい線形合同法の擬似乱数(第25章のハッシュとは別物) */
function createRandom(seed: number): () => number {
  let state = seed >>> 0;
  return () => {
    state = (state * 1664525 + 1013904223) >>> 0;
    return state / 4294967296;
  };
}

/**
 * 位置も速度も 0 にして、年齢だけ大きな乱数にする初期状態。
 * 寿命を持つデモ(2・3)はこれで最初のステップに全粒子がリスポーンの枝を通り、
 * そのときの mod がそのままばらつきになる。CPU 側でリスポーンの式を書き写さずに済む
 */
function agedInitialState(count: number, random: () => number): Float32Array {
  const state = new Float32Array(count * STATE_FLOATS);
  for (let i = 0; i < count; i++) {
    state[i * STATE_FLOATS + 6] = random() * 1000;
  }
  return state;
}

const demos: Demo[] = [
  {
    id: 'minimal',
    label: '最小の transform feedback',
    count: 64,
    updateSource: minimalUpdateSource,
    // このデモの更新パスにはリスポーンが無いので、初期位置と初期速度は CPU が置く
    initialState: (count, random) => {
      const state = new Float32Array(count * STATE_FLOATS);
      for (let i = 0; i < count; i++) {
        const at = i * STATE_FLOATS;
        // 箱(半分の大きさ 1.5)の内側。01-minimal.update.vert の BOUND と揃えている
        state[at] = (random() * 2 - 1) * 1.3;
        state[at + 1] = (random() * 2 - 1) * 1.3;
        state[at + 2] = (random() * 2 - 1) * 1.3;
        const azimuth = random() * Math.PI * 2;
        const polar = Math.acos(random() * 2 - 1);
        const speed = 0.5 + random() * 0.9;
        state[at + 3] = speed * Math.sin(polar) * Math.cos(azimuth);
        state[at + 4] = speed * Math.cos(polar);
        state[at + 5] = speed * Math.sin(polar) * Math.sin(azimuth);
      }
      return state;
    },
    particleSize: 0.14,
    speedScale: 1.4,
    colorSlow: vec3.fromValues(0.12, 0.3, 0.85),
    colorFast: vec3.fromValues(1.0, 0.62, 0.22),
    camera: { theta: 0.7, phi: 0.35, radius: 5.0 },
    note: '位置と速度だけを持つ 64 個の点。箱の壁で折り返す',
  },
  {
    id: 'gravity',
    label: '重力と寿命',
    count: 50000,
    updateSource: gravityUpdateSource,
    initialState: agedInitialState,
    particleSize: 0.014,
    speedScale: 3.8,
    colorSlow: vec3.fromValues(0.5, 0.09, 0.02),
    colorFast: vec3.fromValues(1.0, 0.72, 0.3),
    camera: { theta: 0.55, phi: 0.16, radius: 5.4 },
    note: '重力で落ち、床で跳ね、寿命が尽きたら噴き出し口へ戻る',
  },
  {
    id: 'flow',
    label: '流れ場',
    count: 300000,
    updateSource: flowUpdateSource,
    initialState: agedInitialState,
    particleSize: 0.016,
    speedScale: 1.5,
    // 30 万個を加算合成で重ねるので、粒子 1 個の色はうんと暗くする。ここを明るくすると
    // 筋の芯から順に真っ白へ張り付いて、流れの形が読めなくなる(第30章 2 節の加算合成)
    colorSlow: vec3.fromValues(0.004, 0.008, 0.019),
    colorFast: vec3.fromValues(0.026, 0.038, 0.045),
    camera: { theta: 0.9, phi: 0.3, radius: 6.8 },
    note: '320 か所の噴き出し口から出た 30 万個の粒子が、sin と cos だけの流れ場に沿って筋を引く',
  },
];

// ---------------------------------------------------------------------------
// 粒子系(バッファ 2 本 + VAO 2 本 + 種のバッファ 1 本)
// ---------------------------------------------------------------------------

interface StateSlot {
  buffer: WebGLBuffer;
  vao: WebGLVertexArrayObject;
}

interface ParticleSystem {
  demo: Demo;
  seedBuffer: WebGLBuffer;
  slots: [StateSlot, StateSlot];
  /** いま「読む側」になっているスロットの番号 */
  read: 0 | 1;
  stateBytes: number;
  seedBytes: number;
}

function createParticleSystem(gl: WebGL2RenderingContext, demo: Demo): ParticleSystem {
  const random = createRandom(1337);

  // --- 粒子ごとの固定の種。初期化のときに 1 回だけ転送する ---------------------
  const seeds = new Float32Array(demo.count * SEED_FLOATS);
  for (let i = 0; i < seeds.length; i++) {
    seeds[i] = random();
  }
  const seedBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, seedBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, seeds, gl.STATIC_DRAW);

  // --- 状態バッファ 2 本と、そこから読む VAO 2 本 -----------------------------
  const initial = demo.initialState(demo.count, random);
  const slots: StateSlot[] = [];
  for (let i = 0; i < 2; i++) {
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 2 本とも同じ初期値で埋める。DYNAMIC_COPY は「GPU が書いて GPU が読む」の意思表示
    // (ヒントなので絵は変わらない)
    gl.bufferData(gl.ARRAY_BUFFER, initial, gl.DYNAMIC_COPY);

    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.enableVertexAttribArray(0); // a_position
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, STATE_STRIDE, 0);
    gl.enableVertexAttribArray(1); // a_velocity
    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, STATE_STRIDE, 3 * FLOAT_BYTES);
    gl.enableVertexAttribArray(2); // a_age
    gl.vertexAttribPointer(2, 1, gl.FLOAT, false, STATE_STRIDE, 6 * FLOAT_BYTES);
    // 種は ping-pong に加わらないので、2 本の VAO が同じバッファを指す
    gl.bindBuffer(gl.ARRAY_BUFFER, seedBuffer);
    gl.enableVertexAttribArray(3); // a_seed
    gl.vertexAttribPointer(3, 4, gl.FLOAT, false, SEED_STRIDE, 0);
    gl.bindVertexArray(null);

    slots.push({ buffer, vao });
  }
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  return {
    demo,
    seedBuffer,
    slots: [slots[0], slots[1]],
    read: 0,
    stateBytes: initial.byteLength,
    seedBytes: seeds.byteLength,
  };
}

function deleteParticleSystem(gl: WebGL2RenderingContext, system: ParticleSystem): void {
  for (const slot of system.slots) {
    gl.deleteVertexArray(slot.vao);
    gl.deleteBuffer(slot.buffer);
  }
  gl.deleteBuffer(system.seedBuffer);
}

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

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  controls: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  // --- プログラム ---------------------------------------------------------------
  // 更新パスはデモごと。描画パスは 1 本で全デモ共通
  const updatePrograms = demos.map((demo) =>
    linkProgramWithVaryings(
      gl,
      compileShader(gl, gl.VERTEX_SHADER, demo.updateSource),
      compileShader(gl, gl.FRAGMENT_SHADER, updateFragmentSource),
      CAPTURED_VARYINGS,
    ),
  );
  const drawProgram = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, drawVertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, resolveIncludes(drawFragmentTemplate)),
  );

  const updateLocations = updatePrograms.map((program) => ({
    dt: gl.getUniformLocation(program, 'u_dt'),
    // 流れ場のデモ以外では使っていないので null になる(第4章)。null への送信は無視される
    time: gl.getUniformLocation(program, 'u_time'),
  }));
  const drawLocations = {
    view: gl.getUniformLocation(drawProgram, 'u_view'),
    projection: gl.getUniformLocation(drawProgram, 'u_projection'),
    particleSize: gl.getUniformLocation(drawProgram, 'u_particleSize'),
    pointScale: gl.getUniformLocation(drawProgram, 'u_pointScale'),
    colorSlow: gl.getUniformLocation(drawProgram, 'u_colorSlow'),
    colorFast: gl.getUniformLocation(drawProgram, 'u_colorFast'),
    speedScale: gl.getUniformLocation(drawProgram, 'u_speedScale'),
  };

  // --- transform feedback オブジェクト -------------------------------------------
  // 既定のオブジェクト(null)でも動くが、名前付きのものを 1 個作って使う。
  // 出力バッファのバインドを「オブジェクトごと外す」ことができるからで、
  // これが本文 5 節の二重バインドを避ける手になる
  const transformFeedback = gl.createTransformFeedback();

  // 深度は使わない。この章のシーンには不透明な物体が無く、加算合成は描画順に
  // 依存しないので、深度テストで並べ替える相手がいない(第30章 4 節)
  gl.disable(gl.DEPTH_TEST);

  let system = createParticleSystem(gl, demos[0]);
  let demoIndex = 0;

  // --- 軌道カメラ(第15章の簡略版) ---------------------------------------------

  const orbit = { theta: 0.7, phi: 0.35, radius: 5.0 };
  const PHI_LIMIT = Math.PI / 2 - 0.05;
  const MIN_RADIUS = 2.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章の作りをそのまま) ---------------------------------------

  function selectDemo(index: number): void {
    demoIndex = index;
    const demo = demos[index];
    // これから消すバッファが transform feedback の出力先に残らないようにしてから消す。
    // 消えたバッファのバインドが残っていると、次のフレームの二重バインドの判定が
    // どうなるかを仕様で追い切れないので、こちらから外しておく
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
    // 状態バッファは 30 万粒子で 8.4 MiB × 2 本になるので、切り替えのたびに
    // 古いものを消す。解放の一般論は第35章
    deleteParticleSystem(gl, system);
    system = createParticleSystem(gl, demo);
    // rAF 間隔の標本も捨てる。前のデモのフレームが混ざった平均を出さないため
    resetFrameSamples();
    orbit.theta = demo.camera.theta;
    orbit.phi = demo.camera.phi;
    orbit.radius = demo.camera.radius;
  }

  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', () => {
      selectDemo(index);
      for (const other of controls.querySelectorAll('button')) {
        other.setAttribute('aria-pressed', 'false');
      }
      button.setAttribute('aria-pressed', 'true');
    });
    controls.append(button);
  }

  // --- 毎フレーム使い回す入れ物 -------------------------------------------------

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

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

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    const width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
    const height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
      // viewport も必ずセットで切り替える。既定値は canvas の初期サイズ(300×150)のままなので、
      // これを忘れると描画バッファの左下 300×150 だけに絵が出る
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

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

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

  // デモを切り替えたら、それまでのフレームの標本は捨てる。捨てないと切り替え直後の
  // 平均に前のデモのフレームが混ざり、読み出し行の数値が「どのデモを測った値か」を
  // 言えなくなる。空のあいだは updateReadout が「—」を出す
  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 updateReadout(): void {
    const demo = demos[demoIndex];
    const ms = frameTimes.length === 0 ? '—' : `${averageFrameMs().toFixed(1)} ms`;
    const mebibytes = (system.stateBytes * 2 + system.seedBytes) / (1024 * 1024);
    readout.textContent =
      `${demo.note} / 粒子 ${demo.count.toLocaleString('en-US')} 個 / ` +
      `状態 ${STATE_FLOATS} float = ${STATE_STRIDE} B/粒子 × 2 本 + 種 ${SEED_STRIDE} B/粒子 ` +
      `= ${mebibytes.toFixed(1)} MiB / 捕まえた変数 ${CAPTURED_VARYINGS.join(', ')} ` +
      `(INTERLEAVED_ATTRIBS)/ 毎フレームのバッファ転送 0 バイト(bufferSubData 0 回。` +
      `行列と uniform は別に送っています)/ ` +
      `ドローコール 2 回(更新 1 + 描画 1)/ ` +
      `rAF 間隔 ${ms}(CPU 側の計測。GPU 時間ではありません・第35章)`;
  }

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

  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();
    }
    // rAF の実測差分を使う。ただし上限で頭打ちにする(本文 6 節)
    const dt = lastTimestamp === 0 ? 0 : Math.min(delta / 1000, MAX_DT);
    lastTimestamp = timestamp;

    const demo = demos[demoIndex];
    const write = system.read === 0 ? 1 : 0;

    // --- パス 1: 更新(絵は出ない) ---------------------------------------------
    gl.enable(gl.RASTERIZER_DISCARD);
    gl.useProgram(updatePrograms[demoIndex]);
    gl.uniform1f(updateLocations[demoIndex].dt, dt);
    gl.uniform1f(updateLocations[demoIndex].time, time);

    // 読む側の VAO と、書く側のバッファ。この 2 つが同じだと WebGL は
    // INVALID_OPERATION を返す(本文 5 節)
    gl.bindVertexArray(system.slots[system.read].vao);
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, system.slots[write].buffer);

    // beginTransformFeedback のモードと drawArrays のモードは一致していること。
    // 一致していないと INVALID_OPERATION(ES 3.0.6 §2.15.2)。
    // drawElements はモードによらず使えないので、更新パスは必ず drawArrays
    gl.beginTransformFeedback(gl.POINTS);
    gl.drawArrays(gl.POINTS, 0, demo.count);
    gl.endTransformFeedback();

    // 書き終えたバッファは、次の描画パスで頂点属性として読む。transform feedback の
    // 出力先に付いたままだと二重バインドになって draw が INVALID_OPERATION になるので、
    // オブジェクトごと外す(本文 5 節の pitfall)
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
    // RASTERIZER_DISCARD は状態機械のスイッチ(第1章)。切り忘れると次の描画パスも、
    // それどころか gl.clear まで無視される(ES 3.0.6 §3.1)
    gl.disable(gl.RASTERIZER_DISCARD);

    system.read = write;

    // --- パス 2: 描画 -------------------------------------------------------------
    gl.clearColor(BACKGROUND_COLOR[0], BACKGROUND_COLOR[1], BACKGROUND_COLOR[2], 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE); // 加算合成(第30章 2 節)

    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);

    gl.useProgram(drawProgram);
    gl.uniformMatrix4fv(drawLocations.view, false, view); // transpose は常に false
    gl.uniformMatrix4fv(drawLocations.projection, false, projection);
    gl.uniform1f(drawLocations.particleSize, demo.particleSize);
    // ワールド単位の直径をピクセルへ直す係数。透視射影で高さ h の描画バッファに写すと、
    // カメラから距離 z にある長さ 1 は h / (2 tan(fovy/2)) / z ピクセルになる
    gl.uniform1f(drawLocations.pointScale, gl.drawingBufferHeight / (2 * Math.tan(FOVY / 2)));
    gl.uniform3f(drawLocations.colorSlow, demo.colorSlow[0], demo.colorSlow[1], demo.colorSlow[2]);
    gl.uniform3f(drawLocations.colorFast, demo.colorFast[0], demo.colorFast[1], demo.colorFast[2]);
    gl.uniform1f(drawLocations.speedScale, demo.speedScale);

    gl.bindVertexArray(system.slots[system.read].vao);
    gl.drawArrays(gl.POINTS, 0, demo.count);
    gl.bindVertexArray(null);
    gl.disable(gl.BLEND);

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

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

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

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('デモに必要な要素が見つかりません');
}

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

setup(gl, canvas, controls, readout);

#version 300 es

// 第32章 デモ1 更新パス: 箱の中で跳ね返る 64 個の点。
//
// この章でいちばん短い更新パス。やることは 2 つだけ。
//   position += velocity * dt
//   箱の壁からはみ出した軸は、折り返して速度の符号を反転する
// 位置を「積み上げる」ので、前フレームの状態が要る。第29章はそれをテクスチャに
// 持たせたが、ここではバッファに持たせて、頂点シェーダーの出力として書き戻す。

precision highp float;

// 状態バッファの並び。この 3 本の in と、下の 3 本の out が 1 対 1 で対応する
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_velocity;
layout(location = 2) in float a_age;

uniform float u_dt;

// transformFeedbackVaryings に渡す名前・順番と、ここの宣言が一致していること。
// INTERLEAVED_ATTRIBS なので、この順にそのまま 1 本のバッファへ書かれる(本文 3 節)
out vec3 v_position;
out vec3 v_velocity;
out float v_age;

// 箱の半分の大きさ(ワールド単位)
const float BOUND = 1.5;

void main() {
  vec3 position = a_position + a_velocity * u_dt;

  // はみ出した軸だけ 1 になるマスク。分岐を書かずに 3 軸まとめて処理する
  vec3 outside = step(vec3(BOUND), abs(position));
  // 壁を鏡にして折り返す: x > B なら 2B - x、x < -B なら -2B - x
  position = mix(position, sign(position) * (2.0 * BOUND) - position, outside);

  v_position = position;
  v_velocity = mix(a_velocity, -a_velocity, outside);
  v_age = a_age + u_dt;

  // 更新パスの結果は RASTERIZER_DISCARD で捨てられるので、この値は画面に出ない。
  // それでも書いておく — 書かないと頂点処理のあとの gl_Position は未定義になる
  // (GLSL ES 3.00 §7.1。書かないこと自体はエラーではない = 同 §12.16)
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}

#version 300 es

// 第32章 デモ2 更新パス: 重力と寿命(噴水)。
//
// 位置と速度に加えて「年齢」を状態に持つ。寿命が尽きた粒子は初期状態へ戻す
// (リスポーン)。粒子ごとの向きと速さは a_seed から決める — GPU の中に乱数は無いので、
// CPU が初期化時に 1 回だけ作った 4 つの乱数を、固定の属性として読んでいる(本文 6 節)。

precision highp float;

layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_velocity;
layout(location = 2) in float a_age;
// 粒子ごとの固定の種。x = 方位角 / y = 円錐内の傾き / z = 速さ / w = 寿命。
// 更新パスでも書き戻さないので、ping-pong の外に固定のバッファ 1 本で置いてある
layout(location = 3) in vec4 a_seed;

uniform float u_dt;

out vec3 v_position;
out vec3 v_velocity;
out float v_age;

const float TAU = 6.283185307179586;

// 書き換えて試すための定数 ----------------------------------------------
const vec3 GRAVITY = vec3(0.0, -3.4, 0.0);
// 床の高さと、跳ね返るときに残る速さの割合
const float FLOOR_Y = -1.15;
const float RESTITUTION = 0.42;
// 噴き出す速さの範囲と、円錐の半角(ラジアン)
const float SPEED_MIN = 2.4;
const float SPEED_MAX = 3.8;
const float CONE_ANGLE = 0.34;
// 噴き出し口の半径と、寿命(秒)の範囲
const float NOZZLE_RADIUS = 0.05;
const float LIFE_MIN = 1.6;
const float LIFE_MAX = 3.4;
// ------------------------------------------------------------------------

float lifeOf(vec4 seed) {
  return mix(LIFE_MIN, LIFE_MAX, seed.w);
}

vec3 spawnPosition(vec4 seed) {
  float azimuth = seed.x * TAU;
  // 面積で均すために sqrt を通す(そのまま使うと中心に寄る)
  float radius = NOZZLE_RADIUS * sqrt(seed.z);
  return vec3(radius * cos(azimuth), FLOOR_Y + 0.02, radius * sin(azimuth));
}

vec3 spawnVelocity(vec4 seed) {
  float azimuth = seed.x * TAU;
  float tilt = CONE_ANGLE * sqrt(seed.y);
  float speed = mix(SPEED_MIN, SPEED_MAX, seed.z);
  return speed * vec3(sin(tilt) * cos(azimuth), cos(tilt), sin(tilt) * sin(azimuth));
}

void main() {
  vec3 position = a_position;
  vec3 velocity = a_velocity + GRAVITY * u_dt;
  float age = a_age + u_dt;

  position += velocity * u_dt;

  // 床で跳ねる。もぐった分を跳ね返した高さに置き直し、縦の速さを減らして反転する
  if (position.y < FLOOR_Y && velocity.y < 0.0) {
    position.y = FLOOR_Y + (FLOOR_Y - position.y) * RESTITUTION;
    velocity.y = -velocity.y * RESTITUTION;
    velocity.xz *= 0.62; // 横方向は摩擦で落とす
  }

  // 寿命が尽きたらリスポーン。mod で余りを持ち越すので、1 ステップぶんずれない。
  // 初期状態は「位置も速度も 0・年齢だけ大きな乱数」なので、最初のステップで
  // 全粒子がここを通り、そのときの mod がそのまま噴出のばらつきになる
  float life = lifeOf(a_seed);
  if (age >= life) {
    age = mod(age, life);
    position = spawnPosition(a_seed);
    velocity = spawnVelocity(a_seed);
  }

  v_position = position;
  v_velocity = velocity;
  v_age = age;

  // 画面には出ないが、未定義の値を残さないために書いておく(01-minimal.update.vert と同じ)
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}

#version 300 es

// 第32章 デモ3 更新パス: 解析的な流れ場。
//
// 場そのものは sin と cos の組み合わせだけで書く(第9章)。ノイズは使わない。
// 各成分が「自分の軸の座標」を含まないので、この場の発散は恒等的に 0 —
// つまり粒子が 1 点へ吸い込まれて潰れることがない。
//
// ただし発散 0 は「散らばりも作らない」ということでもある。体積を保つ流れは
// 一様な分布を一様なまま運ぶので、球の中に一様に粒子を撒くと、いつまでたっても
// 一様なもやのままで流れの形が見えない。そこで噴き出し口を EMITTER_COUNT か所に
// 絞ってある。各粒子はいつも自分の 1 か所へ戻るので、同じ噴き出し口から出た
// 粒子たちが流線に沿って 1 本の筋(流跡線)に並ぶ。詳しくは本文 6 節。
//
// 粒子は流れに引きずられるだけで、互いの位置は見ない。テクスチャ方式なら隣の
// セルがタダで読めたが、バッファ方式では他の粒子は見えない(本文 1 節・7 節)。

precision highp float;

layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_velocity;
layout(location = 2) in float a_age;
// 粒子ごとの固定の種。x, y = 噴き出し口まわりのばらつきの向き / z = どの噴き出し口か / w = 寿命
layout(location = 3) in vec4 a_seed;

uniform float u_dt;
uniform float u_time;

out vec3 v_position;
out vec3 v_velocity;
out float v_age;

const float TAU = 6.283185307179586;
// 黄金角(rad)と黄金比の小数部。噴き出し口を球の中へ偏りなく散らすために使う
const float GOLDEN_ANGLE = 2.399963229728653;
const float GOLDEN_FRACTION = 0.6180339887;

// 書き換えて試すための定数 ----------------------------------------------
// 場の細かさ(大きいほど渦が小さい)と、場そのものが流れていく速さ
const float FIELD_SCALE = 2.0;
const float FIELD_DRIFT = 0.12;
// 場の値をワールド単位の速さに直す係数
const float FLOW_SPEED = 0.9;
// 速度が場の値に追いつく速さ(1 / 秒)。大きいほど場に貼り付く
const float DRAG = 2.6;
// この球からはみ出したらリスポーンする
const float RADIUS = 2.6;
// 噴き出し口の数と、それを散らす球の半径、噴き出し口 1 つの太さ
const float EMITTER_COUNT = 320.0;
const float EMITTER_RADIUS = 2.3;
const float EMITTER_SPREAD = 0.035;
// 寿命(秒)の範囲
const float LIFE_MIN = 4.0;
const float LIFE_MAX = 9.0;
// ------------------------------------------------------------------------

vec3 flow(vec3 p, float t) {
  vec3 q = p * FIELD_SCALE + t * FIELD_DRIFT;
  return vec3(sin(q.y) - cos(q.z), sin(q.z) - cos(q.x), sin(q.x) - cos(q.y));
}

vec3 spawnPosition(vec4 seed) {
  // seed.z がどの噴き出し口かを決める。粒子はいつも同じ 1 か所へ戻る
  float k = min(floor(seed.z * EMITTER_COUNT), EMITTER_COUNT - 1.0);
  // 向きは球面らせん: 極角は k で等分し、方位角は黄金角ずつ回す
  float cosPolar = (k + 0.5) / EMITTER_COUNT * 2.0 - 1.0;
  float sinPolar = sqrt(max(0.0, 1.0 - cosPolar * cosPolar));
  float azimuth = k * GOLDEN_ANGLE;
  // 半径も k で振って、球面ではなく球の中いっぱいに噴き出し口を散らす。
  // fract(k * 黄金比) は 0〜1 を偏りなく埋める並び、3 乗根は球の中で均すため
  float radius = EMITTER_RADIUS * (0.25 + 0.75 * pow(fract(k * GOLDEN_FRACTION), 1.0 / 3.0));
  vec3 center = radius * vec3(sinPolar * cos(azimuth), cosPolar, sinPolar * sin(azimuth));

  // 噴き出し口が完全な点だと筋が線 1 本になって細すぎるので、小さな球にばらす
  float jitterAzimuth = seed.x * TAU;
  float jitterCos = seed.y * 2.0 - 1.0;
  float jitterSin = sqrt(max(0.0, 1.0 - jitterCos * jitterCos));
  vec3 jitter = vec3(jitterSin * cos(jitterAzimuth), jitterCos, jitterSin * sin(jitterAzimuth));
  return center + EMITTER_SPREAD * jitter;
}

void main() {
  vec3 position = a_position;
  vec3 velocity = a_velocity;
  float age = a_age + u_dt;

  // 速度を場の値へ寄せる。min(1.0, ...) は dt が大きいときの行き過ぎ止め
  vec3 target = flow(position, u_time) * FLOW_SPEED;
  velocity += (target - velocity) * min(1.0, DRAG * u_dt);
  position += velocity * u_dt;

  float life = mix(LIFE_MIN, LIFE_MAX, a_seed.w);
  if (age >= life || length(position) > RADIUS) {
    age = mod(age, life);
    position = spawnPosition(a_seed);
    velocity = vec3(0.0);
  }

  v_position = position;
  v_velocity = velocity;
  v_age = age;

  // 画面には出ないが、未定義の値を残さないために書いておく(01-minimal.update.vert と同じ)
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}

#version 300 es

// 第32章 描画パスの頂点シェーダー(3 本のデモで共通)。
//
// 更新パスが書き終えたばかりの状態バッファを、そのまま頂点属性として読む。
// この章で 3 本のデモが違うのは「更新パスだけ」で、描き方は 1 本で足りる。
// 点の描き方(gl.POINTS と gl_PointSize)は第30章 5 節のまま。

precision highp float;

// 状態バッファの並び。0〜2 は更新パスが毎フレーム書き換える。
// 3 は初期化のときに 1 回だけ書く固定の値で、ここでは読まない
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_velocity;

uniform mat4 u_view;
uniform mat4 u_projection;
// 点の直径(ワールド単位)と、それを描画バッファのピクセルへ直す係数。
// u_pointScale は CPU 側で height / (2 * tan(fovy / 2)) を入れてある
uniform float u_particleSize;
uniform float u_pointScale;
// 速さ 0 のときの色と、u_speedScale の速さに達したときの色。どちらもリニア値
uniform vec3 u_colorSlow;
uniform vec3 u_colorFast;
uniform float u_speedScale;

out vec3 v_color;

void main() {
  // 粒子の位置はもうワールド座標なので、モデル行列は無い
  vec4 viewPosition = u_view * vec4(a_position, 1.0);
  gl_Position = u_projection * viewPosition;

  // 遠いほど小さく。透視射影が長さを 1 / (カメラからの奥行き) に縮めるのに合わせる
  gl_PointSize = u_particleSize * u_pointScale / max(0.05, -viewPosition.z);

  float speed = length(a_velocity) / u_speedScale;
  v_color = mix(u_colorSlow, u_colorFast, clamp(speed, 0.0, 1.0));
}

#version 300 es

// 第32章 描画パスのフラグメントシェーダー(3 本のデモで共通)。
// 点を丸く落として、リニアで組み立てた色を sRGB へエンコードして出す。

precision highp float;

#include "color.glsl"

in vec3 v_color;

out vec4 fragColor;

void main() {
  // gl_PointCoord は点の中を 0〜1 で走る座標(第30章 5 節)。
  // 中心からの距離でふちを落として、四角い点を丸く見せる
  vec2 d = gl_PointCoord * 2.0 - 1.0;
  float falloff = max(0.0, 1.0 - dot(d, d));
  vec3 color = v_color * falloff * falloff;

  // 加算合成はフラグメントシェーダーより後の固定機能段なので、実際に足し合わされるのは
  // ここでエンコードしたあとの値になる。厳密にリニアで足すには float の FBO へ描いて
  // 最後に 1 回だけエンコードする形が要る(第33章)。本文 6 節
  fragColor = vec4(linearToSrgb(color), 1.0);
}

// 第32章 出力の最後の 1 行のための色変換。
// 中身は第27章の src/lessons/27-color-and-palette/color.glsl からの複製(内容は同一)で、
// srgbToLinear / linearToSrgb の 2 関数だけを持ってきている。
// 片方を直したらもう片方も直すこと(第25→26章の noise.glsl と同じ流儀。理由は
// docs/plan.md の抽象化タイムライン: 読者が壊して遊ぶ対象なので章をまたいだ結合を作らない)。
//
// この章で使うのは linearToSrgb のほう。パーティクルの色はリニア値として組み立て、
// 画面へ出す直前にここでエンコードする。変換の体系そのものは第27章 2 節。

/**
 * sRGB エンコード値 → リニア値。
 * 出典: OpenGL ES 3.0.6 §3.8.16 式 (3.26)。GPU が sRGB テクスチャを読むときの変換そのもの。
 * 境界 (0.04045) では 2 つの式の差が 2.3e-9 しかないので、等号がどちら側かは問題にならない。
 */
vec3 srgbToLinear(vec3 c) {
  vec3 lo = c / 12.92;
  vec3 hi = pow((c + 0.055) / 1.055, vec3(2.4));
  return mix(lo, hi, step(vec3(0.04045), c));
}

/**
 * リニア値 → sRGB エンコード値。画面へ出す最後の 1 行はこれになる。
 * 出典: OpenGL ES 3.0.6 §4.1.8 式 (4.1)。仕様は指数を 0.41666 と書いているが、
 * これは 1/2.4 = 0.4166666… を打ち切った値で、8 ビット出力での差は最大 1 段。1/2.4 を使う。
 * 仕様の式は 0 以下と 1 以上を切り落とすので、clamp がその 2 本の枝にあたる。
 */
vec3 linearToSrgb(vec3 c) {
  c = clamp(c, 0.0, 1.0);
  vec3 lo = c * 12.92;
  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;
  return mix(lo, hi, step(vec3(0.0031308), c));
}