ライティング基礎 — 法線・拡散反射・鏡面反射

v_normal = mat3(u_model) * a_normal;

// 法線行列 = モデル行列の左上 3×3 の逆転置(2 節)。
// モデル行列が変わるたびに作り直す。ここを mat3.fromMat4 にすると、
// 非一様スケールの楕円体だけ陰影が崩れる(「壊してみる」で試せる)
mat3.normalFromMat4(normalMatrix, model);

void main() {
  vec4 worldPosition = u_model * vec4(a_position, 1.0);

  v_worldPosition = worldPosition.xyz;
  // 法線には平行移動を効かせたくないので 3×3。非一様スケールでも面と垂直を保つのが法線行列
  v_normal = u_normalMatrix * a_normal;

  gl_Position = u_projection * u_view * worldPosition;
}

// 光の向き: 「面から光源へ向かう」単位ベクトル(4 節)。仰角 LIGHT_ELEVATION で
// 水平にゆっくり 1 周させる。cos/sin の組み立てなので、もともと長さは 1
const lightAngle = time * 0.35;
vec3.set(
  lightDirection,
  Math.cos(LIGHT_ELEVATION) * Math.sin(lightAngle),
  Math.sin(LIGHT_ELEVATION),
  Math.cos(LIGHT_ELEVATION) * Math.cos(lightAngle),
);

// 補間された法線は単位長ではない(3 節)。使う前に必ず正規化する
vec3 N = normalize(v_normal);
vec3 L = u_lightDirection;

// Lambert の余弦則。面が光に背を向けた側(dot が負)は 0 で止める(5 節)
float diffuse = max(dot(N, L), 0.0);
vec3 color = u_baseColor * u_lightColor * diffuse;

if (u_mode >= 1) {
  // 環境光: あらゆる方向から一様に来ることにした、乱暴だが便利な近似(6 節)
  color += u_baseColor * u_ambientColor;
}

if (u_mode >= 2) {
  // Blinn-Phong の鏡面反射(7 節)。H は L と V のちょうど中間を向く単位ベクトル
  vec3 V = normalize(u_cameraPosition - v_worldPosition);
  vec3 H = normalize(L + V);
  float specular = pow(max(dot(N, H), 0.0), u_shininess);
  // 光が当たっていない裏側にハイライトを乗せない(diffuse が 0 の面は鏡面も 0)
  color += u_specularColor * u_lightColor * specular * step(0.0001, diffuse);
}

// 補間されるのは法線ではなく、計算済みの色
out vec3 v_color;

void main() {
  fragColor = vec4(v_color, 1.0);
}

#version 300 es

// 第3部の共通の属性配置(第14章から): 0 = 位置, 1 = 法線, 2 = UV
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_normal;
// UV はこの章では使わない(インターリーブの配置を崩さないために宣言だけしておく)
layout(location = 2) in vec2 a_uv;

uniform mat4 u_model;
uniform mat4 u_view;
uniform mat4 u_projection;
// 法線行列: モデル行列の左上 3×3 の逆転置(2 節)。CPU 側の mat3.normalFromMat4 が作る
uniform mat3 u_normalMatrix;

// ライティングはワールド空間で行う(1 節)ので、法線も位置もワールド空間のまま渡す
out vec3 v_normal;
out vec3 v_worldPosition;

void main() {
  vec4 worldPosition = u_model * vec4(a_position, 1.0);

  v_worldPosition = worldPosition.xyz;
  // 法線には平行移動を効かせたくないので 3×3。非一様スケールでも面と垂直を保つのが法線行列
  v_normal = u_normalMatrix * a_normal;

  gl_Position = u_projection * u_view * worldPosition;
}

#version 300 es
precision highp float;

// 頂点シェーダーが線形補間して届けたワールド空間の法線と位置
in vec3 v_normal;
in vec3 v_worldPosition;

// 0 = 拡散反射のみ / 1 = 拡散 + 環境光 / 2 = Blinn-Phong(拡散 + 環境光 + 鏡面)
uniform int u_mode;
// 1.0 でライティングを一切かけず u_baseColor をそのまま出す(光源の向きを示す小球用)
uniform float u_unlit;

// 光源は方向光 1 つだけ(点光源・複数光源・減衰は第18章)。
// u_lightDirection は「面から光源へ向かう」単位ベクトル。光の進む向きではない(4 節)
uniform vec3 u_lightDirection;
uniform vec3 u_lightColor;
uniform vec3 u_ambientColor;

// マテリアル(構造体にまとめるのは第18章)
uniform vec3 u_baseColor;
uniform vec3 u_specularColor;
uniform float u_shininess;

// カメラのワールド座標。視線ベクトル V を作るために要る
uniform vec3 u_cameraPosition;

out vec4 fragColor;

void main() {
  // 補間された法線は単位長ではない(3 節)。使う前に必ず正規化する
  vec3 N = normalize(v_normal);
  vec3 L = u_lightDirection;

  // Lambert の余弦則。面が光に背を向けた側(dot が負)は 0 で止める(5 節)
  float diffuse = max(dot(N, L), 0.0);
  vec3 color = u_baseColor * u_lightColor * diffuse;

  if (u_mode >= 1) {
    // 環境光: あらゆる方向から一様に来ることにした、乱暴だが便利な近似(6 節)
    color += u_baseColor * u_ambientColor;
  }

  if (u_mode >= 2) {
    // Blinn-Phong の鏡面反射(7 節)。H は L と V のちょうど中間を向く単位ベクトル
    vec3 V = normalize(u_cameraPosition - v_worldPosition);
    vec3 H = normalize(L + V);
    float specular = pow(max(dot(N, H), 0.0), u_shininess);
    // 光が当たっていない裏側にハイライトを乗せない(diffuse が 0 の面は鏡面も 0)
    color += u_specularColor * u_lightColor * specular * step(0.0001, diffuse);
  }

  // 光源マーカーの小球だけはライティングを通さず、そのままの色で描く
  fragColor = vec4(mix(color, u_baseColor, u_unlit), 1.0);
}

#version 300 es

// Gouraud シェーディング用の頂点シェーダー(8 節)。
// lighting.frag と同じ Blinn-Phong の式を、フラグメントではなく頂点で 1 回だけ計算し、
// 結果の「色」を補間して渡す。式は 1 行も変えていない — 変えたのは計算する場所だけ。

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;

uniform int u_mode;

uniform vec3 u_lightDirection;
uniform vec3 u_lightColor;
uniform vec3 u_ambientColor;

uniform vec3 u_baseColor;
uniform vec3 u_specularColor;
uniform float u_shininess;

uniform vec3 u_cameraPosition;

// 補間されるのは法線ではなく、計算済みの色
out vec3 v_color;

void main() {
  vec4 worldPosition = u_model * vec4(a_position, 1.0);

  // 頂点の法線は補間を経ていないので本来 normalize は不要だが、
  // 法線行列が非一様スケールを含むと長さが変わるのでここでも揃えておく
  vec3 N = normalize(u_normalMatrix * a_normal);
  vec3 L = u_lightDirection;

  float diffuse = max(dot(N, L), 0.0);
  vec3 color = u_baseColor * u_lightColor * diffuse;

  if (u_mode >= 1) {
    color += u_baseColor * u_ambientColor;
  }

  if (u_mode >= 2) {
    vec3 V = normalize(u_cameraPosition - worldPosition.xyz);
    vec3 H = normalize(L + V);
    float specular = pow(max(dot(N, H), 0.0), u_shininess);
    color += u_specularColor * u_lightColor * specular * step(0.0001, diffuse);
  }

  v_color = color;

  gl_Position = u_projection * u_view * worldPosition;
}

#version 300 es
precision highp float;

// 頂点で計算された色を、三角形の内部へ線形補間したもの。
// フラグメントシェーダーには、もう計算するものが残っていない
in vec3 v_color;

out vec4 fragColor;

void main() {
  fragColor = vec4(v_color, 1.0);
}

// 第17章: ライティング基礎 — 法線・拡散反射・鏡面反射
// 第14章で生成した法線が、ようやく主役になる。この章の光源は「方向光 1 つ」だけに絞り、
// 点光源・複数光源・距離減衰は第18章、影(光が物体に遮られること)は第21章に送る。
//
// 見どころ:
// - u_normalMatrix(mat3.normalFromMat4)= モデル行列の左上 3×3 の逆転置。
//   第14・15章が mat3(u_model) で済ませていた手抜きの一般解。左の楕円体は
//   非一様スケール(1.7, 0.62, 1.0)なので、ここを間違えると陰影が目に見えて崩れる
// - ライティングはワールド空間で行う。u_cameraPosition もワールド座標の eye をそのまま渡す
// - Gouraud(頂点で計算)と Phong(フラグメントで計算)の比較は、同じ式を持つ
//   プログラムを 2 つ用意し、描くときに useProgram で切り替える

import { mat3, mat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import { createSphere, createTorus, type Geometry, interleave } from '../../lib/geometry';
import { compileShader, linkProgram } from '../../lib/shader';
import gouraudFragmentSource from './gouraud.frag?raw';
import gouraudVertexSource from './gouraud.vert?raw';
import fragmentSource from './lighting.frag?raw';
import vertexSource from './lighting.vert?raw';

// ---------------------------------------------------------------------------
// メッシュ: ジオメトリを VAO に配線する(第13・14章の手順そのまま)
// ---------------------------------------------------------------------------

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

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

  // 1 頂点 = [位置 3, 法線 3, UV 2] の 8 float。stride / offset はバイト単位なので
  // 数値を直書きせず BYTES_PER_ELEMENT から組み立てる(第13章)
  const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
  const stride = 8 * FLOAT_BYTES;
  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 };
}

// ---------------------------------------------------------------------------
// シェーディング用プログラム: uniform ロケーションをまとめて持っておく
// ---------------------------------------------------------------------------

interface ShadingProgram {
  program: WebGLProgram;
  model: WebGLUniformLocation | null;
  view: WebGLUniformLocation | null;
  projection: WebGLUniformLocation | null;
  normalMatrix: WebGLUniformLocation | null;
  cameraPosition: WebGLUniformLocation | null;
  lightDirection: WebGLUniformLocation | null;
  lightColor: WebGLUniformLocation | null;
  ambientColor: WebGLUniformLocation | null;
  baseColor: WebGLUniformLocation | null;
  specularColor: WebGLUniformLocation | null;
  shininess: WebGLUniformLocation | null;
  mode: WebGLUniformLocation | null;
  unlit: WebGLUniformLocation | null;
}

function createShadingProgram(
  gl: WebGL2RenderingContext,
  vertex: string,
  fragment: string,
): ShadingProgram {
  const program = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertex),
    compileShader(gl, gl.FRAGMENT_SHADER, fragment),
  );
  // ロケーションは初期化時に 1 回だけ取る(第4章)。
  // Gouraud 版は u_unlit を持たないので、そこだけ null が返る。
  // null のロケーションに uniform を設定する呼び出しは黙って無視される
  // (WebGL 1.0 仕様 5.14.10「If the passed location is null, the data passed in
  //  will be silently ignored」)ので、描画側で場合分けしなくてよい
  const at = (name: string): WebGLUniformLocation | null => gl.getUniformLocation(program, name);
  return {
    program,
    model: at('u_model'),
    view: at('u_view'),
    projection: at('u_projection'),
    normalMatrix: at('u_normalMatrix'),
    cameraPosition: at('u_cameraPosition'),
    lightDirection: at('u_lightDirection'),
    lightColor: at('u_lightColor'),
    ambientColor: at('u_ambientColor'),
    baseColor: at('u_baseColor'),
    specularColor: at('u_specularColor'),
    shininess: at('u_shininess'),
    mode: at('u_mode'),
    unlit: at('u_unlit'),
  };
}

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

// カメラ定数(第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); // 軌道カメラの注視点

// 光とマテリアル。色は 0〜1 の RGB をそのまま足し算する素朴な扱い(リニア空間の話は第27章)
const LIGHT_COLOR: ReadonlyVec3 = vec3.fromValues(1.0, 0.95, 0.88);
const AMBIENT_COLOR: ReadonlyVec3 = vec3.fromValues(0.09, 0.11, 0.15);
const SPECULAR_COLOR: ReadonlyVec3 = vec3.fromValues(1.0, 1.0, 1.0);
const SHININESS = 64;
const ELLIPSOID_COLOR: ReadonlyVec3 = vec3.fromValues(0.62, 0.34, 0.28);
const TORUS_COLOR: ReadonlyVec3 = vec3.fromValues(0.28, 0.45, 0.64);
const FACETED_COLOR: ReadonlyVec3 = vec3.fromValues(0.52, 0.5, 0.46);
const MARKER_COLOR: ReadonlyVec3 = vec3.fromValues(1.0, 0.94, 0.72);

const LIGHT_ELEVATION = 0.62; // 光源の仰角(ラジアン)。水平面から上を正にとる
const LIGHT_MARKER_DISTANCE = 4.6; // マーカーの小球を置く距離。方向光なので明るさには影響しない

// モードごとの説明(読み出し行に出す)
const MODES = [
  { label: '拡散のみ', note: '拡散反射 max(dot(N, L), 0) だけ。光の当たらない側は真っ黒' },
  { label: '拡散 + 環境光', note: '環境光を一律に足した。黒く潰れていた側にも形が見える' },
  {
    label: 'Blinn-Phong',
    note: 'ハーフベクトル H = normalize(L + V) による鏡面反射を追加(shininess 64)',
  },
  {
    label: 'Gouraud vs Phong',
    note: '同じ Blinn-Phong の式。左 = 頂点で計算(Gouraud)/ 右 = フラグメントで計算(Phong)。球は 14 × 7 分割',
  },
] as const;

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

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  controls: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  // --- プログラムとメッシュ ---------------------------------------------------

  // 式は同じで、計算する場所だけが違う 2 つのプログラム(8 節)
  const phongProgram = createShadingProgram(gl, vertexSource, fragmentSource);
  const gouraudProgram = createShadingProgram(gl, gouraudVertexSource, gouraudFragmentSource);

  const ellipsoidMesh = createMesh(gl, createSphere(0.85, 64, 32));
  const torusMesh = createMesh(gl, createTorus(0.62, 0.26, 64, 32));
  // Gouraud の弱点は分割が粗いほど露骨に出る。あえて 14 × 7 の球を用意する
  const facetedMesh = createMesh(gl, createSphere(0.95, 14, 7));
  const markerMesh = createMesh(gl, createSphere(0.09, 12, 8));

  gl.enable(gl.DEPTH_TEST); // 深度テスト(第13章)
  gl.enable(gl.CULL_FACE); // 裏面カリング
  gl.clearColor(0.06, 0.07, 0.09, 1.0);

  // --- 軌道カメラ(第15章の簡略版。減衰と追跡モードは外してある) --------------

  const orbit = { theta: 0.62, phi: 0.34, radius: 6.0 };
  const PHI_LIMIT = Math.PI / 2 - 0.05;
  const MIN_RADIUS = 3.2;
  const MAX_RADIUS = 12;

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

  // --- モード切替 -------------------------------------------------------------

  let modeIndex = 2; // 最初は Blinn-Phong

  function updateReadout(): void {
    readout.textContent = MODES[modeIndex].note;
  }

  for (const [index, entry] of MODES.entries()) {
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = entry.label;
    button.setAttribute('aria-pressed', index === modeIndex ? 'true' : 'false');
    button.addEventListener('click', () => {
      modeIndex = index;
      updateReadout();
      for (const b of controls.querySelectorAll('button')) {
        b.setAttribute('aria-pressed', 'false');
      }
      button.setAttribute('aria-pressed', 'true');
    });
    controls.append(button);
  }
  updateReadout();

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

  const eye = vec3.create();
  const lightDirection = vec3.create();
  const model = mat4.create();
  const view = mat4.create();
  const projection = mat4.create();
  const normalMatrix = mat3.create();

  // --- リサイズ(第4章と同じ) --------------------------------------------------

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    // 表示サイズが 0 でも 0 除算・NaN 行列にならないよう 1px を下限にする(第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;
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

  // --- uniform の設定 ---------------------------------------------------------

  // vec3 の uniform。gl-matrix の vec3 型をそのまま uniform3fv に渡すと
  // 型が合わないので、成分を展開して uniform3f で送る
  function setVec3(location: WebGLUniformLocation | null, v: ReadonlyVec3): void {
    gl.uniform3f(location, v[0], v[1], v[2]);
  }

  // フレーム内で変わらない uniform(カメラ・光・鏡面の設定)をプログラムに流し込む。
  // uniform はカレントプログラムに対してしか設定できないので、まず useProgram する
  function beginProgram(p: ShadingProgram): void {
    gl.useProgram(p.program);
    gl.uniformMatrix4fv(p.view, false, view); // transpose は常に false
    gl.uniformMatrix4fv(p.projection, false, projection);
    setVec3(p.cameraPosition, eye);
    setVec3(p.lightDirection, lightDirection);
    setVec3(p.lightColor, LIGHT_COLOR);
    setVec3(p.ambientColor, AMBIENT_COLOR);
    setVec3(p.specularColor, SPECULAR_COLOR);
    gl.uniform1f(p.shininess, SHININESS);
  }

  function drawMesh(
    p: ShadingProgram,
    mesh: Mesh,
    baseColor: ReadonlyVec3,
    mode: number,
    unlit: number,
  ): void {
    // 別のプログラムのロケーションに書き込むと INVALID_OPERATION になるので、
    // 描くたびに「これから使うプログラム」を現在のプログラムにしておく
    gl.useProgram(p.program);

    // 法線行列 = モデル行列の左上 3×3 の逆転置(2 節)。
    // モデル行列が変わるたびに作り直す。ここを mat3.fromMat4 にすると、
    // 非一様スケールの楕円体だけ陰影が崩れる(「壊してみる」で試せる)
    mat3.normalFromMat4(normalMatrix, model);

    gl.uniformMatrix4fv(p.model, false, model);
    gl.uniformMatrix3fv(p.normalMatrix, false, normalMatrix);
    setVec3(p.baseColor, baseColor);
    gl.uniform1i(p.mode, mode);
    gl.uniform1f(p.unlit, unlit);

    gl.bindVertexArray(mesh.vao);
    gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0);
  }

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

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

    // カメラ: 球面座標 → eye(第15章)
    eye[0] = orbit.radius * Math.cos(orbit.phi) * Math.sin(orbit.theta);
    eye[1] = orbit.radius * Math.sin(orbit.phi);
    eye[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);

    // 光の向き: 「面から光源へ向かう」単位ベクトル(4 節)。仰角 LIGHT_ELEVATION で
    // 水平にゆっくり 1 周させる。cos/sin の組み立てなので、もともと長さは 1
    const lightAngle = time * 0.35;
    vec3.set(
      lightDirection,
      Math.cos(LIGHT_ELEVATION) * Math.sin(lightAngle),
      Math.sin(LIGHT_ELEVATION),
      Math.cos(LIGHT_ELEVATION) * Math.cos(lightAngle),
    );

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const mode = modeIndex;
    beginProgram(phongProgram);

    if (mode < 3) {
      // 左: 非一様スケール(1.7, 0.62, 1.0)をかけた楕円体。法線行列の見せ場
      mat4.fromTranslation(model, [-1.45, 0, 0]);
      mat4.rotateY(model, model, time * 0.3);
      mat4.scale(model, model, [1.7, 0.62, 1.0]);
      drawMesh(phongProgram, ellipsoidMesh, ELLIPSOID_COLOR, mode, 0);

      // 右: 回転だけのトーラス。こちらは mat3(u_model) でも同じ絵になる
      mat4.fromTranslation(model, [1.5, 0, 0]);
      mat4.rotateX(model, model, time * 0.35);
      mat4.rotateY(model, model, time * 0.5);
      drawMesh(phongProgram, torusMesh, TORUS_COLOR, mode, 0);
    } else {
      // 右: Phong シェーディング(フラグメントで計算)
      mat4.fromTranslation(model, [1.35, 0, 0]);
      mat4.rotateY(model, model, time * 0.25);
      drawMesh(phongProgram, facetedMesh, FACETED_COLOR, 2, 0);

      // 左: Gouraud シェーディング(頂点で計算)。プログラムだけ差し替える
      beginProgram(gouraudProgram);
      mat4.fromTranslation(model, [-1.35, 0, 0]);
      mat4.rotateY(model, model, time * 0.25);
      drawMesh(gouraudProgram, facetedMesh, FACETED_COLOR, 2, 0);
      beginProgram(phongProgram);
    }

    // 光源マーカー: 方向光には位置がないので、「その向きの遠く」に自己発光の小球を置く。
    // unlit = 1 なのでライティングは通らない
    mat4.fromTranslation(model, [
      lightDirection[0] * LIGHT_MARKER_DISTANCE,
      lightDirection[1] * LIGHT_MARKER_DISTANCE,
      lightDirection[2] * LIGHT_MARKER_DISTANCE,
    ]);
    drawMesh(phongProgram, markerMesh, MARKER_COLOR, mode, 1);

    requestAnimationFrame(frame);
  }

  // このページのデモはページと寿命を共にするので、rAF ループの停止も、canvas に付けた
  // 5 つのリスナーの解除もしていない。リソース解放の一般論は第35章
  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);