座標変換 — モデル・ビュー・射影 (MVP)

// 変換は右から順に効く: モデル → ビュー → 射影。
// vec4(..., 1.0) の 1.0 が同次座標の w(第11章)。
// gl_Position に書くのはクリップ空間の座標で、NDC ではない。
// このあと GPU が自動で xyz を w で割り(透視除算)、NDC にする
gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);

// 変換行列 3 枚。CPU 側から uniformMatrix4fv で渡される(第4章の伏線回収)
uniform mat4 u_model; // ローカル → ワールド(モノの置き方)
uniform mat4 u_view; // ワールド → ビュー(カメラの逆変換)
uniform mat4 u_projection; // ビュー → クリップ(遠近の付け方)

const model = new Float32Array(16); // gl-matrix の行列の実体は 16 要素の Float32Array
mat4.identity(model); // 単位行列(なにもしない変換)から始める
mat4.translate(model, model, panel.position); // ① ワールドの置き場所へ動かし
mat4.rotateY(model, model, panel.angleY); // ② その場で自分の y 軸回りに回し
mat4.scale(model, model, [panel.scale, panel.scale, 1]); // ③ 大きさを変える

// ① カメラの基底(右・上・後ろ)を cross で組み立てる(第11章の cross の出番)。
//    カメラは自分の -z 方向を見る約束なので、z 軸は視線の「逆」= eye - target
const zAxis = vec3.subtract(vec3.create(), eye, target);
vec3.normalize(zAxis, zAxis);
// up は「だいたい上」でよい。z 軸と直交する本当の右向きは cross が作ってくれる
const xAxis = vec3.cross(vec3.create(), up, zAxis);
vec3.normalize(xAxis, xAxis);
// 本当の上 = z × x。直交する単位ベクトル同士の cross なので、もう正規化は要らない
const yAxis = vec3.cross(vec3.create(), zAxis, xAxis);

// 1 列目
out[0] = xAxis[0];
out[1] = yAxis[0];
out[2] = zAxis[0];
out[3] = 0;
// 2 列目
out[4] = xAxis[1];
out[5] = yAxis[1];
out[6] = zAxis[1];
out[7] = 0;
// 3 列目
out[8] = xAxis[2];
out[9] = yAxis[2];
out[10] = zAxis[2];
out[11] = 0;
// 4 列目(平行移動)
out[12] = -vec3.dot(xAxis, eye);
out[13] = -vec3.dot(yAxis, eye);
out[14] = -vec3.dot(zAxis, eye);
out[15] = 1;

// ビュー行列: カメラを原点の周りでゆっくり周回させる。
// 動いているのはカメラだけで、板のモデル行列は一度も変わっていない
const angle = time * ORBIT_SPEED;
vec3.set(eye, Math.sin(angle) * ORBIT_RADIUS, CAMERA_HEIGHT, Math.cos(angle) * ORBIT_RADIUS);
myLookAt(view, eye, TARGET, UP);

// 射影行列: aspect は毎フレーム描画バッファの実サイズから求める。
// リサイズで歪まないのはこの 1 行のおかげ(第7章の補正の役目が射影行列へ移った)
const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
if (mode === 'perspective') {
  mat4.perspective(projection, FOVY, aspect, NEAR, FAR);
} else {
  const halfW = ORTHO_HALF_HEIGHT * aspect;
  mat4.ortho(projection, -halfW, halfW, -ORTHO_HALF_HEIGHT, ORTHO_HALF_HEIGHT, NEAR, FAR);
}

// ビューと射影はシーン共通なのでフレームに 1 回。
// 第 2 引数 transpose は常に false(gl-matrix は最初から列優先だから。本文 6 節)
gl.uniformMatrix4fv(viewLocation, false, view);
gl.uniformMatrix4fv(projectionLocation, false, projection);

// モデル行列と色だけ差し替えながら、同じ四角形を 5 回描く。
// drawList の並び(奥 → 手前)が、そのまま画面の前後関係になっている
for (const item of drawList) {
  gl.uniformMatrix4fv(modelLocation, false, item.model);
  gl.uniform3f(colorLocation, item.color[0], item.color[1], item.color[2]);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

#version 300 es

// 頂点属性(配線番号の流儀は第3章と同じ)。
// 3D になったので、位置は vec2 から vec3 に増えている
layout(location = 0) in vec3 a_position; // ローカル座標

// 変換行列 3 枚。CPU 側から uniformMatrix4fv で渡される(第4章の伏線回収)
uniform mat4 u_model; // ローカル → ワールド(モノの置き方)
uniform mat4 u_view; // ワールド → ビュー(カメラの逆変換)
uniform mat4 u_projection; // ビュー → クリップ(遠近の付け方)

void main() {
  // 変換は右から順に効く: モデル → ビュー → 射影。
  // vec4(..., 1.0) の 1.0 が同次座標の w(第11章)。
  // gl_Position に書くのはクリップ空間の座標で、NDC ではない。
  // このあと GPU が自動で xyz を w で割り(透視除算)、NDC にする
  gl_Position = u_projection * u_view * u_model * vec4(a_position, 1.0);
}

#version 300 es

precision highp float;

// この章の主役は頂点シェーダー側の座標変換。
// フラグメント側は、板ごとに CPU から渡された色をそのまま出すだけ
uniform vec3 u_color;

out vec4 fragColor;

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

// 第12章: 座標変換 — モデル・ビュー・射影 (MVP)
// 同じ四角形をモデル行列で 5 枚配置し、自作 lookAt のビュー行列で周回カメラを作り、
// perspective / ortho の射影行列をボタンで切り替える。
// 前後関係は「配列の並び順」だけに頼っている(第13章の深度テストで解決する)。

import { mat4, type ReadonlyVec3, vec3 } from 'gl-matrix';
import { compileShader, linkProgram } from '../../lib/shader';
import fragmentSource from './scene.frag?raw';
import vertexSource from './scene.vert?raw';

// ---------------------------------------------------------------------------
// シーンの定義
// ---------------------------------------------------------------------------

interface Panel {
  position: [number, number, number]; // ワールドでの置き場所
  angleY: number; // y 軸回りの向き(ラジアン)
  scale: number; // 大きさ(1 で一辺 1)
  color: [number, number, number];
}

// 奥(z が小さい)から手前(z が大きい)の順に「手で」並べてある。
// 描画はこの配列の順なので、前後関係はこの並びに完全に依存している。
// カメラが向こう側へ回り込むと並びが逆転して破綻する(本文 7 節・第13章への伏線)
const panels: Panel[] = [
  { position: [0.0, 0.0, -1.8], angleY: 0.35, scale: 2.4, color: [0.85, 0.3, 0.35] },
  { position: [0.9, 0.15, -0.9], angleY: -0.25, scale: 1.8, color: [0.95, 0.65, 0.25] },
  { position: [-0.7, -0.1, 0.0], angleY: 0.2, scale: 1.5, color: [0.3, 0.75, 0.5] },
  { position: [0.4, 0.05, 0.9], angleY: -0.3, scale: 1.2, color: [0.35, 0.55, 0.95] },
  { position: [-0.3, 0.2, 1.8], angleY: 0.25, scale: 0.9, color: [0.75, 0.5, 0.9] },
];

// カメラと射影の設定
const ORBIT_RADIUS = 5.0; // カメラの周回半径
const ORBIT_SPEED = 0.25; // 周回の角速度(ラジアン/秒)
const CAMERA_HEIGHT = 1.6; // カメラの高さ(少し見下ろす)
const FOVY = (45 * Math.PI) / 180; // 縦の視野角。gl-matrix はラジアンで渡す(three.js は度)
const NEAR = 0.1; // これより手前は描かない(0 にすると奥行きが潰れる。本文 4 節)
const FAR = 100.0; // これより奥は描かない
// ortho の縦半分の高さ。perspective で距離 ORBIT_RADIUS に見える高さ
// tan(FOVY / 2) × ORBIT_RADIUS ≒ 2.07 に合わせ、切替時の見た目の大きさを揃えている
const ORTHO_HALF_HEIGHT = 2.1;

const TARGET: ReadonlyVec3 = vec3.fromValues(0, 0, 0); // カメラが見つめる点(原点)
const UP: ReadonlyVec3 = vec3.fromValues(0, 1, 0); // 「だいたい上」の向き

// ---------------------------------------------------------------------------
// ビュー行列の自作: myLookAt
// カメラの置き方(eye / target / up)から「ワールド → ビュー」の行列を作る。
// mat4.lookAt と同じもの。仕組みを見るために一度だけ自作する(第13章以降は gl-matrix 版)
// ---------------------------------------------------------------------------

function myLookAt(out: mat4, eye: ReadonlyVec3, target: ReadonlyVec3, up: ReadonlyVec3): mat4 {
  // ① カメラの基底(右・上・後ろ)を cross で組み立てる(第11章の cross の出番)。
  //    カメラは自分の -z 方向を見る約束なので、z 軸は視線の「逆」= eye - target
  const zAxis = vec3.subtract(vec3.create(), eye, target);
  vec3.normalize(zAxis, zAxis);
  // up は「だいたい上」でよい。z 軸と直交する本当の右向きは cross が作ってくれる
  const xAxis = vec3.cross(vec3.create(), up, zAxis);
  vec3.normalize(xAxis, xAxis);
  // 本当の上 = z × x。直交する単位ベクトル同士の cross なので、もう正規化は要らない
  const yAxis = vec3.cross(vec3.create(), zAxis, xAxis);

  // ② 列に (xAxis, yAxis, zAxis, eye) を並べれば「カメラを置く行列」(カメラのモデル行列)。
  //    ビュー行列はその逆行列で、逆行列は次の 2 つの組で直接書ける。
  //    - 回転部分: 正規直交なので 逆 = 転置(基底を「列」でなく「行」に置く)
  //    - 平行移動部分: -eye を転置後の回転で回したもの = 各基底と eye の dot の符号反転
  // ③ 詰める順序は列優先(第11章)。1 列目 → 2 列目 → … の順で 16 個
  // 1 列目
  out[0] = xAxis[0];
  out[1] = yAxis[0];
  out[2] = zAxis[0];
  out[3] = 0;
  // 2 列目
  out[4] = xAxis[1];
  out[5] = yAxis[1];
  out[6] = zAxis[1];
  out[7] = 0;
  // 3 列目
  out[8] = xAxis[2];
  out[9] = yAxis[2];
  out[10] = zAxis[2];
  out[11] = 0;
  // 4 列目(平行移動)
  out[12] = -vec3.dot(xAxis, eye);
  out[13] = -vec3.dot(yAxis, eye);
  out[14] = -vec3.dot(zAxis, eye);
  out[15] = 1;
  return out;
}

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

type ProjectionMode = 'perspective' | 'ortho';

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  controls: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  // --- 初期化: プログラムと四角形の VAO(第3章と同じ流れ) ------------------

  const program = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource),
  );

  // ローカル座標の四角形(一辺 1・原点中心・z = 0 の平面)。三角形 2 枚ぶんの 6 頂点。
  // 全部の板がこの 1 つのジオメトリを使い回し、置き場所はモデル行列が決める
  // biome-ignore format: 1 頂点 = 1 行の並びを保つ
  const positions = new Float32Array([
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.5, 0.5, 0.0,
    -0.5, -0.5, 0.0,
    0.5, 0.5, 0.0,
    -0.5, 0.5, 0.0,
  ]);

  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // vec2 だった第3章と違い、サイズは 3

  gl.bindVertexArray(null);

  const modelLocation = gl.getUniformLocation(program, 'u_model');
  const viewLocation = gl.getUniformLocation(program, 'u_view');
  const projectionLocation = gl.getUniformLocation(program, 'u_projection');
  const colorLocation = gl.getUniformLocation(program, 'u_color');

  gl.clearColor(0.06, 0.07, 0.09, 1.0);

  // --- モデル行列: 板ごとに 1 回だけ組む(このシーンでは板は動かない) --------
  // gl-matrix の変換関数は「いまの行列に右から掛ける」。
  // コードの順は translate → rotateY → scale だが、頂点に効く順はその逆
  // (scale → rotateY → translate)。「後から書いた変換ほどモノに近い側で効く」(本文 2 節)

  const drawList = panels.map((panel) => {
    const model = new Float32Array(16); // gl-matrix の行列の実体は 16 要素の Float32Array
    mat4.identity(model); // 単位行列(なにもしない変換)から始める
    mat4.translate(model, model, panel.position); // ① ワールドの置き場所へ動かし
    mat4.rotateY(model, model, panel.angleY); // ② その場で自分の y 軸回りに回し
    mat4.scale(model, model, [panel.scale, panel.scale, 1]); // ③ 大きさを変える
    return { color: panel.color, model };
  });

  // --- 射影モードの切替ボタン(第8章と同じ作り) ----------------------------

  let mode: ProjectionMode = 'perspective';
  const modes: { id: ProjectionMode; label: string }[] = [
    { id: 'perspective', label: 'perspective(透視投影)' },
    { id: 'ortho', label: 'ortho(平行投影)' },
  ];

  for (const entry of modes) {
    const button = document.createElement('button');
    button.type = 'button';
    button.textContent = entry.label;
    button.setAttribute('aria-pressed', entry.id === mode ? 'true' : 'false');
    button.addEventListener('click', () => {
      mode = entry.id;
      for (const b of controls.querySelectorAll('button')) {
        b.setAttribute('aria-pressed', 'false');
      }
      button.setAttribute('aria-pressed', 'true');
    });
    controls.append(button);
  }

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

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    // display: none などで表示サイズが 0 のときも、バッファは最低 1px 確保しておく
    // (0 だと aspect が 0 / 0 = NaN になり、射影行列が丸ごと 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);
    }
  }

  // --- 描画ループ -----------------------------------------------------------
  // このページのデモはページと寿命を共にするので、rAF ループの停止もボタンの
  // リスナー解除もしていない(止める必要が出るケースは第6章の stop()、GPU リソースを
  // 含む後始末の一般論は第35章)

  const eye = vec3.create();
  const view = mat4.create();
  const viewCheck = mat4.create(); // 検算用: mat4.lookAt の結果
  const projection = mat4.create();
  let maxDiff = 0; // myLookAt と mat4.lookAt の成分差(これまでの最大)

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

    // ビュー行列: カメラを原点の周りでゆっくり周回させる。
    // 動いているのはカメラだけで、板のモデル行列は一度も変わっていない
    const angle = time * ORBIT_SPEED;
    vec3.set(eye, Math.sin(angle) * ORBIT_RADIUS, CAMERA_HEIGHT, Math.cos(angle) * ORBIT_RADIUS);
    myLookAt(view, eye, TARGET, UP);

    // 検算: 自作の結果を gl-matrix の mat4.lookAt と成分ごとに比べる。
    // 差が浮動小数点の丸め(1e-6 未満)に収まっていれば、同じ行列を作れている
    mat4.lookAt(viewCheck, eye, TARGET, UP);
    for (let i = 0; i < 16; i++) {
      maxDiff = Math.max(maxDiff, Math.abs(view[i] - viewCheck[i]));
    }
    readout.textContent = `myLookAt と mat4.lookAt の成分差(これまでの最大): ${maxDiff.toExponential(2)}`;

    // 射影行列: aspect は毎フレーム描画バッファの実サイズから求める。
    // リサイズで歪まないのはこの 1 行のおかげ(第7章の補正の役目が射影行列へ移った)
    const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
    if (mode === 'perspective') {
      mat4.perspective(projection, FOVY, aspect, NEAR, FAR);
    } else {
      const halfW = ORTHO_HALF_HEIGHT * aspect;
      mat4.ortho(projection, -halfW, halfW, -ORTHO_HALF_HEIGHT, ORTHO_HALF_HEIGHT, NEAR, FAR);
    }

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);

    // ビューと射影はシーン共通なのでフレームに 1 回。
    // 第 2 引数 transpose は常に false(gl-matrix は最初から列優先だから。本文 6 節)
    gl.uniformMatrix4fv(viewLocation, false, view);
    gl.uniformMatrix4fv(projectionLocation, false, projection);

    gl.bindVertexArray(vao);

    // モデル行列と色だけ差し替えながら、同じ四角形を 5 回描く。
    // drawList の並び(奥 → 手前)が、そのまま画面の前後関係になっている
    for (const item of drawList) {
      gl.uniformMatrix4fv(modelLocation, false, item.model);
      gl.uniform3f(colorLocation, item.color[0], item.color[1], item.color[2]);
      gl.drawArrays(gl.TRIANGLES, 0, 6);
    }

    requestAnimationFrame(frame);
  }

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