WebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。
Contents
経緯
私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。
「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特に気にしてないのか。
探せば行列計算のライブラリは大量に出てくるのですが、どちらかというと数学向けのライブラリが多く、WebGL向けである数学のサブセットな感じのライブラリはあんまり見つかりませんでした。
もう数年待った気がするのですが、本当に全く新しいのが出てこないので、いっそ自分で作ることにしました。就職したのであんまりプライベートでプログラミングする時間はなくなったのですが、貴重な土日でバーっと仕上げてみました。
MatrixGL
私による行列計算ライブラリ、その名もMatrixGL！JavaScriptっぽいAPIと、WebGL向けの作りをしている行列計算ライブラリです。npmかgithubからダウンロードできます。
まだ出来立てのほやほやなので機能は少なく、最低限の計算しかできませんが、これから増やしていく予定です。まだクォータニオンとかないです。
ライセンスはMITライセンスなので比較的自由に使えるはずです。好きにいじったり好きに再配布したり、お好きにどうぞ。
使い方
インストール（Node.jsなし/ブラウザ用）
インストールは簡単！githubからzipファイルをダウンロード（https://github.com/kotofurumiya/matrixgl/releases）してきて、中のbuildフォルダに入ってるmatrixgl.min.jsを取り出すだけ！他のファイルは捨ててしまえ。
あとは適当なHTMLファイルと同じフォルダにmatrixgl.min.jsを入れ、scriptタグで挿入します。
|
1 2 3 4 |
<script src="matrixgl.min.js"></script> <script> // ここにコードを書いていく </script> |
これで準備OKです。
インストール（Node.js/npm）
MatrixGLはnpmでもインストールできます。
|
1 |
$ npm install matrixgl --save |
あとはrequireなりimpotなりしてください。
|
1 |
const { Vector3, Vector4, Matrix4 } = require('matrixgl'); |
基本的な使い方
以下のような感じで使えます：
|
1 2 3 4 5 6 7 8 9 10 11 |
// 4次元ベクトルを作る const vec = new Vector4(1, 2, 3, 4); // 値を表示する（セットもできるよ！） console.log(vec.x); // 1 console.log(vec.y); // 2 console.log(vec.z); // 3 console.log(vec.w); // 4 // 全部の値を表示する console.log(vec.values); |
普通にnewして普通にアクセスするだけです。Vector2、Vector3、Vector4があります。それぞれFloat32vector2、Float32Vector3、Float32Vector4のエイリアスです。
また、ベクトルの計算もできます。
|
1 2 3 4 5 6 7 8 9 |
const vec1 = new Vector4(1, 2, 3, 4); const vec2 = new Vector4(5, 6, 7, 8); const scalar = 5; // 計算！ const vecSum = vec1.add(vec2); const vecSub = vec1.sub(vec2); const vecProd = vec1.mulByScalar(scalar); const vecMag = vec1.magnitude; |
よくあるOpenGL用の行列ライブラリと違って、メソッドを呼び出してもベクトルそのものは書き換えず、新しいベクトルを返すようになっています。これは行列でも同じです。
行列はMatrix2、Matrix3、Matrix4があります。それぞれMatrix2x2、Matrix3x3、Matrix4x4のエイリアスです。非正方行列はいまのところありません。
特にMatrix4はWebGLっぽい機能を備えています。モデル行列なんかをサクッと作れます。
|
1 2 3 4 |
const transform = Matrix4.identity() .translate(1, 2, 3) .rotateX(Math.PI) .scale(5, 5, 5); |
手動で組むこともできます。
|
1 2 3 4 5 6 7 8 |
const identity = Matrix4.identity(); const scaling = Matrix4.scaling(5, 5, 5); const rotation = Matrix4.rotationX(Math.PI); const translation = Matrix4.translation(1, 2, 3); const transform = identity.mulByMatrix4(translation) .mulByMatrix4(rotation) .mulByMatrix4(scaling); |
よくある”look at”ビュー行列なんかも作れます。
|
1 2 3 4 5 |
const camera = new Vector3(1, 2, 3); const looAt = new Vector3(4, 5, 6); const cameraUpDirection = new Vector3(7, 8, 9); const view = Matrix4.lookAt(camera, lookAt, cameraUpDirection); |
プロジェクション行列も平行投影（orthographic）と透視投影（perspective）に対応しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const orthographic = Matrix4.orthographic({ top: 1, bottom: -1, left: -1, right: 1, near: 1, far: 2 }); const perspective = Matrix4.perspective({ top: 1, bottom: -1, left: -1, right: 1, near: 1, far: 2 }); |
このあたりは引数多いのでオブジェクトで渡すようにしました。もう引数の順番覚える必要ないです。
これでModelViewProjection行列が作れますね。
|
1 2 |
const mvp = perspective.mulByMatrix4(view) .mulByMatrix4(transform); |
と、こんな感じで使っていけます。
WebGLと一緒に使う
もちろんMatrixGLはWebGLと一緒に使うことを前提としています。VectorもMatrixもそれぞれvaluesプロパティで中の値を取り出すことができ、これをWebGLに直接渡すことができます。
|
1 2 3 4 5 |
// Buffer gl.bufferData(gl.ARRAY_BUFFER, vec1.values, gl.STATIC_DRAW); // Uniform Variable gl.uniformMatrix4fv(mvpLocation, false, mvp.values); |
あとは普通に描画するだけです。
APIドキュメント
APIのドキュメントは https://kotofurumiya.github.io/matrixgl/ にあります。気になる人は見ておいてください。といってもまだここで紹介したメソッドぐらいしかないんですけどね。
今後の展望
とりあえず最小限のリリースはできたので、今後は機能を拡充していく予定です。特にクォータニオンは欲しいなーと思っているのでなんとかしたいです。
機能の拡充といってもあんまりむやみに増やすことはしないと思います。あくまで数学用じゃなくてWebGL用なので、GLSLでサクッとできるようなことはMatrixGL側で実装しない可能性もあります。
何か要望があればgithubでissue（https://github.com/kotofurumiya/matrixgl/issues）を立てておくか、Twitterで言ってくれればなんらかの対応はします。issueは日本語でもいいですよ。
