超軽量型 WebGL 補助ライブラリ lightgl.js！ 作者は超有名な「あのデモ」の制作者さん
とても少ない記述量でさくっと書ける
今回ご紹介するのは、WebGL 界屈指の超有名デモを作った Evan Wallace 氏の WebGL 補助ライブラリである lightgl.js です。
その超有名デモ、というのは、日本でもかなり有名なデモなので恐らくみなさん一度は見たことがあると思います。その作者である Evan Wallace 氏は、GLSL でフィルタを掛けることができるライブラリなど、他にも WebGL や GLSL に関するライブラリを開発していますが、この lightgl.js はとにかく記述量がかなり少なく済んでしまうというのが最大の特徴かなと思います。
記述量は少ないがやれることは本格的！
本当に簡単な描画を行うだけであれば、lightgl.js はかなり少ないコードで WebGL を走らせることができます。
これは Github に掲載されているコードを見てもらえればわかることなんですが、ライブラリの独自オブジェクトであらゆる処理が綺麗にラップされていて、WebGL コンテキストが持つ素のメソッドを呼ぶ必要はまったく無い書き方ができるみたいですね。
ポリゴンだけでなく、ラインの描画などにも対応しているようですが、動的に生成できるメッシュの種類などは、three.js と比べてしまうとさすがに数は少ないです。
ただ、ビルドされたライブラリは恐ろしく小容量のファイルですし、そもそも three.js と同じような使い方を想定して設計されたものではないと思いますので、あまり問題ないのかなとは思います。
ちなみに、Github に掲載されているサンプルのコードは、以下のような感じ。
だいぶ記述量は少ないです。ぱっと見た感じ、かなり直感的に書けそうな印象を受けます。
<!DOCTYPE html>
<html><body>
<script src="lightgl.js"></script>
<script>
var angle = 0;
var gl = GL.create();
var mesh = GL.Mesh.cube();
var shader = new GL.Shader('\
void main() {\
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
}\
', '\
void main() {\
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\
}\
');
gl.onupdate = function(seconds) {
angle += 45 * seconds;
};
gl.ondraw = function() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.loadIdentity();
gl.translate(0, 0, -5);
gl.rotate(30, 1, 0, 0);
gl.rotate(angle, 0, 1, 0);
shader.draw(mesh);
};
gl.fullscreen();
gl.animate();
</script>
</body></html>
HTML ファイル一つで簡単に WebGL 実行できますね！
非常に簡単に記述できる一方、多少踏みこんだ処理もできるようになっています。
フレームバッファにオフスクリーンで描画して、その結果を持ってきてマルチテクスチャでポリゴンに貼る、なんてことも比較的簡単にできるようです。
スクラッチでこれを書くと結構大変ですが、lightgl.js なら簡単そう。
そもそもの技術レベルが相当高い方が書かれているライブラリなので、このあたりしっかり作ってある印象を受けます。
Github のページには Examples へのリンクがいくつか置かれており、そのなかには 3DCG の難関のひとつである、シャドウマッピングのサンプルなんかもあります。
左下のほうには深度バッファシャドウではおなじみの、深度値だけを描きこんだシーンの様子なんかも出ていて、影の実装に参考にできる点も多いのではないでしょうか。
ちなみに、「超有名デモ」というのは、あのプールにボールが浮いているデモ作品のことです。
あれは日本でもいまだに定期的に話題になったりしますが、あの作品自体はかなり昔からあります。
なんなら、私が WebGL を勉強し始めたころには既にあったような……そんな気もします。かなり昔からこういうレベルの作品をばしばし書いてらっしゃったので、もう雲の上の人という感じ。
WebGL Water は日本で一番有名な WebGL 実装例、と言ってもいいかもしれません。
パストレーシングやレイトレーシングの知識もかなりある方みたいで、lightgl.js にもレイキャスティングをサポートしている機能など、しっかり入っています。
開発者目線で言うと、WebGL を体験したことがないのであれば、これをそのまま利用して記述するのも WebGL を体験する上ではいいと思います。逆にすでにいくらかの WebGL の実装経験があり、今まさに勉強中という感じなのであればこのライブラリの中身を見てみることでかなり参考にできる点が多いと思います。
three.js なんかもそうなんですが、簡単に記述できるということは大きなメリットですが、その代償として 3D や 3D 数学の基礎を身に付けるのにはこの手のライブラリは向いていません。その点には、注意しましょう。勉強だけは、省略して簡単にというわけにはいかないので、こういったライブラリはそれぞれの習熟度や目指すレベルに合わせて、うまく利用していくのがいいでしょう。
ぜひチェックしてみてください。
