ブレンディングとパーティクル — 加算合成と深度の兼ね合い

  function applyBlend(preset: BlendPreset): void {
    if (preset.func === null) {
      gl.disable(gl.BLEND);
      return;
    }
    gl.enable(gl.BLEND);
    gl.blendEquation(gl.FUNC_ADD);
    gl.blendFunc(preset.func[0], preset.func[1]);
  }

  const blendPresets: readonly BlendPreset[] = [
    { label: 'ブレンドなし', func: null, premultiply: false },
    { label: '通常アルファ', func: [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA], premultiply: false },
    { label: '乗算済みアルファ', func: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA], premultiply: true },
    { label: '加算', func: [gl.SRC_ALPHA, gl.ONE], premultiply: false },
    { label: '乗算', func: [gl.DST_COLOR, gl.ZERO], premultiply: false },
  ];

  // 出口で 1 回だけ sRGB へエンコードする(第27章 2 節)。
  // ここから先のブレンド段は、このエンコード値の上で足し引きする(本文 2 節の落とし穴)
  vec3 encoded = linearToSrgb(linear);

  fragColor = vec4(u_premultiply == 1 ? encoded * alpha : encoded, alpha);

const gl = canvas.getContext('webgl2', { alpha: false });

        // ① 不透明な背景板を先に、深度書き込みありで描く
        gl.enable(gl.DEPTH_TEST);
        gl.depthMask(true);
        gl.disable(gl.BLEND);
        useOpaque();
        mat4.fromTranslation(model, [0, 0, -2.6]);
        drawOpaque(backdropMesh, model, vec3.fromValues(0.16, 0.17, 0.2), true);

        // ② 半透明の板を後から、深度書き込みなし・奥から手前へ(本文 4 節)
        gl.depthMask(false);
        applyBlend(preset);
        usePanels(preset.premultiply);
        sortPanels(true);
        for (const index of panelOrder) {
          drawPanel(panels[index], time);
        }

  function sortPanels(farToNear: boolean): void {
    for (let i = 0; i < panels.length; i++) {
      const c = panels[i].center;
      // ビュー空間の z(カメラ前方が負)。小さいほど遠い
      panelViewDepth[i] = view[2] * c[0] + view[6] * c[1] + view[10] * c[2] + view[14];
    }
    panelOrder.sort((a, b) =>
      farToNear ? panelViewDepth[a] - panelViewDepth[b] : panelViewDepth[b] - panelViewDepth[a],
    );
  }

        gl.depthMask(option === 0);
        gl.enable(gl.BLEND);
        gl.blendEquation(gl.FUNC_ADD);
        gl.blendFunc(gl.SRC_ALPHA, additive ? gl.ONE : gl.ONE_MINUS_SRC_ALPHA);

        gl.bindVertexArray(latticeVao);
        // 1 頂点 = 1 点。格子ぜんぶが 1 回のドローコールで出る
        gl.drawArrays(gl.POINTS, 0, latticeCount);

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

  // 透視射影では clip.w がカメラからの距離に比例する(第12章)。
  // 割れば「遠いほど小さい」= 立体としてもっともらしい大きさになる。
  // gl_PointSize に何も書かないと点の大きさは未定義なので(本文 5 節)、
  // どちらの枝でも必ず書く
  gl_PointSize = u_attenuate == 1 ? u_pointSize * REFERENCE_DISTANCE / clip.w : u_pointSize;

  // gl_PointCoord は点の中での 0〜1。s は左から右へ、t は上から下へ増える。
  // t が gl_FragCoord.y と逆向きであることに注意(本文 5 節)
  vec2 p = gl_PointCoord - 0.5;

  if (u_round == 1) {
    float d = length(p) * 2.0;
    // 向きの反転は引数の入れ替えではなく 1.0 - で書く。smoothstep は
    // edge0 >= edge1 のとき結果が未定義(GLSL ES 3.00 §8.3)
    float mask = 1.0 - smoothstep(1.0 - EDGE, 1.0, d);
    if (mask <= 0.0) {
      discard; // 円の外は捨てる。正方形のフラグメントは作られている(本文 5 節)
    }
    fragColor = vec4(linearToSrgb(v_color * mask), 1.0);
    return;
  }

  // 中身は毎フレーム書き換えるので DYNAMIC_DRAW。ただしこれは「ヒント」でしかない(本文 6 節)。
  // 領域は最大粒子数ぶん確保しておき、以降は bufferSubData で上書きする
  gl.bufferData(gl.ARRAY_BUFFER, particleData.byteLength, gl.DYNAMIC_DRAW);
  const PARTICLE_STRIDE = FLOATS_PER_PARTICLE * Float32Array.BYTES_PER_ELEMENT;
  gl.enableVertexAttribArray(0); // a_position
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, PARTICLE_STRIDE, 0);
  gl.enableVertexAttribArray(1); // a_life
  gl.vertexAttribPointer(
    1,
    1,
    gl.FLOAT,
    false,
    PARTICLE_STRIDE,
    3 * Float32Array.BYTES_PER_ELEMENT,
  );

        // ① CPU で全粒子を更新する。粒子数に比例した仕事(本文 6 節)
        updateParticles(deltaSeconds);

        // ② 更新した範囲だけを GPU へ送る
        gl.bindVertexArray(particleVao);
        gl.bindBuffer(gl.ARRAY_BUFFER, particleVbo);
        const upload = particleData.subarray(0, particleCount * FLOATS_PER_PARTICLE);
        gl.bufferSubData(gl.ARRAY_BUFFER, 0, upload);
        uploadedBytes = upload.byteLength;

  function updateParticles(deltaSeconds: number): void {
    const decay = deltaSeconds / PARTICLE_LIFE_SPAN;
    for (let i = 0; i < particleCount; i++) {
      const base = i * FLOATS_PER_PARTICLE;
      const life = particleData[base + 3] - decay;
      if (life <= 0) {
        respawnParticle(i, 1);
        continue;
      }
      particleVelocities[i * 3 + 1] -= PARTICLE_GRAVITY * deltaSeconds;
      particleData[base] += particleVelocities[i * 3] * deltaSeconds;
      particleData[base + 1] += particleVelocities[i * 3 + 1] * deltaSeconds;
      particleData[base + 2] += particleVelocities[i * 3 + 2] * deltaSeconds;
      particleData[base + 3] = life;
    }
  }

// 第30章: ブレンディングとパーティクル — 加算合成と深度の兼ね合い
//
// 1 つの canvas で 4 本のデモを切り替える。
//
//   1. ブレンド式    — 半透明の板 3 枚を、blendFunc の組み合わせを変えながら重ねる
//   2. 半透明と深度  — 不透明なトーラス + 半透明の板。depthMask と描画順の効き方
//   3. 点を描く      — gl.POINTS と gl_PointSize / gl_PointCoord
//   4. CPU パーティクル — Float32Array を毎フレーム bufferSubData で送り、加算合成で描く
//
// ブレンドも深度書き込みも「状態」なので(第1章の状態機械)、切り替えは
// gl.enable / gl.blendFunc / gl.depthMask の掛け替えだけで済む。シェーダーは差し替えない。
//
// 色の扱い: どのシェーダーも色をリニア空間で組み立て、出口で linearToSrgb を 1 回だけ通す
// (第27章の約束)。したがってフレームバッファに入るのは sRGB エンコード値で、
// ブレンド段はその格納値の上で足し引きする。この選択の意味は解説ページの 2 節を参照。

import { mat3, mat4, type ReadonlyMat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import { createPlane, createTorus, type Geometry, interleave } from '../../lib/geometry';
import { compileShader, linkProgram } from '../../lib/shader';
import blendFragmentTemplate from './01-blend.frag?raw';
import blendVertexSource from './01-blend.vert?raw';
import opaqueFragmentTemplate from './02-opaque.frag?raw';
import opaqueVertexSource from './02-opaque.vert?raw';
import pointsFragmentTemplate from './03-points.frag?raw';
import pointsVertexSource from './03-points.vert?raw';
import particlesFragmentTemplate from './04-particles.frag?raw';
import particlesVertexSource from './04-particles.vert?raw';
import colorChunkSource from './color.glsl?raw';

// ---------------------------------------------------------------------------
// 極小のインクルード(第23章と同じ)
// ---------------------------------------------------------------------------

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

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

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

const UP: ReadonlyVec3 = vec3.fromValues(0, 1, 0);
// canvas の CSS 背景色と同じ。これは「画面に出る sRGB 値」なので、そのまま clearColor へ渡す
const BACKGROUND_COLOR: ReadonlyVec3 = vec3.fromValues(0.06, 0.07, 0.09);
// 面から光源へ向かう単位ベクトル・ワールド空間(第17章の約束)
const LIGHT_DIRECTION: ReadonlyVec3 = vec3.normalize(
  vec3.create(),
  vec3.fromValues(0.35, 0.7, 0.6),
);

// デモ 3 の格子
const LATTICE_SIDE = 9; // 9³ = 729 点
const LATTICE_EXTENT = 2.2;
// 頂点シェーダーへ渡す基準の大きさ(ピクセル)。読み出し行にも同じ変数から出す
const LATTICE_POINT_SIZE = 11;
const PARTICLE_POINT_SIZE = 15;

// デモ 4 のパーティクル
const PARTICLE_COUNTS = [2000, 8000, 32000] as const;
const MAX_PARTICLES = PARTICLE_COUNTS[PARTICLE_COUNTS.length - 1];
// 1 粒子ぶんの属性 = 位置 3 float + 寿命 1 float。この 4 が転送量の主役(本文 6 節)
const FLOATS_PER_PARTICLE = 4;
const PARTICLE_GRAVITY = 5.2;
const PARTICLE_LIFE_SPAN = 2.6; // 秒
const PARTICLE_SPEED = 4.6;
// タブ復帰などで巨大な dt が来たときに粒子を吹き飛ばさないための上限(秒)
const MAX_DELTA = 1 / 20;

// ---------------------------------------------------------------------------
// GL の定数名を引くための表(読み出し行に「そのままの定数名」を出すため)
// ---------------------------------------------------------------------------

const BLEND_FACTOR_NAMES = [
  'ZERO',
  'ONE',
  'SRC_COLOR',
  'ONE_MINUS_SRC_COLOR',
  'DST_COLOR',
  'ONE_MINUS_DST_COLOR',
  'SRC_ALPHA',
  'ONE_MINUS_SRC_ALPHA',
  'DST_ALPHA',
  'ONE_MINUS_DST_ALPHA',
  'CONSTANT_COLOR',
  'ONE_MINUS_CONSTANT_COLOR',
  'CONSTANT_ALPHA',
  'ONE_MINUS_CONSTANT_ALPHA',
  'SRC_ALPHA_SATURATE',
] as const;

const BLEND_EQUATION_NAMES = [
  'FUNC_ADD',
  'FUNC_SUBTRACT',
  'FUNC_REVERSE_SUBTRACT',
  'MIN',
  'MAX',
] as const;

/** GLenum の値から定数名を引く表を作る。gl から実際の値を読むので、書き間違いが起きない */
function buildEnumNames(gl: WebGL2RenderingContext, names: readonly string[]): Map<GLenum, string> {
  const table = new Map<GLenum, string>();
  for (const name of names) {
    const value = (gl as unknown as Record<string, number | undefined>)[name];
    if (typeof value === 'number') {
      table.set(value, name);
    }
  }
  return table;
}

// ---------------------------------------------------------------------------
// メッシュ(第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 };
}

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

// ---------------------------------------------------------------------------
// 半透明の板(デモ 1・2 で共用)
// ---------------------------------------------------------------------------

interface Panel {
  /** 板の中心(ワールド) */
  center: vec3;
  /** Y 軸まわりの傾き */
  yaw: number;
  color: ReadonlyVec3;
  alpha: number;
}

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

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  demoControls: HTMLParagraphElement,
  optionControls: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  const factorNames = buildEnumNames(gl, BLEND_FACTOR_NAMES);
  const equationNames = buildEnumNames(gl, BLEND_EQUATION_NAMES);

  // --- プログラム 4 本 -------------------------------------------------------

  const link = (vertexSource: string, fragmentTemplate: string): WebGLProgram =>
    linkProgram(
      gl,
      compileShader(gl, gl.VERTEX_SHADER, vertexSource),
      compileShader(gl, gl.FRAGMENT_SHADER, resolveIncludes(fragmentTemplate)),
    );

  const blendProgram = link(blendVertexSource, blendFragmentTemplate);
  const opaqueProgram = link(opaqueVertexSource, opaqueFragmentTemplate);
  const pointsProgram = link(pointsVertexSource, pointsFragmentTemplate);
  const particlesProgram = link(particlesVertexSource, particlesFragmentTemplate);

  const at = (program: WebGLProgram, name: string): WebGLUniformLocation | null =>
    gl.getUniformLocation(program, name);

  const blendLocations = {
    model: at(blendProgram, 'u_model'),
    view: at(blendProgram, 'u_view'),
    projection: at(blendProgram, 'u_projection'),
    color: at(blendProgram, 'u_color'),
    alpha: at(blendProgram, 'u_alpha'),
    premultiply: at(blendProgram, 'u_premultiply'),
  };
  const opaqueLocations = {
    model: at(opaqueProgram, 'u_model'),
    view: at(opaqueProgram, 'u_view'),
    projection: at(opaqueProgram, 'u_projection'),
    normalMatrix: at(opaqueProgram, 'u_normalMatrix'),
    color: at(opaqueProgram, 'u_color'),
    lightDirection: at(opaqueProgram, 'u_lightDirection'),
    checker: at(opaqueProgram, 'u_checker'),
  };
  const pointsLocations = {
    model: at(pointsProgram, 'u_model'),
    view: at(pointsProgram, 'u_view'),
    projection: at(pointsProgram, 'u_projection'),
    pointSize: at(pointsProgram, 'u_pointSize'),
    attenuate: at(pointsProgram, 'u_attenuate'),
    round: at(pointsProgram, 'u_round'),
  };
  const particlesLocations = {
    view: at(particlesProgram, 'u_view'),
    projection: at(particlesProgram, 'u_projection'),
    pointSize: at(particlesProgram, 'u_pointSize'),
  };

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

  const panelMesh = createMesh(gl, createPlane(2.6, 2.6));
  const backdropMesh = createMesh(gl, createPlane(11, 7));
  const torusMesh = createMesh(gl, createTorus(1.15, 0.42, 64, 28));

  const panels: Panel[] = [
    {
      center: vec3.fromValues(-0.85, 0.35, -0.9),
      yaw: 0.32,
      color: vec3.fromValues(0.72, 0.13, 0.16),
      alpha: 0.55,
    },
    {
      center: vec3.fromValues(0.0, -0.2, 0.0),
      yaw: -0.18,
      color: vec3.fromValues(0.1, 0.5, 0.28),
      alpha: 0.55,
    },
    {
      center: vec3.fromValues(0.85, 0.3, 0.9),
      yaw: 0.24,
      color: vec3.fromValues(0.13, 0.3, 0.72),
      alpha: 0.55,
    },
  ];

  // --- デモ 3: 点の格子 -------------------------------------------------------

  const latticeCount = LATTICE_SIDE ** 3;
  const latticePositions = new Float32Array(latticeCount * 3);
  {
    let i = 0;
    for (let z = 0; z < LATTICE_SIDE; z++) {
      for (let y = 0; y < LATTICE_SIDE; y++) {
        for (let x = 0; x < LATTICE_SIDE; x++) {
          const t = (v: number): number => ((v / (LATTICE_SIDE - 1)) * 2 - 1) * LATTICE_EXTENT;
          latticePositions[i++] = t(x);
          latticePositions[i++] = t(y);
          latticePositions[i++] = t(z);
        }
      }
    }
  }
  const latticeVao = gl.createVertexArray();
  gl.bindVertexArray(latticeVao);
  const latticeVbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, latticeVbo);
  gl.bufferData(gl.ARRAY_BUFFER, latticePositions, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  gl.bindVertexArray(null);

  // この環境が実際に対応している点の大きさ。仕様が要求する最大値の下限は 1 しかない(本文 5 節)
  const pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE) as Float32Array;

  // --- デモ 4: パーティクル ---------------------------------------------------

  // GPU へ送る配列。1 粒子 = [x, y, z, life] のインターリーブ(第13章)
  const particleData = new Float32Array(MAX_PARTICLES * FLOATS_PER_PARTICLE);
  // 速度は CPU 側だけで持つ。GPU は知らなくてよい
  const particleVelocities = new Float32Array(MAX_PARTICLES * 3);
  const particleRandom = createRandom(30303030);

  /** 粒子 i を噴出口へ戻す。life は 1(生まれたて)から 0 へ減っていく */
  function respawnParticle(index: number, life: number): void {
    const base = index * FLOATS_PER_PARTICLE;
    particleData[base] = (particleRandom() - 0.5) * 0.18;
    particleData[base + 1] = 0;
    particleData[base + 2] = (particleRandom() - 0.5) * 0.18;
    particleData[base + 3] = life;

    // 上向きの円錐にばらす(第10章の極座標)
    const azimuth = particleRandom() * Math.PI * 2;
    const spread = 0.16 + particleRandom() * 0.42;
    const speed = PARTICLE_SPEED * (0.62 + particleRandom() * 0.38);
    particleVelocities[index * 3] = Math.cos(azimuth) * spread * speed;
    particleVelocities[index * 3 + 1] = speed;
    particleVelocities[index * 3 + 2] = Math.sin(azimuth) * spread * speed;
  }

  for (let i = 0; i < MAX_PARTICLES; i++) {
    // 最初から寿命をばらしておかないと、全粒子が同じタイミングで一斉に消える
    respawnParticle(i, particleRandom());
  }

  const particleVao = gl.createVertexArray();
  gl.bindVertexArray(particleVao);
  const particleVbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, particleVbo);
  // 中身は毎フレーム書き換えるので DYNAMIC_DRAW。ただしこれは「ヒント」でしかない(本文 6 節)。
  // 領域は最大粒子数ぶん確保しておき、以降は bufferSubData で上書きする
  gl.bufferData(gl.ARRAY_BUFFER, particleData.byteLength, gl.DYNAMIC_DRAW);
  const PARTICLE_STRIDE = FLOATS_PER_PARTICLE * Float32Array.BYTES_PER_ELEMENT;
  gl.enableVertexAttribArray(0); // a_position
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, PARTICLE_STRIDE, 0);
  gl.enableVertexAttribArray(1); // a_life
  gl.vertexAttribPointer(
    1,
    1,
    gl.FLOAT,
    false,
    PARTICLE_STRIDE,
    3 * Float32Array.BYTES_PER_ELEMENT,
  );
  gl.bindVertexArray(null);

  let particleCount: number = PARTICLE_COUNTS[1];
  let uploadedBytes = 0;

  /** CPU 側の更新。粒子数に比例して重くなるのはここと、次の bufferSubData(本文 6 節) */
  function updateParticles(deltaSeconds: number): void {
    const decay = deltaSeconds / PARTICLE_LIFE_SPAN;
    for (let i = 0; i < particleCount; i++) {
      const base = i * FLOATS_PER_PARTICLE;
      const life = particleData[base + 3] - decay;
      if (life <= 0) {
        respawnParticle(i, 1);
        continue;
      }
      particleVelocities[i * 3 + 1] -= PARTICLE_GRAVITY * deltaSeconds;
      particleData[base] += particleVelocities[i * 3] * deltaSeconds;
      particleData[base + 1] += particleVelocities[i * 3 + 1] * deltaSeconds;
      particleData[base + 2] += particleVelocities[i * 3 + 2] * deltaSeconds;
      particleData[base + 3] = life;
    }
  }

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

  const orbit = { theta: 0.5, phi: 0.28, radius: 7.5 };
  const PHI_LIMIT = Math.PI / 2 - 0.05;
  const MIN_RADIUS = 3.5;
  const MAX_RADIUS = 22;

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

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

  const eye = vec3.create();
  const model = mat4.create();
  const view = mat4.create();
  const projection = mat4.create();
  const normalMatrix = mat3.create();
  const panelOrder = [0, 1, 2];
  const panelViewDepth = [0, 0, 0];

  const setVec3 = (location: WebGLUniformLocation | null, v: ReadonlyVec3): void => {
    gl.uniform3f(location, v[0], v[1], v[2]);
  };

  // --- 描画の部品 ---------------------------------------------------------------

  function drawMesh(mesh: Mesh): void {
    gl.bindVertexArray(mesh.vao);
    gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0);
  }

  function useOpaque(): void {
    gl.useProgram(opaqueProgram);
    gl.uniformMatrix4fv(opaqueLocations.view, false, view);
    gl.uniformMatrix4fv(opaqueLocations.projection, false, projection);
    setVec3(opaqueLocations.lightDirection, LIGHT_DIRECTION);
  }

  function drawOpaque(
    mesh: Mesh,
    modelMatrix: ReadonlyMat4,
    color: ReadonlyVec3,
    checker: boolean,
  ): void {
    mat3.normalFromMat4(normalMatrix, modelMatrix); // 法線行列(第17章)
    gl.uniformMatrix4fv(opaqueLocations.model, false, modelMatrix); // transpose は常に false
    gl.uniformMatrix3fv(opaqueLocations.normalMatrix, false, normalMatrix);
    setVec3(opaqueLocations.color, color);
    gl.uniform1i(opaqueLocations.checker, checker ? 1 : 0);
    drawMesh(mesh);
  }

  function usePanels(premultiply: boolean): void {
    gl.useProgram(blendProgram);
    gl.uniformMatrix4fv(blendLocations.view, false, view);
    gl.uniformMatrix4fv(blendLocations.projection, false, projection);
    gl.uniform1i(blendLocations.premultiply, premultiply ? 1 : 0);
  }

  function drawPanel(panel: Panel, time: number): void {
    mat4.fromTranslation(model, [
      panel.center[0],
      panel.center[1] + Math.sin(time * 0.6 + panel.center[0]) * 0.12,
      panel.center[2],
    ]);
    mat4.rotateY(model, model, panel.yaw + Math.sin(time * 0.35 + panel.center[2]) * 0.1);
    gl.uniformMatrix4fv(blendLocations.model, false, model);
    setVec3(blendLocations.color, panel.color);
    gl.uniform1f(blendLocations.alpha, panel.alpha);
    drawMesh(panelMesh);
  }

  /**
   * 板を「奥から手前へ」または「手前から奥へ」並べ替える。
   * 毎フレーム CPU でソートする — この 3 枚では一瞬だが、コストは枚数に対して
   * N log N で増える(本文 4 節)
   */
  function sortPanels(farToNear: boolean): void {
    for (let i = 0; i < panels.length; i++) {
      const c = panels[i].center;
      // ビュー空間の z(カメラ前方が負)。小さいほど遠い
      panelViewDepth[i] = view[2] * c[0] + view[6] * c[1] + view[10] * c[2] + view[14];
    }
    panelOrder.sort((a, b) =>
      farToNear ? panelViewDepth[a] - panelViewDepth[b] : panelViewDepth[b] - panelViewDepth[a],
    );
  }

  // --- ブレンドのプリセット(解説ページ 2 節の表の 4 つ + 「ブレンドなし」) -----------
  // 並び順は表とは変えてある。乗算済みアルファ(3 節)を通常アルファの隣に置いて、
  // 「絵が変わらない」ことをボタン 1 つで見比べられるようにするため

  interface BlendPreset {
    label: string;
    /** null なら gl.disable(gl.BLEND) */
    func: readonly [GLenum, GLenum] | null;
    /** ソースの RGB にアルファを掛けてから出すか(3 節) */
    premultiply: boolean;
  }

  const blendPresets: readonly BlendPreset[] = [
    { label: 'ブレンドなし', func: null, premultiply: false },
    { label: '通常アルファ', func: [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA], premultiply: false },
    { label: '乗算済みアルファ', func: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA], premultiply: true },
    { label: '加算', func: [gl.SRC_ALPHA, gl.ONE], premultiply: false },
    { label: '乗算', func: [gl.DST_COLOR, gl.ZERO], premultiply: false },
  ];

  function applyBlend(preset: BlendPreset): void {
    if (preset.func === null) {
      gl.disable(gl.BLEND);
      return;
    }
    gl.enable(gl.BLEND);
    gl.blendEquation(gl.FUNC_ADD);
    gl.blendFunc(preset.func[0], preset.func[1]);
  }

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

  const FRAME_SAMPLES = 30;
  const frameTimes: number[] = [];

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

  /** いま GL に入っているブレンド・深度の状態を、そのままの定数名で読み出す */
  function blendStateText(): string {
    if (!gl.getParameter(gl.BLEND)) {
      return 'BLEND 無効(ソースがそのまま上書き)';
    }
    const equation = equationNames.get(gl.getParameter(gl.BLEND_EQUATION_RGB)) ?? '?';
    const src = factorNames.get(gl.getParameter(gl.BLEND_SRC_RGB)) ?? '?';
    const dst = factorNames.get(gl.getParameter(gl.BLEND_DST_RGB)) ?? '?';
    return `BLEND 有効 / blendEquation(${equation}) / blendFunc(${src}, ${dst})`;
  }

  function depthStateText(): string {
    const test = gl.getParameter(gl.DEPTH_TEST) ? '有効' : '無効';
    const mask = gl.getParameter(gl.DEPTH_WRITEMASK) ? 'true' : 'false';
    return `DEPTH_TEST ${test} / depthMask(${mask})`;
  }

  // ---------------------------------------------------------------------------
  // デモ 4 本
  // ---------------------------------------------------------------------------

  interface Demo {
    label: string;
    /** #option-buttons に並べるラベル。空ならボタン列そのものを隠す */
    options: readonly string[];
    /** カメラの注視点と、このデモへ切り替えたときの距離 */
    target: ReadonlyVec3;
    radius: number;
    draw(time: number, deltaSeconds: number, option: number): void;
    readout(option: number): string;
  }

  const demos: readonly Demo[] = [
    {
      label: 'ブレンド式',
      options: blendPresets.map((preset) => preset.label),
      target: vec3.fromValues(0, 0, 0),
      radius: 7.5,
      draw(time, _delta, option) {
        const preset = blendPresets[option];

        // ① 不透明な背景板を先に、深度書き込みありで描く
        gl.enable(gl.DEPTH_TEST);
        gl.depthMask(true);
        gl.disable(gl.BLEND);
        useOpaque();
        mat4.fromTranslation(model, [0, 0, -2.6]);
        drawOpaque(backdropMesh, model, vec3.fromValues(0.16, 0.17, 0.2), true);

        // ② 半透明の板を後から、深度書き込みなし・奥から手前へ(本文 4 節)
        gl.depthMask(false);
        applyBlend(preset);
        usePanels(preset.premultiply);
        sortPanels(true);
        for (const index of panelOrder) {
          drawPanel(panels[index], time);
        }
      },
      readout() {
        return `${blendStateText()} / ${depthStateText()} / 板 3 枚を奥から手前へ`;
      },
    },
    {
      label: '半透明と深度',
      options: [
        '書き込みあり・手前→奥',
        '書き込みなし・手前→奥',
        '書き込みなし・奥→手前',
        '加算・並べ替えなし',
      ],
      target: vec3.fromValues(0, 0, 0),
      radius: 6.4,
      draw(time, _delta, option) {
        const additive = option === 3;

        // ① 不透明なトーラス(深度書き込みあり・ブレンドなし)
        gl.enable(gl.DEPTH_TEST);
        gl.depthMask(true);
        gl.disable(gl.BLEND);
        useOpaque();
        mat4.fromYRotation(model, time * 0.25);
        mat4.rotateX(model, model, 0.42);
        drawOpaque(torusMesh, model, vec3.fromValues(0.5, 0.42, 0.3), false);

        // ② 半透明の板。ここが 4 節の実験台。
        // 4 つのプリセットは「深度書き込み」「描画順」「ブレンド式」を 1 つずつ変えていく
        gl.depthMask(option === 0);
        gl.enable(gl.BLEND);
        gl.blendEquation(gl.FUNC_ADD);
        gl.blendFunc(gl.SRC_ALPHA, additive ? gl.ONE : gl.ONE_MINUS_SRC_ALPHA);
        usePanels(false);
        if (additive) {
          // 加算は順序に依存しないので、並べ替えずに配列の順のまま描く
          for (const panel of panels) {
            drawPanel(panel, time);
          }
        } else {
          sortPanels(option === 2);
          for (const index of panelOrder) {
            drawPanel(panels[index], time);
          }
        }
      },
      readout(option) {
        const order = option === 3 ? '並べ替えなし(配列順)' : option === 2 ? '奥→手前' : '手前→奥';
        return `${blendStateText()} / ${depthStateText()} / 板 3 枚 ${order}`;
      },
    },
    {
      label: '点を描く',
      options: ['四角のまま', '円に切り抜く', '円 + 大きさを距離で変える'],
      target: vec3.fromValues(0, 0, 0),
      radius: 8.5,
      draw(time, _delta, option) {
        gl.enable(gl.DEPTH_TEST);
        gl.depthMask(true);
        gl.disable(gl.BLEND); // このデモだけはブレンドを使わない
        gl.useProgram(pointsProgram);
        mat4.fromYRotation(model, time * 0.18);
        gl.uniformMatrix4fv(pointsLocations.model, false, model);
        gl.uniformMatrix4fv(pointsLocations.view, false, view);
        gl.uniformMatrix4fv(pointsLocations.projection, false, projection);
        gl.uniform1f(pointsLocations.pointSize, LATTICE_POINT_SIZE);
        gl.uniform1i(pointsLocations.attenuate, option === 2 ? 1 : 0);
        gl.uniform1i(pointsLocations.round, option === 0 ? 0 : 1);

        gl.bindVertexArray(latticeVao);
        // 1 頂点 = 1 点。格子ぜんぶが 1 回のドローコールで出る
        gl.drawArrays(gl.POINTS, 0, latticeCount);
      },
      readout(option) {
        const size =
          option === 2
            ? `gl_PointSize = ${LATTICE_POINT_SIZE}.0 × REFERENCE_DISTANCE / gl_Position.w`
            : `gl_PointSize = ${LATTICE_POINT_SIZE}.0(一定)`;
        const shape = option === 0 ? '四角(切り抜きなし)' : 'gl_PointCoord で円に切り抜き';
        return (
          `gl.POINTS ${latticeCount} 点 / ドローコール 1 回 / ${size} / ${shape} / ` +
          `ALIASED_POINT_SIZE_RANGE = [${pointSizeRange[0]}, ${pointSizeRange[1]}]`
        );
      },
    },
    {
      label: 'CPU パーティクル',
      options: PARTICLE_COUNTS.map((count) => `粒子 ${count.toLocaleString('en-US')}`),
      target: vec3.fromValues(0, 1.9, 0),
      radius: 11,
      draw(_time, deltaSeconds, option) {
        particleCount = PARTICLE_COUNTS[option];

        // ① CPU で全粒子を更新する。粒子数に比例した仕事(本文 6 節)
        updateParticles(deltaSeconds);

        // ② 更新した範囲だけを GPU へ送る
        gl.bindVertexArray(particleVao);
        gl.bindBuffer(gl.ARRAY_BUFFER, particleVbo);
        const upload = particleData.subarray(0, particleCount * FLOATS_PER_PARTICLE);
        gl.bufferSubData(gl.ARRAY_BUFFER, 0, upload);
        uploadedBytes = upload.byteLength;

        // ③ 加算合成で描く。深度テストは残したまま書き込みだけ切る(本文 4 節)。
        // このデモには不透明な物体が無いのでテストは実質的に素通しだが、
        // 粒どうしが互いを深度で消さないことが要点なので、この形のまま置いている。
        // 加算は順序に依存しないので、並べ替えは一切していない
        gl.enable(gl.DEPTH_TEST);
        gl.depthMask(false);
        gl.enable(gl.BLEND);
        gl.blendEquation(gl.FUNC_ADD);
        gl.blendFunc(gl.ONE, gl.ONE);

        gl.useProgram(particlesProgram);
        gl.uniformMatrix4fv(particlesLocations.view, false, view);
        gl.uniformMatrix4fv(particlesLocations.projection, false, projection);
        gl.uniform1f(particlesLocations.pointSize, PARTICLE_POINT_SIZE);
        gl.drawArrays(gl.POINTS, 0, particleCount);
      },
      readout() {
        const perParticle = FLOATS_PER_PARTICLE * Float32Array.BYTES_PER_ELEMENT;
        const ms = frameTimes.length === 0 ? '—' : `${averageFrameMs().toFixed(1)} ms`;
        return (
          `粒子 ${particleCount.toLocaleString('en-US')} / ` +
          `1 粒子 ${FLOATS_PER_PARTICLE} float × ${Float32Array.BYTES_PER_ELEMENT} B = ${perParticle} B / ` +
          `bufferSubData 1 回 = ${uploadedBytes.toLocaleString('en-US')} B/フレーム / ` +
          `${blendStateText()} / ドローコール 1 回 / ` +
          `rAF 間隔 ${ms}(CPU 側の計測。GPU 時間ではありません・第35章)`
        );
      },
    },
  ];

  let demoIndex = 0;
  const optionIndices = demos.map(() => 0);

  // --- 切替ボタン(第13章と同じ作り) --------------------------------------------

  function addButtons(
    container: HTMLParagraphElement,
    labels: readonly string[],
    activeIndex: number,
    onSelect: (index: number) => void,
  ): void {
    container.replaceChildren();
    for (const [index, label] of labels.entries()) {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = label;
      button.setAttribute('aria-pressed', index === activeIndex ? 'true' : 'false');
      button.addEventListener('click', () => {
        onSelect(index);
        for (const other of container.querySelectorAll('button')) {
          other.setAttribute('aria-pressed', 'false');
        }
        button.setAttribute('aria-pressed', 'true');
      });
      container.append(button);
    }
  }

  /** デモを切り替えるたびにオプションのボタン列を作り直す。オプションが無ければ隠す */
  function rebuildOptionButtons(): void {
    const demo = demos[demoIndex];
    if (demo.options.length === 0) {
      optionControls.replaceChildren();
      optionControls.hidden = true;
      return;
    }
    optionControls.hidden = false;
    addButtons(optionControls, demo.options, optionIndices[demoIndex], (index) => {
      optionIndices[demoIndex] = index;
    });
  }

  addButtons(
    demoControls,
    demos.map((demo) => demo.label),
    demoIndex,
    (index) => {
      demoIndex = index;
      orbit.radius = demos[index].radius;
      rebuildOptionButtons();
    },
  );
  rebuildOptionButtons();

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

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    // 表示サイズ 0 でもバッファは最低 1px 確保する(アスペクト比が NaN になるのを防ぐ)
    const width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
    const height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

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

  let lastTimestamp = 0;
  let lastReadoutAt = 0;

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

    // rAF の間隔。タブが裏に回っているあいだ rAF は止まるので、復帰直後の
    // 巨大な差分は平均に混ぜない(計測ではなく、単に呼ばれなかっただけなので)
    const delta = timestamp - lastTimestamp;
    if (lastTimestamp !== 0 && delta < 200) {
      frameTimes.push(delta);
      if (frameTimes.length > FRAME_SAMPLES) frameTimes.shift();
    }
    const deltaSeconds = Math.min(MAX_DELTA, lastTimestamp === 0 ? 1 / 60 : delta / 1000);
    lastTimestamp = timestamp;

    const demo = demos[demoIndex];

    // カメラ(第15章)
    eye[0] = demo.target[0] + orbit.radius * Math.cos(orbit.phi) * Math.sin(orbit.theta);
    eye[1] = demo.target[1] + orbit.radius * Math.sin(orbit.phi);
    eye[2] = demo.target[2] + orbit.radius * Math.cos(orbit.phi) * Math.cos(orbit.theta);
    mat4.lookAt(view, eye, demo.target, UP);
    const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
    mat4.perspective(projection, FOVY, aspect, NEAR, FAR);

    // 深度テストを使うのでクリアには DEPTH_BUFFER_BIT を含める(第13章)。
    // clear は depthMask の影響を受ける(ES 3.0.6 §4.2.3)ので、必ず true に戻してから呼ぶ。
    // ただし既定のフレームバッファでは、合成のたびにブラウザが色・深度・ステンシルを消すため
    // (preserveDrawingBuffer の既定が false)この 1 行が無くても絵は変わらない。
    // 効いてくるのは自作の FBO(第20章)なので、規則どおりの書き方を手本として残してある
    gl.depthMask(true);
    gl.clearColor(BACKGROUND_COLOR[0], BACKGROUND_COLOR[1], BACKGROUND_COLOR[2], 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    demo.draw(time, deltaSeconds, optionIndices[demoIndex]);

    if (timestamp - lastReadoutAt > 250) {
      readout.textContent = demo.readout(optionIndices[demoIndex]);
      lastReadoutAt = timestamp;
    }
    requestAnimationFrame(frame);
  }

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

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

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

// alpha: false でコンテキストを作る(第2章 2 節のコンテキスト属性の表)。
// この章は canvas の中のブレンドだけを見せたいので、canvas とページの合成という
// もう一段のブレンドを最初から切っておく。描画バッファにアルファ成分が無くなるので、
// premultipliedAlpha も効かなくなる(本文 3 節)。
// なお ES 3.0.6 §4.1.7.4 は「カラーバッファに A が無ければ Ad は 1 とみなす」と定めている
const gl = canvas.getContext('webgl2', { alpha: false });
if (!gl) {
  throw new Error('このブラウザは WebGL2 に対応していません');
}

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

#version 300 es

// 第30章 半透明の板(デモ 1・デモ 2 で共用)。
// ブレンドの話に集中したいので、頂点シェーダーは座標変換と UV の受け渡しだけ。

// 第3部の共通の属性配置(第14章から): 0 = 位置, 1 = 法線, 2 = UV。
// この板は法線を使わないので location = 1 は宣言していない
// (VAO 側では 3 本とも配線してある。使わない属性が流れていても問題は起きない)
layout(location = 0) in vec3 a_position;
layout(location = 2) in vec2 a_uv;

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

out vec2 v_uv;

void main() {
  v_uv = a_uv;
  gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);
}

#version 300 es

// 第30章 半透明の板(デモ 1・デモ 2 で共用)。
// このシェーダーが決めるのは「ソースの色とアルファ」だけで、混ぜ方は決めていない。
// 混ぜ方は gl.blendFunc / gl.blendEquation という状態のほうにある(本文 1〜2 節)。

precision highp float;

// 板の色。リニア空間の値として書く(第27章の約束)
uniform vec3 u_color;
uniform float u_alpha;
// 1 なら RGB にアルファを掛けてから出す = アルファ乗算済み(本文 3 節)。
// このとき CPU 側は blendFunc(ONE, ONE_MINUS_SRC_ALPHA) に切り替える
uniform int u_premultiply;

in vec2 v_uv;

out vec4 fragColor;

#include "color.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 円板の縁をぼかす幅(直径に対する割合。第8章の smoothstep)
const float EDGE = 0.28;
// ----------------------------------------------------------------------

void main() {
  // UV の中心からの距離で円板に切り抜き、中心ほど濃くする
  float d = length(v_uv - 0.5) * 2.0;
  // smoothstep は edge0 < edge1 でしか定義されていない(GLSL ES 3.00 §8.3
  // 「Results are undefined if edge0 >= edge1.」)。向きを逆にしたいときは
  // 引数を入れ替えるのではなく、1.0 - で反転する(第8章と同じ形)
  float mask = 1.0 - smoothstep(1.0 - EDGE, 1.0, d);
  if (mask <= 0.0) {
    // 円の外は捨てる。アルファを 0 にするだけでは足りない —
    // 「ブレンドなし」と「乗算」はアルファを見ないので、四角い板がそのまま出てしまう
    discard;
  }

  vec3 linear = u_color * (0.45 + 0.55 * mask);
  float alpha = u_alpha * mask;

  // 出口で 1 回だけ sRGB へエンコードする(第27章 2 節)。
  // ここから先のブレンド段は、このエンコード値の上で足し引きする(本文 2 節の落とし穴)
  vec3 encoded = linearToSrgb(linear);

  fragColor = vec4(u_premultiply == 1 ? encoded * alpha : encoded, alpha);
}

#version 300 es

// 第30章 不透明な物体(デモ 1 の背景板・デモ 2 のトーラス)。
// 半透明を語るには「向こう側」が要る。その向こう側を用意するためだけのシェーダー。

// 第3部の共通の属性配置(第14章から): 0 = 位置, 1 = 法線, 2 = UV
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_normal;
layout(location = 2) in vec2 a_uv;

uniform mat4 u_model;
uniform mat4 u_view;
uniform mat4 u_projection;
uniform mat3 u_normalMatrix; // モデル行列の左上 3×3 の逆転置(第17章)

// ライティングはワールド空間で行う(第17章の約束)
out vec3 v_normal;
out vec2 v_uv;

void main() {
  v_normal = u_normalMatrix * a_normal;
  v_uv = a_uv;
  gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);
}