作ったもの

3D Cube — https://sen.ltd/portfolio/cube-3d/

vanilla JS、ゼロ依存、ビルド不要。node --test で 34 ケース。

列優先（column-major）

WebGL は列優先ストレージ。m[0..3] は最初の列。行優先で読むと間違う:

return new Float32Array([
  1, 0, 0, 0,  // 第 1 列
  0, 1, 0, 0,  // 第 2 列
  0, 0, 1, 0,
  0, 0, 0, 1,
]);

OpenGL 由来の伝統で、数学的には行優先の方が読みやすいが、みんな受け入れている。

t*x*x + c,    t*x*y + s*z, t*x*z - s*y, 0,
t*x*y - s*z, t*y*y + c,    t*y*z + s*x, 0,
t*x*z + s*y, t*y*z - s*x, t*z*z + c,    0,

c = cos θ, s = sin θ, t = 1 - c。X→Y→Z と順に回す代わりに閉形式で一発。数値的にも安定。

const f = 1 / Math.tan(fov / 2);
// f/aspect, f, (far+near)/(near-far), etc.

フラスタム（錐台）を NDC 単位立方体にマッピング。第 4 行の -1 が透視除算を有効化し、z 項が深度レンジを [-1, 1] に写す。

入門チュートリアルの多くが gl-matrix を import する。それだと「WebGL が何をしているか」はブラックボックス。行列を自分で書くと、回転が三角関数の組み合わせだと腑に落ちる。魔法が算術に変わる瞬間がある。

100+ 公開ポートフォリオ シリーズの #74 です。