iconWebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特に気にしてないのか。探せば行列計算のライブラリは大量に出てくるのですが、どちらかというと数学向けのライブラリが多く、WebGL向けである数学のサブセットな感じのライブラリはあんまり見つかりませんでした。数年待った気がするのですが、本当に全く新しいのが出てこないので、いっそ自分で作ることにしました。就職したのであんまりプライベートでプログラミングする時間はなくなったのですが、貴重な土日でバーっと仕上げてみました。MatrixGL私による行列計算ライブラリ、その名もMatrixGL!JavaScriptっぽいAPIと、WebGL向けの作りをしている行列計算ライブラリです。npmかgithubからダウンロードできます。https://github.com/kotofurumiya/matrixglまだ出来立てのほやほやなので機能は少なく、最低限の計算しかできませんが、これから増やしていく予定です。クォータニオンとかないです。追記)クォータニオンをサポートしました。ライセンスはMITライセンスなので比較的自由に使えるはずです。好きにいじったり好きに再配布したり、お好きにどうぞ。使い方インストール(Node.jsなし/ブラウザ用)インストールは簡単!githubからzipファイルをダウンロード(https://github.com/kotofurumiya/matrixgl/releases)してきて、中のbuildフォルダに入ってるmatrixgl.min.jsを取り出すだけ!他のファイルは捨ててしまえ。あとは適当なHTMLファイルと同じフォルダにmatrixgl.min.jsを入れ、scriptタグで挿入します。ここにコードを書いていく</script>これで準備OKです。インストール(Node.js/npm)MatrixGLはnpmでもインストールできます。--saveあとはrequireなりimpotなりしてください。全部の値を表示するconsole.log(vec.values);普通にnewして普通にアクセスするだけです。Vector2、Vector3、Vector4があります。それぞれFloat32vector2、Float32Vector3、Float32Vector4のエイリアスです。ベクトルの計算もできます。vec1.magnitude;よくあるOpenGL用の行列ライブラリと違って、メソッドを呼び出してもベクトルそのものは書き換えず、新しいベクトルを返すようになっています。これは行列でも同じです。行列はMatrix2、Matrix3、Matrix4があります。それぞれMatrix2x2、Matrix3x3、Matrix4x4のエイリアスです。非正方行列はいまのところありません。Matrix4はWebGLっぽい機能を備えています。モデル行列なんかをサクッと作れます。5);手動で組むこともできます。at”ビュー行列なんかも作れます。cameraUpDirection);プロジェクション行列も平行投影(orthographic)と透視投影(perspective)に対応しています。2});このあたりは引数多いのでオブジェクトで渡すようにしました。引数の順番覚える必要ないです。これでModelViewProjection行列が作れますね。.mulByMatrix4(transform);と、こんな感じで使っていけます。追記)クォータニオン2018/02/07にリリースしたv0.1.0でクォータニオンをサポートしました。これにより任意軸についての回転が表現できます。4);実際は直接クォータニオンを作成することはあまりなく、回転軸と角度を与えて生成するのが普通だと思います。回転軸を作る(Vector3)。q.toRotationMatrix4();球面線形補間(通称slerp)もサポートしています。0.5);WebGLと一緒に使うもちろんMatrixGLはWebGLと一緒に使うことを前提としています。VectorもMatrixもQuaternionも、それぞれvaluesプロパティで中の値を取り出すことができ、これをWebGLに直接渡すことができます。mvp.values);あとは普通に描画するだけです。気になる人は見ておいてください。いってもまだここで紹介したメソッドぐらいしかないんですけどね。今後の展望とりあえず最小限のリリースはできたので、今後は機能を拡充していく予定です。クォータニオンは欲しいなーと思っているのでなんとかしたいです。追記)クォータニオンをサポートしました。機能の拡充といってもあんまりむやみに増やすことはしないと思います。数学用じゃなくてWebGL用なので、GLSLでサクッとできるようなことはMatrixGL側で実装しない可能性もあります。何か要望があればgithubでissue(https://github.com/kotofurumiya/matrixgl/issues)を立てておくか、Twitterで言ってくれればなんらかの対応はします。issueは日本語でもいいですよ。APIでブラウザからの各種機能へのアクセス権限を確認・要求するWebGL2で2Dグラフィックスを扱う[翻訳]Dartの非同期サポート:フェーズ1RSSプロフィール古都ことふるみやことです。フロントエンドとかいろいろやるよ。