WebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。

経緯

私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。

「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特に気にしてないのか。

探せば行列計算のライブラリは大量に出てくるのですが、どちらかというと数学向けのライブラリが多く、WebGL向けである数学のサブセットな感じのライブラリはあんまり見つかりませんでした。

もう数年待った気がするのですが、本当に全く新しいのが出てこないので、いっそ自分で作ることにしました。就職したのであんまりプライベートでプログラミングする時間はなくなったのですが、貴重な土日でバーっと仕上げてみました。

MatrixGL

私による行列計算ライブラリ、その名もMatrixGL!JavaScriptっぽいAPIと、WebGL向けの作りをしている行列計算ライブラリです。npmかgithubからダウンロードできます。

まだ出来立てのほやほやなので機能は少なく、最低限の計算しかできませんが、これから増やしていく予定です。まだクォータニオンとかないです。

(2018/02/07 追記)クォータニオンをサポートしました。

ライセンスはMITライセンスなので比較的自由に使えるはずです。好きにいじったり好きに再配布したり、お好きにどうぞ。

使い方

インストール(Node.jsなし/ブラウザ用)

インストールは簡単!githubからzipファイルをダウンロード(https://github.com/kotofurumiya/matrixgl/releases)してきて、中のbuildフォルダに入ってるmatrixgl.min.jsを取り出すだけ!他のファイルは捨ててしまえ。

あとは適当なHTMLファイルと同じフォルダにmatrixgl.min.jsを入れ、scriptタグで挿入します。

これで準備OKです。

インストール(Node.js/npm)

MatrixGLはnpmでもインストールできます。

あとはrequireなりimpotなりしてください。

基本的な使い方

以下のような感じで使えます:

普通にnewして普通にアクセスするだけです。Vector2、Vector3、Vector4があります。それぞれFloat32vector2、Float32Vector3、Float32Vector4のエイリアスです。

また、ベクトルの計算もできます。

よくあるOpenGL用の行列ライブラリと違って、メソッドを呼び出してもベクトルそのものは書き換えず、新しいベクトルを返すようになっています。これは行列でも同じです。

行列はMatrix2、Matrix3、Matrix4があります。それぞれMatrix2x2、Matrix3x3、Matrix4x4のエイリアスです。非正方行列はいまのところありません。

特にMatrix4はWebGLっぽい機能を備えています。モデル行列なんかをサクッと作れます。

手動で組むこともできます。

よくある”look at”ビュー行列なんかも作れます。

プロジェクション行列も平行投影(orthographic)と透視投影(perspective)に対応しています。

このあたりは引数多いのでオブジェクトで渡すようにしました。もう引数の順番覚える必要ないです。

これでModelViewProjection行列が作れますね。

と、こんな感じで使っていけます。

(2018/02/07 追記)クォータニオン

2018/02/07にリリースしたv0.1.0でクォータニオンをサポートしました。これにより任意軸についての回転が表現できます。

実際は直接クォータニオンを作成することはあまりなく、回転軸と角度を与えて生成するのが普通だと思います。以下のようにします:

球面線形補間(通称slerp)もサポートしています。

WebGLと一緒に使う

もちろんMatrixGLはWebGLと一緒に使うことを前提としています。VectorもMatrixもQuaternionも、それぞれvaluesプロパティで中の値を取り出すことができ、これをWebGLに直接渡すことができます。

あとは普通に描画するだけです。

APIドキュメント

APIのドキュメントは https://kotofurumiya.github.io/matrixgl/ にあります。気になる人は見ておいてください。といってもまだここで紹介したメソッドぐらいしかないんですけどね。

今後の展望

とりあえず最小限のリリースはできたので、今後は機能を拡充していく予定です。特にクォータニオンは欲しいなーと思っているのでなんとかしたいです。

(2018/02/07 追記)クォータニオンをサポートしました。

機能の拡充といってもあんまりむやみに増やすことはしないと思います。あくまで数学用じゃなくてWebGL用なので、GLSLでサクッとできるようなことはMatrixGL側で実装しない可能性もあります。

何か要望があればgithubでissue(https://github.com/kotofurumiya/matrixgl/issues)を立てておくか、Twitterで言ってくれればなんらかの対応はします。issueは日本語でもいいですよ。