WebGLで使う行列演算の備忘録
はじめに
ライブラリを使用せず素の WebGL で書けるようになりたいと思い、最近はいろいろ勉強してます。WebGL を触るうえで行列演算は避けては通れません。WebGL 用の行列演算の既存のライブラリだと glMatrix がありますが、今回は線形代数の勉強も兼ねて自作で作ってみました。(自作といっても、ほぼほぼ OGL の数学演算系をもって来ているだけですが)
足し算などの簡単なのは飛ばして、何をやってるか忘れそうな処理について備忘録的に書いていきます。長くなるので、主に 3x3 行列をみていきます。
数学演算系のコードは以下に置いてます。
https://github.com/nono-k/webgl-study-note/tree/main/src/lib/webgl/math
3x3 行列(Mat3)
3x3 (Mat3)行列のクラスは次のようにしてます。
演算系の関数はMat3Funcで書いています。
import * as Mat3Func from "./functions/Mat3Func";
export class Mat3 extends Array<number> {
constructor(
m00 = 1,
m01 = 0,
m02 = 0,
m10 = 0,
m11 = 1,
m12 = 0,
m20 = 0,
m21 = 0,
m22 = 1
) {
super(m00, m01, m02, m10, m11, m12, m20, m21, m22);
}
// ...
}
数式で書くと次のような行列表記になります。
