ベクトルと行列 — gl-matrix で学ぶ線形代数

import { vec3 } from 'gl-matrix';

const a = vec3.fromValues(1, 2, 0);
const b = vec3.fromValues(4, -1, 0);

// three.js 風なら a.clone().add(b)。gl-matrix は「結果の入れ物」を先に渡す
const sum = vec3.create(); // (0, 0, 0) の Float32Array を確保
vec3.add(sum, a, b); // sum = a + b。戻り値も sum なので入れ子にもできる

const vecA = vec2.create(); // マウスに追従するベクトル a
const vecB = vec2.create(); // ゆっくり回転するベクトル b
const bHat = vec2.create(); // b の単位ベクトル(normalize の結果)
const proj = vec2.create(); // a を b の直線に射影した点
const crossAB = vec3.create(); // vec2.cross の結果(z 成分だけが残る)

// この章の主役たち。すべて out 引数スタイル(結果の入れ物を最初の引数で渡す)
const dotAB = vec2.dot(vecA, vecB); // スカラーを返すものは out が要らない
vec2.cross(crossAB, vecA, vecB); // 2D の cross は z 成分だけが残る(out は vec3)
vec2.normalize(bHat, vecB); // b の単位ベクトル
const along = vec2.dot(vecA, bHat); // a の「b 方向成分」= 射影の符号付き長さ
vec2.scale(proj, bHat, along); // 射影の点 = b の向き × その長さ

2D の平行移動を「1 つ上の次元」の線形変換として書く:

| 1  0  tx |   | x |   | x + tx |
| 0  1  ty | × | y | = | y + ty |
| 0  0  1  |   | 1 |   | 1      |

点を (x, y, 1) に持ち上げると、3 列目(基底 (0, 0, 1) の行き先)が
そのまま足し込まれる。これが平行移動の正体

// 同じ 4×4 行列を掛けても、w で受ける変換が変わる
vec4 point = vec4(x, y, z, 1.0); // 点:   回転・拡大に加えて平行移動も受ける
vec4 direction = vec4(x, y, z, 0.0); // 方向: 回転・拡大だけ受け、平行移動は無視

// T・R・S: 頂点には S → R → T の順に効く。
// 「その場で回って伸び縮みし、置き場所は動かない」いつもの合成順
mat4.identity(mTRS);
mat4.translate(mTRS, mTRS, T_OFFSET);
mat4.rotateZ(mTRS, mTRS, angle);
mat4.scale(mTRS, mTRS, scaleVec);

// S・R・T: 同じ 3 つの変換を逆順に積むと、先に置いた家を原点ごと回す
// ことになり、家は原点の周りを公転して距離まで伸び縮みする
mat4.identity(mSRT);
mat4.scale(mSRT, mSRT, scaleVec);
mat4.rotateZ(mSRT, mSRT, angle);
mat4.translate(mSRT, mSRT, T_OFFSET);

for (let i = 0; i < HOUSE_POSITIONS.length / 2; i += 1) {
  vec2.set(houseVertex, HOUSE_POSITIONS[i * 2], HOUSE_POSITIONS[i * 2 + 1]);
  // 行列 × 頂点を CPU で計算する(z = 0、w = 1 の点として扱われる)。
  // 第12章では、この掛け算が頂点シェーダーへ移る
  vec2.transformMat4(houseVertex, houseVertex, matrix);
  const color = i < HOUSE_BODY_VERTEX_COUNT ? bodyColor : roofColor;
  pushVertex(triBatch, houseVertex[0], houseVertex[1], color);
}

// CPU で計算した頂点を GPU へ再アップロードする。
// DYNAMIC_DRAW は「何度も書き換える」というドライバへのヒント。
// subarray はコピーではなく「先頭から使ったぶんまで」のビューを作るだけ
gl.bindBuffer(gl.ARRAY_BUFFER, batch.positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, batch.positions.subarray(0, batch.count * 2), gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, batch.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, batch.colors.subarray(0, batch.count * 3), gl.DYNAMIC_DRAW);

// 第11章: ベクトルと行列
// gl-matrix のベクトル演算(dot / cross / normalize)と行列(mat4)を CPU 側で使う。
// 変換済みの頂点を毎フレーム bufferData(DYNAMIC_DRAW)でアップロードして描く。
// シェーダーは受け取った座標をそのまま出すだけ(行列を uniform で GPU に渡すのは第12章)。

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

// ---------------------------------------------------------------------------
// 毎フレーム頂点を作り直して送る「動的バッチ」
// 第3章の VBO は一度きりの STATIC_DRAW だったが、今回は中身が毎フレーム変わる
// ---------------------------------------------------------------------------

// 1 フレームに積める最大頂点数。配列は最初に一度だけ確保して使い回す
const MAX_VERTICES = 128;

interface Batch {
  vao: WebGLVertexArrayObject;
  positionBuffer: WebGLBuffer;
  colorBuffer: WebGLBuffer;
  positions: Float32Array; // xy を MAX_VERTICES 頂点ぶん
  colors: Float32Array; // rgb を MAX_VERTICES 頂点ぶん
  count: number; // いま積まれている頂点数
}

function createBatch(gl: WebGL2RenderingContext): Batch {
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  // 配線は第3章と同じ。ただしデータはまだ入れない(毎フレーム入れ直すため)
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.enableVertexAttribArray(1);
  gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

  gl.bindVertexArray(null);

  return {
    vao,
    positionBuffer,
    colorBuffer,
    positions: new Float32Array(MAX_VERTICES * 2),
    colors: new Float32Array(MAX_VERTICES * 3),
    count: 0,
  };
}

function drawBatch(gl: WebGL2RenderingContext, batch: Batch, mode: GLenum): void {
  if (batch.count === 0) {
    return;
  }
  // CPU で計算した頂点を GPU へ再アップロードする。
  // DYNAMIC_DRAW は「何度も書き換える」というドライバへのヒント。
  // subarray はコピーではなく「先頭から使ったぶんまで」のビューを作るだけ
  gl.bindBuffer(gl.ARRAY_BUFFER, batch.positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, batch.positions.subarray(0, batch.count * 2), gl.DYNAMIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, batch.colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, batch.colors.subarray(0, batch.count * 3), gl.DYNAMIC_DRAW);

  gl.bindVertexArray(batch.vao);
  gl.drawArrays(mode, 0, batch.count);
}

// ---------------------------------------------------------------------------
// 色と図形の定数
// ---------------------------------------------------------------------------

type Color = readonly [number, number, number];

const COLOR_A: Color = [1.0, 0.45, 0.55]; // ベクトル a(マウス)
const COLOR_B: Color = [0.35, 0.65, 1.0]; // ベクトル b(ゆっくり回転)
const COLOR_PROJ: Color = [1.0, 0.85, 0.4]; // a を b の直線に射影した「影」
const COLOR_AXIS: Color = [0.28, 0.32, 0.38]; // 座標軸
const COLOR_GUIDE: Color = [0.2, 0.23, 0.28]; // 補助線(a の先端から影へ下ろす垂線)

const COLOR_HOUSE_BODY: Color = [0.35, 0.65, 1.0];
const COLOR_HOUSE_ROOF: Color = [1.0, 0.45, 0.55];
const COLOR_HOUSE_BODY_ALT: Color = [0.45, 0.85, 0.6];
const COLOR_HOUSE_ROOF_ALT: Color = [1.0, 0.85, 0.4];
const COLOR_HOUSE_FAINT: Color = [0.22, 0.25, 0.3];

// 家(本体 2 枚 + 屋根 1 枚 = 三角形 3 枚)のローカル座標。原点が家の中心
// biome-ignore format: 1 頂点 = 1 行の並びを保つ
const HOUSE_POSITIONS = new Float32Array([
  -0.22, -0.22, // 本体 左下
  0.22, -0.22, // 本体 右下
  0.22, 0.18, // 本体 右上
  -0.22, -0.22, // 本体 左下
  0.22, 0.18, // 本体 右上
  -0.22, 0.18, // 本体 左上
  -0.3, 0.18, // 屋根 左
  0.3, 0.18, // 屋根 右
  0.0, 0.5, // 屋根 頂点
]);
const HOUSE_BODY_VERTEX_COUNT = 6; // 先頭 6 頂点が本体、残りが屋根

// 矢印の見た目
const ARROW_HEAD_LENGTH = 0.1;
const ARROW_HEAD_WIDTH = 0.07;

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

function setup(
  gl: WebGL2RenderingContext,
  canvas: HTMLCanvasElement,
  controls: HTMLParagraphElement,
  readout: HTMLParagraphElement,
): void {
  // --- gl-matrix のスクラッチ変数 -------------------------------------------
  // out 引数用に最初に一度だけ確保し、毎フレーム使い回す(本文 1 節)

  const vecA = vec2.create(); // マウスに追従するベクトル a
  const vecB = vec2.create(); // ゆっくり回転するベクトル b
  const bHat = vec2.create(); // b の単位ベクトル(normalize の結果)
  const proj = vec2.create(); // a を b の直線に射影した点
  const crossAB = vec3.create(); // vec2.cross の結果(z 成分だけが残る)
  const ORIGIN: ReadonlyVec2 = vec2.fromValues(0, 0);

  const arrowDir = vec2.create(); // 矢印の向き(単位ベクトル)
  const arrowPerp = vec2.create(); // 矢印の向きに垂直なベクトル
  const arrowBase = vec2.create(); // 矢じりの付け根
  const arrowLeft = vec2.create(); // 矢じりの左角
  const arrowRight = vec2.create(); // 矢じりの右角

  const mTRS = mat4.create(); // 平行移動 → 回転 → 拡大の順に積んだ行列
  const mSRT = mat4.create(); // 拡大 → 回転 → 平行移動の順に積んだ行列
  const IDENTITY: ReadonlyMat4 = mat4.create(); // 単位行列(変換前の家を描くのに使う)
  const scaleVec = vec3.create();
  const houseVertex = vec2.create();
  const T_OFFSET: ReadonlyVec3 = vec3.fromValues(0.75, 0.25, 0); // 平行移動量(固定)

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

  const triBatch = createBatch(gl); // 塗りつぶし(矢じり・家)
  const lineBatch = createBatch(gl); // 線(軸・矢印の柄・補助線)

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

  // --- 座標系 --------------------------------------------------------------
  // 計算は「短辺が -1〜+1、横は ±aspect」の標準座標(第7章)で行い、
  // クリップ空間へは頂点を積むときに x / aspect で変換する

  let aspect = 1.5;

  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);
    }
    aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
  }

  // --- マウス(第4章と同じ変換 + 標準座標へ) -------------------------------

  const mouseWorld: vec2 = vec2.fromValues(0.55, 0.4);

  canvas.addEventListener('pointermove', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = (event.clientX - rect.left - canvas.clientLeft) / canvas.clientWidth;
    const y = (event.clientY - rect.top - canvas.clientTop) / canvas.clientHeight;
    mouseWorld[0] = (x * 2 - 1) * aspect; // クリップ空間 → 標準座標(x は ±aspect)
    mouseWorld[1] = 1 - y * 2;
  });

  // --- 頂点を積むヘルパー ---------------------------------------------------

  function pushVertex(batch: Batch, x: number, y: number, color: Color): void {
    if (batch.count >= MAX_VERTICES) {
      return; // あふれたら黙って捨てる(このデモでは起きない)
    }
    batch.positions[batch.count * 2] = x / aspect; // 標準座標 → クリップ空間
    batch.positions[batch.count * 2 + 1] = y;
    batch.colors[batch.count * 3] = color[0];
    batch.colors[batch.count * 3 + 1] = color[1];
    batch.colors[batch.count * 3 + 2] = color[2];
    batch.count += 1;
  }

  function pushLine(x0: number, y0: number, x1: number, y1: number, color: Color): void {
    pushVertex(lineBatch, x0, y0, color);
    pushVertex(lineBatch, x1, y1, color);
  }

  // 矢印 = 柄(gl.LINES)+ 矢じり(塗りつぶし三角形)
  function pushArrow(from: ReadonlyVec2, to: ReadonlyVec2, color: Color): void {
    vec2.subtract(arrowDir, to, from);
    const len = vec2.length(arrowDir);
    vec2.normalize(arrowDir, arrowDir); // 長さ 0 のときは 0 のまま(gl-matrix の仕様)
    // 2D で 90° 回すには (x, y) → (-y, x)。第10章の回転行列の 2 列目と同じ形
    vec2.set(arrowPerp, -arrowDir[1], arrowDir[0]);

    const headLength = Math.min(ARROW_HEAD_LENGTH, len);
    vec2.scaleAndAdd(arrowBase, to, arrowDir, -headLength); // 矢じりの付け根 = 先端 - 向き × 長さ
    pushLine(from[0], from[1], arrowBase[0], arrowBase[1], color);

    vec2.scaleAndAdd(arrowLeft, arrowBase, arrowPerp, ARROW_HEAD_WIDTH * 0.5);
    vec2.scaleAndAdd(arrowRight, arrowBase, arrowPerp, -ARROW_HEAD_WIDTH * 0.5);
    pushVertex(triBatch, to[0], to[1], color);
    pushVertex(triBatch, arrowLeft[0], arrowLeft[1], color);
    pushVertex(triBatch, arrowRight[0], arrowRight[1], color);
  }

  function pushAxes(): void {
    pushLine(-aspect, 0, aspect, 0, COLOR_AXIS);
    pushLine(0, -1, 0, 1, COLOR_AXIS);
  }

  const formatNumber = (n: number): string => n.toFixed(2).padStart(5);

  // --- モード 1: ベクトルの演算 --------------------------------------------

  function buildVectorScene(time: number): void {
    // b はゆっくり回転する長さ 0.7 のベクトル、a はマウスに追従する
    vec2.set(vecB, Math.cos(time * 0.25) * 0.7, Math.sin(time * 0.25) * 0.7);
    vec2.copy(vecA, mouseWorld);

    // この章の主役たち。すべて out 引数スタイル(結果の入れ物を最初の引数で渡す)
    const dotAB = vec2.dot(vecA, vecB); // スカラーを返すものは out が要らない
    vec2.cross(crossAB, vecA, vecB); // 2D の cross は z 成分だけが残る(out は vec3)
    vec2.normalize(bHat, vecB); // b の単位ベクトル
    const along = vec2.dot(vecA, bHat); // a の「b 方向成分」= 射影の符号付き長さ
    vec2.scale(proj, bHat, along); // 射影の点 = b の向き × その長さ

    // dot = |a||b|cosθ を θ について解いてなす角を出す
    const lenA = vec2.length(vecA);
    const lenB = vec2.length(vecB);
    const cosTheta = lenA > 1e-6 ? dotAB / (lenA * lenB) : 1;
    const angleDeg = (Math.acos(Math.min(Math.max(cosTheta, -1), 1)) * 180) / Math.PI;

    pushAxes();
    pushLine(vecA[0], vecA[1], proj[0], proj[1], COLOR_GUIDE); // a の先端から影へ下ろす垂線
    pushArrow(ORIGIN, proj, COLOR_PROJ); // a が b の直線に落とす「影」
    pushArrow(ORIGIN, vecB, COLOR_B);
    pushArrow(ORIGIN, vecA, COLOR_A);

    readout.textContent =
      `a = (${formatNumber(vecA[0])}, ${formatNumber(vecA[1])})  ` +
      `b = (${formatNumber(vecB[0])}, ${formatNumber(vecB[1])})  |  ` +
      `dot(a, b) = ${formatNumber(dotAB)}  なす角 = ${angleDeg.toFixed(1).padStart(5)}°  ` +
      `cross(a, b).z = ${formatNumber(crossAB[2])}  b への射影 = ${formatNumber(along)}`;
  }

  // --- モード 2: 行列 = 変換 ------------------------------------------------

  function pushHouse(matrix: ReadonlyMat4, bodyColor: Color, roofColor: Color): void {
    for (let i = 0; i < HOUSE_POSITIONS.length / 2; i += 1) {
      vec2.set(houseVertex, HOUSE_POSITIONS[i * 2], HOUSE_POSITIONS[i * 2 + 1]);
      // 行列 × 頂点を CPU で計算する(z = 0、w = 1 の点として扱われる)。
      // 第12章では、この掛け算が頂点シェーダーへ移る
      vec2.transformMat4(houseVertex, houseVertex, matrix);
      const color = i < HOUSE_BODY_VERTEX_COUNT ? bodyColor : roofColor;
      pushVertex(triBatch, houseVertex[0], houseVertex[1], color);
    }
  }

  function buildMatrixScene(time: number): void {
    const angle = time * 0.6; // 回転はゆっくり回し続ける
    const scale = 0.8 + 0.3 * Math.sin(time * 0.9); // 拡大率は 0.5〜1.1 を往復
    vec3.set(scaleVec, scale, scale, 1);

    // T・R・S: 頂点には S → R → T の順に効く。
    // 「その場で回って伸び縮みし、置き場所は動かない」いつもの合成順
    mat4.identity(mTRS);
    mat4.translate(mTRS, mTRS, T_OFFSET);
    mat4.rotateZ(mTRS, mTRS, angle);
    mat4.scale(mTRS, mTRS, scaleVec);

    // S・R・T: 同じ 3 つの変換を逆順に積むと、先に置いた家を原点ごと回す
    // ことになり、家は原点の周りを公転して距離まで伸び縮みする
    mat4.identity(mSRT);
    mat4.scale(mSRT, mSRT, scaleVec);
    mat4.rotateZ(mSRT, mSRT, angle);
    mat4.translate(mSRT, mSRT, T_OFFSET);

    pushAxes();
    pushHouse(IDENTITY, COLOR_HOUSE_FAINT, COLOR_HOUSE_FAINT); // 変換前(原点の薄い家)
    pushHouse(mTRS, COLOR_HOUSE_BODY, COLOR_HOUSE_ROOF);
    pushHouse(mSRT, COLOR_HOUSE_BODY_ALT, COLOR_HOUSE_ROOF_ALT);

    // 列優先レイアウトの実地確認: 平行移動成分は m[12], m[13](, m[14])に入る
    readout.textContent =
      `回転 = ${formatNumber(angle % (Math.PI * 2))} rad  拡大 = ${formatNumber(scale)}  |  ` +
      `T・R・S の m[12], m[13] = ${formatNumber(mTRS[12])}, ${formatNumber(mTRS[13])}(不動)  ` +
      `S・R・T の m[12], m[13] = ${formatNumber(mSRT[12])}, ${formatNumber(mSRT[13])}(回されている)`;
  }

  // --- モード切替(第8章と同じボタン方式) ----------------------------------

  const modes = [
    { label: 'ベクトルの演算', build: buildVectorScene },
    { label: '行列 = 変換', build: buildMatrixScene },
  ] as const;

  let currentBuild: (time: number) => void = buildVectorScene;

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

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

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

    // バッチを空にして、今フレームの頂点を CPU で作り直す
    triBatch.count = 0;
    lineBatch.count = 0;
    currentBuild(time);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    drawBatch(gl, triBatch, gl.TRIANGLES);
    drawBatch(gl, lineBatch, gl.LINES);

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

#version 300 es

// 頂点属性の配線は第3章と同じ。layout(location = N) で番号を固定する
layout(location = 0) in vec2 a_position;
layout(location = 1) in vec3 a_color;

out vec3 v_color;

void main() {
  v_color = a_color;

  // この章のシェーダーは、受け取った座標をそのまま出すだけ。
  // 行列は CPU 側(gl-matrix)ですでに適用済みの座標が届く。
  // 行列を uniform で GPU に渡し、ここで掛けるようにするのは第12章
  gl_Position = vec4(a_position, 0.0, 1.0);
}

#version 300 es

precision highp float;

// 頂点色を補間して受け取り、そのまま出す(第3章と同じ最小構成)。
// この章の主役は CPU 側の gl-matrix なので、シェーダーは意図的に何もしない
in vec3 v_color;

out vec4 fragColor;

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