UBO と抽象化 — ミニエンジンを設計する

function uploadLight(slot: LightLocations, light: Light): void {
  gl.uniform1i(slot.type, light.type);
  setVec3(slot.position, light.position);
  setVec3(slot.direction, light.direction);
  setVec3(slot.color, light.color);
  gl.uniform1f(slot.intensity, light.intensity);
  setVec3(slot.attenuation, light.attenuation);
  gl.uniform1f(slot.coneCos, light.coneCos);
  gl.uniform1f(slot.penumbraCos, light.penumbraCos);
}

function uploadLights(
  positionRadius: WebGLUniformLocation | null,
  colorIntensity: WebGLUniformLocation | null,
  count: WebGLUniformLocation | null,
): void {
  // プレーンな配列は配列名だけでロケーションが取れ、要素をまとめて送れる(第18章)
  gl.uniform4fv(positionRadius, lightPositionRadius.subarray(0, lightCount * 4));
  gl.uniform4fv(colorIntensity, lightColorIntensity.subarray(0, lightCount * 4));
  gl.uniform1i(count, lightCount);
}

function baseAlignmentOf(type: Std140Type): number {
  switch (type) {
    case 'float':
    case 'int':
      return SCALAR_BYTES; // 規則 1
    case 'vec2':
      return 2 * SCALAR_BYTES; // 規則 2
    case 'vec3':
      return 4 * SCALAR_BYTES; // 規則 3
    case 'vec4':
      return 4 * SCALAR_BYTES; // 規則 2
    case 'mat4':
      return VEC4_ALIGNMENT; // 規則 5 → 規則 4
  }
}

// 規則 4: 配列の基本アライメントと配列ストライドは、1 要素の基本アライメントを
// vec4 の基本アライメントへ切り上げた値になる。だから float[64] は 256 バイトではなく
// 1024 バイト(1 要素 4 バイトの中身に、12 バイトの詰め物が付く)。
// 規則 6: mat4 の配列は S×C 本の列ベクトルの並びなので、1 要素は 4 列 × 16 = 64 バイト
const alignment = roundUp(elementAlignment, VEC4_ALIGNMENT);
const arrayStride = member.type === 'mat4' ? 4 * VEC4_ALIGNMENT : alignment;
const offset = roundUp(cursor, alignment);

export const FRAME_LAYOUT: Std140Layout = computeStd140Layout('Frame', [
  { name: 'u_ambientColor', type: 'vec3' },
  { name: 'u_exposure', type: 'float' },
  { name: 'u_fogRange', type: 'vec2' },
  { name: 'u_fogColor', type: 'vec3' },
]);

const reportedSize: number = gl.getActiveUniformBlockParameter(
  program,
  blockIndex,
  gl.UNIFORM_BLOCK_DATA_SIZE,
);

const list = wanted.map((entry) => entry.index);
const offsets: number[] = gl.getActiveUniforms(program, list, gl.UNIFORM_OFFSET);
const arrayStrides: number[] = gl.getActiveUniforms(program, list, gl.UNIFORM_ARRAY_STRIDE);
const matrixStrides: number[] = gl.getActiveUniforms(program, list, gl.UNIFORM_MATRIX_STRIDE);

const checks = renderer.checkLayouts(litShader);
const mismatches = checks.flatMap((check) => check.mismatches);
const inactive = checks.flatMap((check) => check.inactive);
const tailPadding = checks.flatMap((check) => check.tailPaddingNote ?? []);

const roundsUpTail = reportedSize === layout.size;
const omitsTail = reportedSize === layout.unpaddedSize;
let tailPaddingNote: string | null = null;
if (!roundsUpTail && omitsTail) {
  tailPaddingNote = sizeNote; // 末尾のパディングぶんだけの差。並びは合っている
} else if (!roundsUpTail) {
  mismatches.push(sizeNote); // それ以外の差は本物の食い違い
}

layout(std140) uniform Camera {
  mat4 u_view;
  mat4 u_projection;
  vec3 u_cameraPosition;
};

this.buffer = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
// 中身は毎フレーム書き換える前提。DYNAMIC_DRAW は「CPU が書いて GPU が読む」の意思表示。
// 確保するのは切り上げ済みの layout.size。GL が報告するブロックのサイズがこれより
// 小さいことがある(末尾を切り上げない実装)が、バッファが大きいぶんには問題にならない
gl.bufferData(gl.UNIFORM_BUFFER, layout.size, gl.DYNAMIC_DRAW);
// バッファをコンテキストのバインディングポイントに付ける。プログラム側の
// uniformBlockBinding と、この番号で待ち合わせる(本文 3 節)
gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, this.buffer);
gl.bindBuffer(gl.UNIFORM_BUFFER, null);

bindBlock(blockName: string, bindingPoint: number): void {
  if (!this.hasBlock(blockName)) return;
  const index = this.gl.getUniformBlockIndex(this.program, blockName);
  this.gl.uniformBlockBinding(this.program, index, bindingPoint);
}

const names = new Set<string>();
const count: number = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORM_BLOCKS);
for (let i = 0; i < count; i++) {
  const name = gl.getActiveUniformBlockName(this.program, i);
  if (name) names.add(name);
}
this.blockNames = names;

upload(gl: WebGL2RenderingContext): number {
  if (this.dirtyStart >= this.dirtyEnd) return 0;
  const start = this.dirtyStart;
  const bytes = this.dirtyEnd - start;
  gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
  gl.bufferSubData(gl.UNIFORM_BUFFER, start, new Uint8Array(this.words, start, bytes));
  gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  this.dirtyStart = 0;
  this.dirtyEnd = 0;
  return bytes;
}

private bindShared(shader: Shader, camera: Camera): void {
  if (shader.hasBlock('Camera')) return;
  const frame = this.frameUniforms;
  this.writer.mat4(shader.location('u_view'), camera.view);
  this.writer.mat4(shader.location('u_projection'), camera.projection);
  this.writer.vec3(shader.location('u_cameraPosition'), camera.position);

updateWorldMatrix(parentWorld: ReadonlyMat4 | null): void {
  if (parentWorld) {
    mat4.multiply(this.world, parentWorld, this.local);
  } else {
    mat4.copy(this.world, this.local);
  }
  for (const child of this.children) {
    child.updateWorldMatrix(this.world);
  }
}

if (this.sortBatches) {
  this.items.sort((a, b) => {
    const shaderDiff = sortId(a.material.shader) - sortId(b.material.shader);
    if (shaderDiff !== 0) return shaderDiff;
    return sortId(a.material) - sortId(b.material);
  });
}

if (material.shader !== currentShader) {
  currentShader = material.shader;
  usedPrograms.add(currentShader);
  gl.useProgram(currentShader.program);
  programSwitches++;
  this.registerShader(currentShader);
  const before = this.writer.calls;
  this.bindShared(currentShader, camera);
  sharedUniformCalls += this.writer.calls - before;
  currentMaterial = null;
}

// 第34章のローカルモジュール: std140 のオフセット計算と、UBO のラッパ。
//
// src/lib/ ではなく章のディレクトリに置いている(第23章 gbuffer.ts・第29章 feedback.ts と
// 同じ判断。理由の一覧は本文 7 節)。
//
// このファイルの主役は computeStd140Layout() で、OpenGL ES 3.0.6 §2.12.6.4
// "Standard Uniform Block Layout" の規則 1〜10 をそのまま関数にしたもの。
// オフセットを手で数えて定数に書くと、ブロックの宣言を 1 行変えるたびに全部ずれる。
// そして verifyStd140Layout() で「自分の計算」と「GL が報告するオフセット」を突き合わせる。
// 手計算が合っていることを GL に確認させる、というのが本文 2 節の眼目。

/** この章で使う型だけ。ES 3.0.6 §2.12.6.4 の規則は他の型にも同じ形で書いてある */
export type Std140Type = 'float' | 'int' | 'vec2' | 'vec3' | 'vec4' | 'mat4';

export interface Std140Member {
  name: string;
  type: Std140Type;
  /** 配列なら要素数。省略したら配列ではない */
  length?: number;
}

export interface Std140Field {
  name: string;
  type: Std140Type;
  /** 0 = 配列ではない */
  length: number;
  /** ブロック先頭からのバイト位置 */
  offset: number;
  /** 規則 1〜3(配列は規則 4 で vec4 境界へ切り上げ) */
  baseAlignment: number;
  /** 配列でなければ 0 */
  arrayStride: number;
  /** 行列でなければ 0。mat4 は列 vec4 4 本なので 16 */
  matrixStride: number;
  /** 実際に値が入るバイト数(パディングを含まない) */
  usefulBytes: number;
}

export interface Std140Layout {
  blockName: string;
  fields: Std140Field[];
  byName: Map<string, Std140Field>;
  /** ブロック全体のバイト数(末尾を 16 の倍数へ切り上げた値。CPU 側はこの大きさで確保する) */
  size: number;
  /** 末尾を切り上げる前、最後のメンバーの終端まで。実装が返すサイズはこちらのことがある */
  unpaddedSize: number;
  /** 値が入っているバイト数の合計 */
  usefulBytes: number;
  /** size - usefulBytes。std140 のパディングで無駄になったバイト数 */
  paddingBytes: number;
}

/** basic machine unit = 1 バイト。float / int / uint はいずれも 4 バイト(ES 3.0.6 §2.12.6.3) */
const SCALAR_BYTES = 4;
/** vec4 の基本アライメント。規則 4・9 の「切り上げ先」 */
const VEC4_ALIGNMENT = 16;

/** 型 1 つが占めるバイト数(パディング抜き) */
function sizeOf(type: Std140Type): number {
  switch (type) {
    case 'float':
    case 'int':
      return SCALAR_BYTES;
    case 'vec2':
      return 2 * SCALAR_BYTES;
    case 'vec3':
      return 3 * SCALAR_BYTES;
    case 'vec4':
      return 4 * SCALAR_BYTES;
    case 'mat4':
      return 16 * SCALAR_BYTES;
  }
}

/**
 * 配列でない 1 要素の基本アライメント。
 * 規則 1: スカラーは N バイト。規則 2: 2 成分・4 成分ベクトルは 2N / 4N。
 * 規則 3: **3 成分ベクトルは 4N**(ここが std140 でいちばん踏まれる)。
 * 規則 5: 列優先の mat4 は「列 vec4 4 本の配列」と同じ扱いなので、規則 4 経由で 16。
 */
function baseAlignmentOf(type: Std140Type): number {
  switch (type) {
    case 'float':
    case 'int':
      return SCALAR_BYTES; // 規則 1
    case 'vec2':
      return 2 * SCALAR_BYTES; // 規則 2
    case 'vec3':
      return 4 * SCALAR_BYTES; // 規則 3
    case 'vec4':
      return 4 * SCALAR_BYTES; // 規則 2
    case 'mat4':
      return VEC4_ALIGNMENT; // 規則 5 → 規則 4
  }
}

function roundUp(value: number, alignment: number): number {
  return Math.ceil(value / alignment) * alignment;
}

/**
 * uniform ブロックのメンバー宣言から、std140 のオフセットとブロックのサイズを計算する。
 * 出典は OpenGL ES 3.0.6 §2.12.6.4 "Standard Uniform Block Layout" の規則 1〜10。
 *
 * ブロック全体は「基本オフセット 0 の構造体」として並べる、と §2.12.6.4 の本文が定めている。
 * 末尾のパディングについて仕様が明記しているのは「後続メンバーの基本オフセット」だけなので
 * (規則 9)、最上位ブロックの末尾を切り上げるかどうかは実装しだいになる。
 * そこで size(切り上げ済み)と unpaddedSize(切り上げ前)の両方を持たせ、
 * verifyStd140Layout() が UNIFORM_BLOCK_DATA_SIZE をどちらと一致するかで見分ける。
 * CPU 側のバッファは大きいほうの size で確保する — 本文 2 節。
 */
export function computeStd140Layout(blockName: string, members: Std140Member[]): Std140Layout {
  const fields: Std140Field[] = [];
  let cursor = 0;
  let usefulBytes = 0;

  for (const member of members) {
    const length = member.length ?? 0;
    const elementAlignment = baseAlignmentOf(member.type);

    if (length === 0) {
      const offset = roundUp(cursor, elementAlignment);
      const bytes = sizeOf(member.type);
      fields.push({
        name: member.name,
        type: member.type,
        length: 0,
        offset,
        baseAlignment: elementAlignment,
        arrayStride: 0,
        matrixStride: member.type === 'mat4' ? VEC4_ALIGNMENT : 0,
        usefulBytes: bytes,
      });
      cursor = offset + bytes;
      usefulBytes += bytes;
      continue;
    }

    // 規則 4: 配列の基本アライメントと配列ストライドは、1 要素の基本アライメントを
    // vec4 の基本アライメントへ切り上げた値になる。だから float[64] は 256 バイトではなく
    // 1024 バイト(1 要素 4 バイトの中身に、12 バイトの詰め物が付く)。
    // 規則 6: mat4 の配列は S×C 本の列ベクトルの並びなので、1 要素は 4 列 × 16 = 64 バイト
    const alignment = roundUp(elementAlignment, VEC4_ALIGNMENT);
    const arrayStride = member.type === 'mat4' ? 4 * VEC4_ALIGNMENT : alignment;
    const offset = roundUp(cursor, alignment);
    fields.push({
      name: member.name,
      type: member.type,
      length,
      offset,
      baseAlignment: alignment,
      arrayStride,
      matrixStride: member.type === 'mat4' ? VEC4_ALIGNMENT : 0,
      usefulBytes: sizeOf(member.type) * length,
    });
    // 規則 4: 配列の後ろのメンバーの基本オフセットは、配列の基本アライメントの倍数へ切り上げる
    cursor = roundUp(offset + arrayStride * length, alignment);
    usefulBytes += sizeOf(member.type) * length;
  }

  const unpaddedSize = cursor;
  const size = roundUp(cursor, VEC4_ALIGNMENT);
  return {
    blockName,
    fields,
    byName: new Map(fields.map((field) => [field.name, field])),
    size,
    unpaddedSize,
    usefulBytes,
    paddingBytes: size - usefulBytes,
  };
}

// ---------------------------------------------------------------------------
// GL への問い合わせによる検算
// ---------------------------------------------------------------------------

export interface Std140Check {
  /** オフセット・ストライドが GL とすべて一致したか(照合できなかったメンバーは判定に入れない) */
  ok: boolean;
  /** 手計算と GL の報告が食い違った箇所。**ブロック末尾のパディングぶんの差は含めない** */
  mismatches: string[];
  /**
   * GL が返したブロックのサイズが「末尾を切り上げる前の値」だったときの説明。
   * 食い違いではないので mismatches とは別枠にする(本文 2 節)。一致していたら null
   */
  tailPaddingNote: string | null;
  /** シェーダーが 1 度も読んでいないため GL からオフセットを引けなかったメンバー */
  inactive: string[];
  /** GL が報告したブロックのバイト数(UNIFORM_BLOCK_DATA_SIZE) */
  reportedSize: number;
}

/** getUniformIndices が「そんな uniform は無い」を表すために返す値(GL の INVALID_INDEX) */
const INVALID_INDEX = 0xffffffff;

/**
 * computeStd140Layout() の結果を、GL が報告する実際のオフセットと突き合わせる。
 *
 * 引くのは getUniformIndices → getActiveUniforms(UNIFORM_OFFSET / UNIFORM_ARRAY_STRIDE /
 * UNIFORM_MATRIX_STRIDE) と、getActiveUniformBlockParameter(UNIFORM_BLOCK_DATA_SIZE)。
 * 配列メンバーの名前は GL 側では `name[0]` になっていることがあるので両方試す。
 */
export function verifyStd140Layout(
  gl: WebGL2RenderingContext,
  program: WebGLProgram,
  layout: Std140Layout,
): Std140Check {
  const mismatches: string[] = [];
  const inactive: string[] = [];

  const blockIndex = gl.getUniformBlockIndex(program, layout.blockName);
  if (blockIndex === INVALID_INDEX) {
    return {
      ok: false,
      mismatches: [`ブロック ${layout.blockName} がアクティブではありません`],
      tailPaddingNote: null,
      inactive,
      reportedSize: 0,
    };
  }

  const reportedSize: number = gl.getActiveUniformBlockParameter(
    program,
    blockIndex,
    gl.UNIFORM_BLOCK_DATA_SIZE,
  );
  // ブロック末尾を 16 の倍数へ切り上げるかどうかは §2.12.6.4 に明文が無く、実装によって割れる。
  // 切り上げ前の値が返ってきたのなら「食い違い」ではない(メンバーのオフセットは
  // 1 つもずれていない)ので、mismatches ではなく別枠に出す。本文 2 節
  const sizeNote = `${layout.blockName} のサイズ 手計算 ${layout.size} / GL ${reportedSize}`;
  const roundsUpTail = reportedSize === layout.size;
  const omitsTail = reportedSize === layout.unpaddedSize;
  let tailPaddingNote: string | null = null;
  if (!roundsUpTail && omitsTail) {
    tailPaddingNote = sizeNote; // 末尾のパディングぶんだけの差。並びは合っている
  } else if (!roundsUpTail) {
    mismatches.push(sizeNote); // それ以外の差は本物の食い違い
  }

  // 配列は `name[0]` で登録されている実装があるので、素の名前と両方を並べて 1 回で引く
  const names = layout.fields.flatMap((field) =>
    field.length > 0 ? [field.name, `${field.name}[0]`] : [field.name],
  );
  const indices = gl.getUniformIndices(program, names);
  if (!indices) {
    return {
      ok: false,
      mismatches: [...mismatches, `${layout.blockName}: getUniformIndices が null を返しました`],
      tailPaddingNote,
      inactive,
      reportedSize,
    };
  }

  const wanted: { field: Std140Field; index: number }[] = [];
  let cursor = 0;
  for (const field of layout.fields) {
    const candidates = field.length > 0 ? 2 : 1;
    let found = INVALID_INDEX;
    for (let i = 0; i < candidates; i++) {
      if (indices[cursor + i] !== INVALID_INDEX) found = indices[cursor + i];
    }
    cursor += candidates;
    if (found === INVALID_INDEX) {
      // ここは仕様上は通らないはずの保険。ES 3.0.6 §2.12.6 が「shared または std140 の
      // ブロックのメンバーは、どのシェーダーからも参照されていなくても全部アクティブ」と
      // 定めていて、WebGL2 のブロックは必ず std140 だから(本文 2 節)。通ったら前提の
      // ほうが崩れているので、名前を控えて main.ts が警告する。
      // なお std140 のオフセットは宣言だけで決まるので、手計算のほうは引けなくても出せる
      inactive.push(field.name);
      continue;
    }
    wanted.push({ field, index: found });
  }

  if (wanted.length > 0) {
    const list = wanted.map((entry) => entry.index);
    const offsets: number[] = gl.getActiveUniforms(program, list, gl.UNIFORM_OFFSET);
    const arrayStrides: number[] = gl.getActiveUniforms(program, list, gl.UNIFORM_ARRAY_STRIDE);
    const matrixStrides: number[] = gl.getActiveUniforms(program, list, gl.UNIFORM_MATRIX_STRIDE);
    for (const [i, entry] of wanted.entries()) {
      const { field } = entry;
      if (offsets[i] !== field.offset) {
        mismatches.push(`${field.name}: offset 手計算 ${field.offset} / GL ${offsets[i]}`);
      }
      if (field.length > 0 && arrayStrides[i] !== field.arrayStride) {
        mismatches.push(
          `${field.name}: arrayStride 手計算 ${field.arrayStride} / GL ${arrayStrides[i]}`,
        );
      }
      if (field.matrixStride > 0 && matrixStrides[i] !== field.matrixStride) {
        mismatches.push(
          `${field.name}: matrixStride 手計算 ${field.matrixStride} / GL ${matrixStrides[i]}`,
        );
      }
    }
  }

  return { ok: mismatches.length === 0, mismatches, tailPaddingNote, inactive, reportedSize };
}

// ---------------------------------------------------------------------------
// UBO のラッパ
// ---------------------------------------------------------------------------

/**
 * 1 本の uniform ブロックに対応するバッファと、その CPU 側の写し。
 *
 * 書き込みは CPU 側の ArrayBuffer に対して行い、変更のあったバイト範囲だけを
 * upload() で bufferSubData する(本文 3 節の部分更新)。値が変わらなかったフレームは
 * bufferSubData を 1 回も呼ばない。
 */
export class UniformBlockBuffer {
  readonly layout: Std140Layout;
  readonly bindingPoint: number;
  readonly buffer: WebGLBuffer;
  private readonly words: ArrayBuffer;
  private readonly asFloat: Float32Array;
  private readonly asInt: Int32Array;
  /** 未アップロードの範囲 [dirtyStart, dirtyEnd) バイト。空なら dirtyStart >= dirtyEnd */
  private dirtyStart = 0;
  private dirtyEnd = 0;

  constructor(gl: WebGL2RenderingContext, layout: Std140Layout, bindingPoint: number) {
    this.layout = layout;
    this.bindingPoint = bindingPoint;
    this.words = new ArrayBuffer(layout.size);
    this.asFloat = new Float32Array(this.words);
    this.asInt = new Int32Array(this.words);

    this.buffer = gl.createBuffer();
    gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
    // 中身は毎フレーム書き換える前提。DYNAMIC_DRAW は「CPU が書いて GPU が読む」の意思表示。
    // 確保するのは切り上げ済みの layout.size。GL が報告するブロックのサイズがこれより
    // 小さいことがある(末尾を切り上げない実装)が、バッファが大きいぶんには問題にならない
    gl.bufferData(gl.UNIFORM_BUFFER, layout.size, gl.DYNAMIC_DRAW);
    // バッファをコンテキストのバインディングポイントに付ける。プログラム側の
    // uniformBlockBinding と、この番号で待ち合わせる(本文 3 節)
    gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, this.buffer);
    gl.bindBuffer(gl.UNIFORM_BUFFER, null);
  }

  private field(name: string): Std140Field {
    const field = this.layout.byName.get(name);
    if (!field) {
      throw new Error(`${this.layout.blockName} に ${name} というメンバーはありません`);
    }
    return field;
  }

  private touch(offset: number, bytes: number): void {
    if (this.dirtyStart >= this.dirtyEnd) {
      this.dirtyStart = offset;
      this.dirtyEnd = offset + bytes;
      return;
    }
    this.dirtyStart = Math.min(this.dirtyStart, offset);
    this.dirtyEnd = Math.max(this.dirtyEnd, offset + bytes);
  }

  setFloat(name: string, value: number): void {
    const { offset } = this.field(name);
    this.asFloat[offset / 4] = value;
    this.touch(offset, 4);
  }

  setInt(name: string, value: number): void {
    const { offset } = this.field(name);
    this.asInt[offset / 4] = value;
    this.touch(offset, 4);
  }

  /** vec2 / vec3 / vec4 / mat4 をまとめて。source の長さぶんだけ書く */
  setFloats(name: string, source: ArrayLike<number>): void {
    const { offset } = this.field(name);
    this.asFloat.set(source, offset / 4);
    this.touch(offset, source.length * 4);
  }

  /**
   * vec4 の配列へ count 要素ぶん書く。std140 の vec4 配列はストライド 16 バイト =
   * 隙間なしなので、Float32Array をそのまま流し込める。
   * vec3 の配列だとここに 1 要素ずつのループが要る(ストライドが 16 で中身が 12 だから)
   */
  setVec4Array(name: string, source: Float32Array, count: number): void {
    const field = this.field(name);
    this.asFloat.set(source.subarray(0, count * 4), field.offset / 4);
    this.touch(field.offset, count * field.arrayStride);
  }

  /**
   * 変更のあった範囲だけを GPU へ送る。送ったバイト数を返す(0 なら bufferSubData を
   * 1 回も呼んでいない)。
   */
  upload(gl: WebGL2RenderingContext): number {
    if (this.dirtyStart >= this.dirtyEnd) return 0;
    const start = this.dirtyStart;
    const bytes = this.dirtyEnd - start;
    gl.bindBuffer(gl.UNIFORM_BUFFER, this.buffer);
    gl.bufferSubData(gl.UNIFORM_BUFFER, start, new Uint8Array(this.words, start, bytes));
    gl.bindBuffer(gl.UNIFORM_BUFFER, null);
    this.dirtyStart = 0;
    this.dirtyEnd = 0;
    return bytes;
  }

  dispose(gl: WebGL2RenderingContext): void {
    gl.bindBufferBase(gl.UNIFORM_BUFFER, this.bindingPoint, null);
    gl.deleteBuffer(this.buffer);
  }
}

// 第34章のミニエンジン: 部品の定義(Shader / Material / Mesh / Node / Scene / Camera)。
// 1 フレームを描く Renderer は renderer.ts にある。
//
// このファイルも src/lib/ ではなく章のディレクトリに置いている。理由は本文 7 節。
// 中身は第13〜23章の main.ts に毎回書いてきたものを、責務ごとに名前を付けて並べ直しただけで、
// 新しい WebGL の API は 1 つも出てこない(UBO 関連は uniform-buffer.ts と renderer.ts)。

import { mat4, type ReadonlyMat3, type ReadonlyMat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import { type Geometry, interleave } from '../../lib/geometry';
import { compileShader, linkProgram } from '../../lib/shader';

const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;

// ---------------------------------------------------------------------------
// uniform の書き込み口 — 何回・何バイト渡したかを数えながら送る
// ---------------------------------------------------------------------------

/**
 * gl.uniform* の薄い包み。呼び出し回数と「アプリが WebGL に渡したバイト数」を数える。
 * この章の読み出し行はこの 2 つが主役なので、隠さずここに置いてある
 * (GPU 側で実際に何バイト動いたかは数えられない。数えているのは CPU 側が渡した量)。
 */
export class UniformWriter {
  calls = 0;
  bytes = 0;

  constructor(private readonly gl: WebGL2RenderingContext) {}

  reset(): void {
    this.calls = 0;
    this.bytes = 0;
  }

  int(location: WebGLUniformLocation | null, value: number): void {
    this.gl.uniform1i(location, value);
    this.calls++;
    this.bytes += 4;
  }

  float(location: WebGLUniformLocation | null, value: number): void {
    this.gl.uniform1f(location, value);
    this.calls++;
    this.bytes += 4;
  }

  vec2(location: WebGLUniformLocation | null, x: number, y: number): void {
    this.gl.uniform2f(location, x, y);
    this.calls++;
    this.bytes += 8;
  }

  vec3(location: WebGLUniformLocation | null, v: ReadonlyVec3): void {
    this.gl.uniform3f(location, v[0], v[1], v[2]);
    this.calls++;
    this.bytes += 12;
  }

  vec4Array(location: WebGLUniformLocation | null, data: Float32Array, count: number): void {
    const view = data.subarray(0, count * 4);
    this.gl.uniform4fv(location, view);
    this.calls++;
    this.bytes += view.byteLength;
  }

  mat3(location: WebGLUniformLocation | null, m: ReadonlyMat3): void {
    this.gl.uniformMatrix3fv(location, false, m); // transpose は常に false
    this.calls++;
    this.bytes += 9 * FLOAT_BYTES;
  }

  mat4(location: WebGLUniformLocation | null, m: ReadonlyMat4): void {
    this.gl.uniformMatrix4fv(location, false, m);
    this.calls++;
    this.bytes += 16 * FLOAT_BYTES;
  }
}

// ---------------------------------------------------------------------------
// Shader — プログラムと、名前から引いたロケーションのキャッシュ
// ---------------------------------------------------------------------------

/**
 * 持つもの: リンク済みのプログラム / uniform ロケーションのキャッシュ /
 * この program が持っている uniform ブロックの名前。
 * 持たないもの: シェーダーのソースの管理(`?raw` で読むのは呼び出し側の仕事)、
 * `#define` を差し替えたバリアントの生成、uniform の「値」。
 */
export class Shader {
  readonly program: WebGLProgram;
  readonly blockNames: ReadonlySet<string>;
  private readonly locations = new Map<string, WebGLUniformLocation | null>();

  constructor(
    private readonly gl: WebGL2RenderingContext,
    vertexSource: string,
    fragmentSource: string,
    readonly label: string,
  ) {
    this.program = linkProgram(
      gl,
      compileShader(gl, gl.VERTEX_SHADER, vertexSource),
      compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource),
    );
    // この program が持っている uniform ブロックを名前で控えておく。
    // Renderer は「Camera ブロックを持っているか」で配線の仕方を切り替える(本文 6 節)
    const names = new Set<string>();
    const count: number = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORM_BLOCKS);
    for (let i = 0; i < count; i++) {
      const name = gl.getActiveUniformBlockName(this.program, i);
      if (name) names.add(name);
    }
    this.blockNames = names;
  }

  /** ロケーションは名前の文字列検索なので 1 回だけ引いて覚える(第4章) */
  location(name: string): WebGLUniformLocation | null {
    const cached = this.locations.get(name);
    if (cached !== undefined) return cached;
    const location = this.gl.getUniformLocation(this.program, name);
    this.locations.set(name, location);
    return location;
  }

  hasBlock(blockName: string): boolean {
    return this.blockNames.has(blockName);
  }

  /** ブロックをバインディングポイントへ結ぶ。プログラム側の待ち合わせ場所の指定(本文 3 節) */
  bindBlock(blockName: string, bindingPoint: number): void {
    if (!this.hasBlock(blockName)) return;
    const index = this.gl.getUniformBlockIndex(this.program, blockName);
    this.gl.uniformBlockBinding(this.program, index, bindingPoint);
  }

  dispose(): void {
    this.gl.deleteProgram(this.program);
  }
}

// ---------------------------------------------------------------------------
// Material — シェーダー + そのマテリアル固有の値 + 描画状態
// ---------------------------------------------------------------------------

/** 深度とカリングの状態。ブレンドはこの章のシーンに半透明が無いので持たせていない */
export interface RenderState {
  depthTest: boolean;
  depthWrite: boolean;
  /** 裏面カリング(gl.BACK)を有効にするか。第13章 5 節の CCW 前提 */
  cullBackFace: boolean;
}

export const OPAQUE_STATE: RenderState = {
  depthTest: true,
  depthWrite: true,
  cullBackFace: true,
};

export interface MaterialUniforms {
  /** リニア空間の基本色 */
  baseColor: ReadonlyVec3;
  specularColor: ReadonlyVec3;
  shininess: number;
  /** 自己発光(リニア)。光が当たらなくても見える量 */
  emissive: ReadonlyVec3;
}

/**
 * 持つもの: どのシェーダーで描くか / そのマテリアル固有の uniform / 描画状態。
 * 持たないもの: モデル行列(それは Node の役)。ジオメトリ(それは Mesh の役)。
 *
 * 深度テストを Material に持たせたのは、「半透明は深度書き込みを切る」のように
 * 状態が材質と一緒に決まるからで、Renderer 側に持たせると
 * 「このメッシュだけ深度を切る」が表現できなくなる(本文 5 節)。
 */
export class Material {
  constructor(
    readonly shader: Shader,
    readonly uniforms: MaterialUniforms,
    readonly state: RenderState = OPAQUE_STATE,
  ) {}

  /** 自分の uniform を送る。Renderer が「マテリアルが変わったとき」だけ呼ぶ */
  apply(writer: UniformWriter): void {
    writer.vec3(this.shader.location('u_baseColor'), this.uniforms.baseColor);
    writer.vec3(this.shader.location('u_specularColor'), this.uniforms.specularColor);
    writer.float(this.shader.location('u_shininess'), this.uniforms.shininess);
    writer.vec3(this.shader.location('u_emissive'), this.uniforms.emissive);
  }
}

// ---------------------------------------------------------------------------
// Mesh — VAO + インデックス数 + 描画モード
// ---------------------------------------------------------------------------

/**
 * 持つもの: VAO / インデックス数 / 描画モード。
 * 持たないもの: 位置も色も材質も持たない。同じ Mesh を何個の Node が指してもよい。
 */
export class Mesh {
  constructor(
    private readonly gl: WebGL2RenderingContext,
    readonly vao: WebGLVertexArrayObject,
    readonly indexCount: number,
    readonly buffers: WebGLBuffer[],
    readonly mode: GLenum,
  ) {}

  /** src/lib/geometry.ts の Geometry(第14章)から作る。手順は第13章のまま */
  static fromGeometry(gl: WebGL2RenderingContext, geometry: Geometry): Mesh {
    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);

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

    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);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
    return new Mesh(gl, vao, geometry.indices.length, [vbo, ibo], gl.TRIANGLES);
  }

  dispose(): void {
    this.gl.deleteVertexArray(this.vao);
    for (const buffer of this.buffers) this.gl.deleteBuffer(buffer);
  }
}

// ---------------------------------------------------------------------------
// Node / Scene — 親子のモデル行列
// ---------------------------------------------------------------------------

/**
 * 持つもの: ローカル行列 / ワールド行列 / 親子関係 / 描くものがあれば Mesh と Material。
 * 持たないもの: 描き方。ノードは自分を描かない(描くのは Renderer)。
 *
 * 構図は glTF のノード階層(第19章 7 節)と同じ。親のワールド行列に自分のローカル行列を
 * 掛けたものが自分のワールド行列で、それを根から葉へ 1 回のたどりで配る。
 */
export class Node {
  readonly local = mat4.create();
  readonly world = mat4.create();
  readonly children: Node[] = [];
  parent: Node | null = null;
  mesh: Mesh | null = null;
  material: Material | null = null;

  constructor(readonly name: string) {}

  add(child: Node): Node {
    child.parent = this;
    this.children.push(child);
    return child;
  }

  /**
   * 根から呼ぶと、木全体のワールド行列が揃う。
   * gl-matrix の mat4.multiply(out, a, b) は out = a × b なので、親が左。
   * 逆にすると「子の座標系で親を動かす」ことになり、公転が自転にすり替わる
   */
  updateWorldMatrix(parentWorld: ReadonlyMat4 | null): void {
    if (parentWorld) {
      mat4.multiply(this.world, parentWorld, this.local);
    } else {
      mat4.copy(this.world, this.local);
    }
    for (const child of this.children) {
      child.updateWorldMatrix(this.world);
    }
  }
}

export interface Light {
  /** ワールド座標。ノードに追従させたければ毎フレーム書き換える */
  position: vec3;
  /** 影響半径。これより遠いフラグメントは計算しない(第23章と同じパック) */
  radius: number;
  /** リニア空間の色 */
  color: ReadonlyVec3;
  intensity: number;
}

/**
 * シーンは「根のノード + 光源のリスト」。カメラは持たない(描くたびに渡す)。
 * 環境光やフォグは Frame ブロックの持ち物にしてある — シーンごとではなく
 * 「そのフレームの見え方」の設定だから(本文 4 節)
 */
export class Scene extends Node {
  readonly lights: Light[] = [];
}

// ---------------------------------------------------------------------------
// Camera — 第15章の軌道カメラを「状態 + 更新ルール」にしたもの
// ---------------------------------------------------------------------------

/**
 * 持つもの: 注視点と球面座標の状態、視野角・near・far、そこから作る view / projection。
 * 持たないもの: 入力。pointer と wheel をどう繋ぐかは main.ts の仕事で、
 * この部品は「orbit の 3 つの数を書き換えられたら行列を作り直す」だけ。
 * 軌道カメラそのものの解説は第15章。
 */
export class Camera {
  readonly orbit = { theta: 0.7, phi: 0.35, radius: 12 };
  readonly target = vec3.fromValues(0, 0, 0);
  readonly position = vec3.create();
  readonly view = mat4.create();
  readonly projection = mat4.create();

  constructor(
    readonly fovy: number,
    readonly near: number,
    readonly far: number,
  ) {}

  /** aspect は毎フレーム描画先の幅 / 高さから渡す(第3部の規約) */
  update(aspect: number): void {
    const { theta, phi, radius } = this.orbit;
    this.position[0] = this.target[0] + radius * Math.cos(phi) * Math.sin(theta);
    this.position[1] = this.target[1] + radius * Math.sin(phi);
    this.position[2] = this.target[2] + radius * Math.cos(phi) * Math.cos(theta);
    mat4.lookAt(this.view, this.position, this.target, UP);
    mat4.perspective(this.projection, this.fovy, aspect, this.near, this.far);
  }
}

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

// 第34章のミニエンジン: 1 フレームを描く Renderer と、UBO の 3 層の定義。
//
// engine.ts から分けてあるのは、部品の定義(何を持つか)と 1 フレームの手順(いつ何をするか)が
// 別の話だから。ファイルはこの 2 本までにしてある。
//
// UBO は更新頻度で 3 層に切ってある(本文 4 節)。
//   Frame  (binding 0) — 環境光・露出・フォグ。値が変わったときだけ書く
//   Camera (binding 1) — view / projection / カメラ位置。毎フレーム書く
//   Lights (binding 2) — 光源の配列。位置だけ毎フレーム、色と本数は変わったときだけ
// オブジェクトごとの値(モデル行列・材質)は UBO に入れていない。理由は本文 4 節。

import { mat3, type ReadonlyVec3, vec3 } from 'gl-matrix';
import {
  type Camera,
  type Material,
  type Node,
  type Scene,
  type Shader,
  UniformWriter,
} from './engine';
import {
  computeStd140Layout,
  type Std140Check,
  type Std140Layout,
  UniformBlockBuffer,
  verifyStd140Layout,
} from './uniform-buffer';

/** lit.frag / plain.frag の #define MAX_LIGHTS と必ず同じ値にする */
export const MAX_LIGHTS = 64;

/**
 * バインディングポイントの番号。GLSL 側には書けない — GLSL ES 3.00 の uniform ブロックに
 * layout(binding = N) は無い(§4.3.8.3 が許すのはレイアウトの指定だけ)。
 * だから配線は CPU 側の uniformBlockBinding でやるしかない(本文 3 節)
 */
export const FRAME_BINDING = 0;
export const CAMERA_BINDING = 1;
export const LIGHTS_BINDING = 2;

// ブロックの宣言と、この 3 つのメンバー表は 1 対 1 に対応していること。
// 順番が 1 つでも違えばオフセットがずれる(そしてそれは verifyStd140Layout が見つける)
export const FRAME_LAYOUT: Std140Layout = computeStd140Layout('Frame', [
  { name: 'u_ambientColor', type: 'vec3' },
  { name: 'u_exposure', type: 'float' },
  { name: 'u_fogRange', type: 'vec2' },
  { name: 'u_fogColor', type: 'vec3' },
]);

export const CAMERA_LAYOUT: Std140Layout = computeStd140Layout('Camera', [
  { name: 'u_view', type: 'mat4' },
  { name: 'u_projection', type: 'mat4' },
  { name: 'u_cameraPosition', type: 'vec3' },
]);

export const LIGHTS_LAYOUT: Std140Layout = computeStd140Layout('Lights', [
  { name: 'u_lightPositionRadius', type: 'vec4', length: MAX_LIGHTS },
  { name: 'u_lightColorIntensity', type: 'vec4', length: MAX_LIGHTS },
  { name: 'u_lightCount', type: 'int' },
]);

export const ALL_LAYOUTS: readonly Std140Layout[] = [FRAME_LAYOUT, CAMERA_LAYOUT, LIGHTS_LAYOUT];

/** 1 フレームで数えられた量。時間は測らない(GPU 時間は第35章) */
export interface FrameStats {
  meshes: number;
  drawCalls: number;
  /** gl.uniform* の呼び出し回数の合計 */
  uniformCalls: number;
  /** そのうち、プログラムごとに払う共有ぶん */
  sharedUniformCalls: number;
  /** アプリが gl.uniform* に渡したバイト数 */
  uniformBytes: number;
  bufferSubDataCalls: number;
  bufferSubDataBytes: number;
  /** このフレームで useProgram を呼んだ回数 */
  programSwitches: number;
  /** マテリアルの uniform を送り直した回数 */
  materialSwitches: number;
  /** このフレームで使ったプログラムの本数 */
  programs: number;
}

export interface FrameUniforms {
  ambientColor: ReadonlyVec3;
  exposure: number;
  fogNear: number;
  fogFar: number;
  fogColor: ReadonlyVec3;
}

interface DrawItem {
  node: Node;
  material: Material;
}

// 並べ替えの比較キーに使う、生成順の通し番号。オブジェクトそのものは順序を持たないので
let nextSortId = 1;
const sortIds = new WeakMap<object, number>();
function sortId(target: object): number {
  let id = sortIds.get(target);
  if (id === undefined) {
    id = nextSortId++;
    sortIds.set(target, id);
  }
  return id;
}

export class Renderer {
  readonly frameBlock: UniformBlockBuffer;
  readonly cameraBlock: UniformBlockBuffer;
  readonly lightsBlock: UniformBlockBuffer;
  /** プログラム → マテリアル → メッシュの順に並べ替えるか(本文 6 節) */
  sortBatches = true;

  private readonly writer: UniformWriter;
  private readonly registered = new Set<Shader>();
  private readonly items: DrawItem[] = [];
  private readonly normalMatrix = mat3.create();
  // ブロックへ書く前の中継。ブロックを持たないシェーダーにも同じ値を配るので、
  // 「UBO の中身」ではなく「エンジンが持っている値」としてここに置いてある
  private readonly lightPositionRadius = new Float32Array(MAX_LIGHTS * 4);
  private readonly lightColorIntensity = new Float32Array(MAX_LIGHTS * 4);
  private lightCount = 0;
  private frameUniforms: FrameUniforms = {
    ambientColor: vec3.fromValues(0.03, 0.035, 0.045),
    exposure: 1,
    fogNear: 20,
    fogFar: 60,
    fogColor: vec3.fromValues(0.06, 0.07, 0.09),
  };

  constructor(private readonly gl: WebGL2RenderingContext) {
    this.writer = new UniformWriter(gl);
    this.frameBlock = new UniformBlockBuffer(gl, FRAME_LAYOUT, FRAME_BINDING);
    this.cameraBlock = new UniformBlockBuffer(gl, CAMERA_LAYOUT, CAMERA_BINDING);
    this.lightsBlock = new UniformBlockBuffer(gl, LIGHTS_LAYOUT, LIGHTS_BINDING);
  }

  /** UBO 3 本のバイト数の合計 */
  get uboBytes(): number {
    return FRAME_LAYOUT.size + CAMERA_LAYOUT.size + LIGHTS_LAYOUT.size;
  }

  /** そのうち std140 のパディングで無駄になったバイト数 */
  get uboPaddingBytes(): number {
    return FRAME_LAYOUT.paddingBytes + CAMERA_LAYOUT.paddingBytes + LIGHTS_LAYOUT.paddingBytes;
  }

  /**
   * 値が変わったときだけ呼ぶ。毎フレーム呼ばないので、Frame ブロックの bufferSubData は
   * 「変わったフレーム」にしか出ない — 更新頻度で層を分けた効果がそのまま読み出し行に出る
   */
  setFrameUniforms(uniforms: FrameUniforms): void {
    this.frameUniforms = uniforms;
    this.frameBlock.setFloats('u_ambientColor', uniforms.ambientColor);
    this.frameBlock.setFloat('u_exposure', uniforms.exposure);
    this.frameBlock.setFloats('u_fogRange', [uniforms.fogNear, uniforms.fogFar]);
    this.frameBlock.setFloats('u_fogColor', uniforms.fogColor);
  }

  /** 光源の色と本数。位置は毎フレーム render() の中で書き直す */
  setLights(scene: Scene): void {
    this.lightCount = Math.min(scene.lights.length, MAX_LIGHTS);
    for (let i = 0; i < this.lightCount; i++) {
      const light = scene.lights[i];
      this.lightColorIntensity[i * 4] = light.color[0];
      this.lightColorIntensity[i * 4 + 1] = light.color[1];
      this.lightColorIntensity[i * 4 + 2] = light.color[2];
      this.lightColorIntensity[i * 4 + 3] = light.intensity;
    }
    this.lightsBlock.setVec4Array(
      'u_lightColorIntensity',
      this.lightColorIntensity,
      this.lightCount,
    );
    this.lightsBlock.setInt('u_lightCount', this.lightCount);
  }

  /** 手計算した std140 のオフセットを、GL が報告する値と突き合わせる(本文 2 節) */
  checkLayouts(shader: Shader): Std140Check[] {
    const checks: Std140Check[] = [];
    for (const layout of ALL_LAYOUTS) {
      if (!shader.hasBlock(layout.blockName)) continue;
      this.registerShader(shader);
      checks.push(verifyStd140Layout(this.gl, shader.program, layout));
    }
    return checks;
  }

  render(scene: Scene, camera: Camera, clearColor: ReadonlyVec3): FrameStats {
    const gl = this.gl;
    this.writer.reset();

    // ① ワールド行列の更新。根から 1 回たどるだけで木全体が揃う
    scene.updateWorldMatrix(null);

    // ② カメラ。aspect は描画先の幅 / 高さ(第3部の規約)
    camera.update(gl.drawingBufferWidth / gl.drawingBufferHeight);

    // ③ 描くものを集める(木のたどり順のまま)
    this.items.length = 0;
    collect(scene, this.items);

    // ④ 状態の切り替えを減らす並べ替え。プログラム → マテリアル の順(本文 6 節)。
    // sort は安定なので、同じマテリアルの中では木のたどり順が残る
    if (this.sortBatches) {
      this.items.sort((a, b) => {
        const shaderDiff = sortId(a.material.shader) - sortId(b.material.shader);
        if (shaderDiff !== 0) return shaderDiff;
        return sortId(a.material) - sortId(b.material);
      });
    }

    // ⑤ UBO の更新。Camera は毎フレーム、Lights は位置だけ、Frame は変わったときだけ。
    // このフレームにブロックを読むプログラムが 1 本も無ければ、更新そのものを飛ばす
    // (デモ 1 の「素の uniform」側が、使わない UBO の更新まで数えてしまわないように)
    let bufferSubDataCalls = 0;
    let bufferSubDataBytes = 0;
    if (this.items.some((item) => item.material.shader.hasBlock('Camera'))) {
      this.cameraBlock.setFloats('u_view', camera.view);
      this.cameraBlock.setFloats('u_projection', camera.projection);
      this.cameraBlock.setFloats('u_cameraPosition', camera.position);
      for (let i = 0; i < this.lightCount; i++) {
        const light = scene.lights[i];
        this.lightPositionRadius[i * 4] = light.position[0];
        this.lightPositionRadius[i * 4 + 1] = light.position[1];
        this.lightPositionRadius[i * 4 + 2] = light.position[2];
        this.lightPositionRadius[i * 4 + 3] = light.radius;
      }
      this.lightsBlock.setVec4Array(
        'u_lightPositionRadius',
        this.lightPositionRadius,
        this.lightCount,
      );
      for (const block of [this.frameBlock, this.cameraBlock, this.lightsBlock]) {
        const bytes = block.upload(gl);
        if (bytes > 0) {
          bufferSubDataCalls++;
          bufferSubDataBytes += bytes;
        }
      }
    } else {
      // 素の uniform で送る側にも、同じ光源の値が要る
      for (let i = 0; i < this.lightCount; i++) {
        const light = scene.lights[i];
        this.lightPositionRadius[i * 4] = light.position[0];
        this.lightPositionRadius[i * 4 + 1] = light.position[1];
        this.lightPositionRadius[i * 4 + 2] = light.position[2];
        this.lightPositionRadius[i * 4 + 3] = light.radius;
      }
    }

    // ⑥ 描く
    gl.clearColor(clearColor[0], clearColor[1], clearColor[2], 1);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    let currentShader: Shader | null = null;
    let currentMaterial: Material | null = null;
    let programSwitches = 0;
    let materialSwitches = 0;
    let sharedUniformCalls = 0;
    let drawCalls = 0;
    const usedPrograms = new Set<Shader>();

    for (const item of this.items) {
      const { material, node } = item;
      const mesh = node.mesh;
      if (!mesh) continue;

      if (material.shader !== currentShader) {
        currentShader = material.shader;
        usedPrograms.add(currentShader);
        gl.useProgram(currentShader.program);
        programSwitches++;
        this.registerShader(currentShader);
        const before = this.writer.calls;
        this.bindShared(currentShader, camera);
        sharedUniformCalls += this.writer.calls - before;
        currentMaterial = null;
      }

      if (material !== currentMaterial) {
        currentMaterial = material;
        materialSwitches++;
        applyState(gl, material);
        material.apply(this.writer);
      }

      mat3.normalFromMat4(this.normalMatrix, node.world); // 法線行列(第17章)
      this.writer.mat4(material.shader.location('u_model'), node.world);
      this.writer.mat3(material.shader.location('u_normalMatrix'), this.normalMatrix);

      gl.bindVertexArray(mesh.vao);
      gl.drawElements(mesh.mode, mesh.indexCount, gl.UNSIGNED_SHORT, 0);
      drawCalls++;
    }
    gl.bindVertexArray(null);

    return {
      meshes: this.items.length,
      drawCalls,
      uniformCalls: this.writer.calls,
      sharedUniformCalls,
      uniformBytes: this.writer.bytes,
      bufferSubDataCalls,
      bufferSubDataBytes,
      programSwitches,
      materialSwitches,
      programs: usedPrograms.size,
    };
  }

  /**
   * プログラムのブロックをバインディングポイントへ結ぶ。リンクのたびに 1 回でよい
   * (逆に言えば、リンクし直したら必ずやり直す — 再リンクでバインディングは 0 に
   * リセットされる。ES 3.0.6 §2.12.6.5)
   */
  private registerShader(shader: Shader): void {
    if (this.registered.has(shader)) return;
    for (const layout of ALL_LAYOUTS) {
      shader.bindBlock(layout.blockName, bindingOf(layout));
    }
    this.registered.add(shader);
  }

  /**
   * 共有の値をシェーダーへ届ける。
   * UBO を持つプログラムには何もしなくてよい — バッファはコンテキストのバインディング
   * ポイントに付いていて、プログラムのブロックはそこを見にいくから。
   * ブロックを持たないプログラム(plain.vert / plain.frag)には、ここで 1 本ずつ送る。
   * この 2 本の差が、本文 1 節で数えた「配る手間」そのもの
   */
  private bindShared(shader: Shader, camera: Camera): void {
    if (shader.hasBlock('Camera')) return;
    const frame = this.frameUniforms;
    this.writer.mat4(shader.location('u_view'), camera.view);
    this.writer.mat4(shader.location('u_projection'), camera.projection);
    this.writer.vec3(shader.location('u_cameraPosition'), camera.position);
    this.writer.vec3(shader.location('u_ambientColor'), frame.ambientColor);
    this.writer.float(shader.location('u_exposure'), frame.exposure);
    this.writer.vec2(shader.location('u_fogRange'), frame.fogNear, frame.fogFar);
    this.writer.vec3(shader.location('u_fogColor'), frame.fogColor);
    this.writer.vec4Array(
      shader.location('u_lightPositionRadius'),
      this.lightPositionRadius,
      this.lightCount,
    );
    this.writer.vec4Array(
      shader.location('u_lightColorIntensity'),
      this.lightColorIntensity,
      this.lightCount,
    );
    this.writer.int(shader.location('u_lightCount'), this.lightCount);
  }

  dispose(): void {
    this.frameBlock.dispose(this.gl);
    this.cameraBlock.dispose(this.gl);
    this.lightsBlock.dispose(this.gl);
    this.registered.clear();
  }
}

function bindingOf(layout: Std140Layout): number {
  if (layout === FRAME_LAYOUT) return FRAME_BINDING;
  if (layout === CAMERA_LAYOUT) return CAMERA_BINDING;
  return LIGHTS_BINDING;
}

function collect(node: Node, out: DrawItem[]): void {
  if (node.mesh && node.material) {
    out.push({ node, material: node.material });
  }
  for (const child of node.children) collect(child, out);
}

function applyState(gl: WebGL2RenderingContext, material: Material): void {
  const state = material.state;
  if (state.depthTest) gl.enable(gl.DEPTH_TEST);
  else gl.disable(gl.DEPTH_TEST);
  gl.depthMask(state.depthWrite);
  if (state.cullBackFace) {
    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);
  } else {
    gl.disable(gl.CULL_FACE);
  }
}