WebGL、大変ですよね。OpenGLベースなのでC言語っぽいAPIと付き合っていかなければならず、JavaScriptの文化とはなかなか馴染みません。

そこでWebGLをオブジェクト指向っぽく触れるように、WebGL2用のラッパーライブラリであるXenoGLを開発・公開しました。

経緯

WebGLのAPIはなかなか難しいです。昔ながらの低級言語向け(この程度で低級って言ってると怒られるかもしれませんが……)のAPIで、今風のオブジェクト指向などとは全く異なる文化を持っていると言えます。

自分で触るだけならまだしも、他人にオススメしようとすると、大抵ドン引きされます。状態管理などが難しく、「今どんな状態で、何をしなければいけないのか」を把握するのに、ものすごく時間がかかります。

なので現代では、WebGLを触るときはThree.jsなどのライブラリを使うのが一般的です。しかしThree.jsはすこし大仰というか、もっと生に近いWebGLを触りたい時があります。ついでにいうと生に近いだけで生のWebGLは触りたくありません。わかります?このフクザツな気持ち。

そんなわけでWebGL2のオブジェクト指向ラッパーであるXenoGLを作って公開しました。まだ未完成ですが、3連休も終わるので一旦公開です。

XenoGL

WebGL2用のラッパーライブラリ、名前はXenoGLです!本当は「ModernGL」とか「ObjectGL」がよかったんですが、そのあたりは片っ端から名前被りしてました。「xeno-」は「異質な」「異なる」とかの意味です。「ゼノギアス」の「ゼノ」ですね。

npmかgithubからダウンロードできます。

ライセンスはMITライセンスです。好きに使ったり再配布したり切り刻んだりしてください。

注意

XenoGLはまだ不安定版です。APIは変更される可能性があり、アップデートによりあなたのコードが動かなくなる可能性があります。信頼性が求められるソフトウェアにはまだ絶対に使わないでください。

インストール

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

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

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

これで準備OKです。

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

npmでインストールするには、普通にnpm installするだけです。

あとはimportかrequireしてください。

基本的な使い方

まずは適当なcanvasを用意し、XenoGLのWebGL2コンテキストを作成します。

次にシェーダとプログラムを作成します。プログラムを作成したらコンテキストにプログラムを追加します。

次にデータを用意します。例えば頂点座標と頂点色としましょう。これは普通にFloat32Arrayで用意すればいいです。

このあたりのデータを作る方法としてライブラリを使う方法がありますが、そのときは「WebGL用のJavaScript行列計算ライブラリMatrixGLを公開しました」もよろしくお願いします。

次にバッファを作ってプログラムに追加します。

あとは描画するだけ!

ね、簡単でしょう?

その他の使い方

マルチプログラム

WebGL2において、複数のプログラムを使いたい時があります。そのときはxgl.activateProgramかxgl.useProgramを使います。

activateProgramとuseProgramの違いは、activateProgramがアトリビュートの切り替えの面倒を見てくれるのに対して、useProgramはただ単純にプログラムを切り替えるだけです。

activateProgramは非常に重い処理で、毎フレーム呼び出しているとパフォーマンスの問題が出てきます。単にプログラムを切り替えるだけでいいときはuseProgramを使いましょう。

ただし、OpenGL/WebGLの知識がない人は、できるだけactivateProgramを使いましょう。

バッファ

バッファには初期化時にデータを送る以外にも、後からデータを送ることもできます。データを送るにはbuffer.bufferDataを使います。

このあたりは場面によって柔軟に使っていきましょう。

インターリーブドバッファ

バッファを作る時に複数のアトリビュートを指定すると、自動的にインターリーブしてくれます。

インデックスバッファ

インデックスバッファはnew XenoGL.ElementArrayBufferで作成することができます。作り方はArrayBufferと同じです。

あとはプログラムに追加すれば自動的にインデックスバッファとして使われます。

手動で切り替えたい場合はprogram.activateElemntArrayBuffer(indexBuffer)を使ってください。

他のバッファ(フレームバッファとか)

すいません。まだ対応してません。対応したらここに追記します。

Uniform変数

uniform変数もnewすることで作ることができます。

データをセットするには、setValue(value, type)、setVector(vector, type)、setMatrix(matrix)を使います。作ったらプログラムに追加しましょう。後から値をセットし直すこともできます。

Vertex Array Object

Vertex Array Object(VAO)も使えます。これもnewしてください。

第一引数にバッファを、第二引数(省略化)にオプションを指定します。あとはプログラムに追加するだけです。

複数のVAOを追加したとき、別のVAOを有効化するには、program.activateVertexArrayObject(vao)を使います。

Uniform Buffer Object

Uniform Buffer Objectはuniform変数をバッファとして扱える機能です。プログラムの個数だけ作って、それぞれのプログラムに追加します。

Transform Feedback

Transform Feedbackを利用するには、まずプログラム作成時にfeedbackVaryingsを指定します。

そしてTransformFeedbackを作成し、コンテキスト(プログラムではないです!)に追加します。

あとは適当なバッファを作り、tf.feedbackメソッドでフィードバックします。

テクスチャ

まだサポートしてないです。サポートしたらここに追記します。

(2018/02/13 追記)テクスチャをサポートしました。

テクスチャを使用するには、使いたい画像を読み込み、XenoGL.Texture2Dをnewします。Texture2Dオブジェクトを作成したらコンテキストに追加します。

テクスチャのソースとして使えるのはimg要素、canvas要素、video要素、ImageBitmap、ImageData、ArrayBufferViewです。

細かいオプションを指定して作成することもできます。

複数のテクスチャを使用する場合、xgl.activateTextureを使用します。

その他

clearとかenableとか使えます。

APIドキュメント

より詳しくは、APIドキュメント(https://kotofurumiya.github.io/xenogl/)をご覧ください。

今後の展望

まだまだ作り始めたばかりで機能が全然足りてないですが、徐々に拡充していく予定です。

要望やバグ報告などはTwitterか、GitHubのissue(https://github.com/kotofurumiya/xenogl/issues)にどうぞ。issueは日本語で大丈夫です。