HTML5の周辺技術の一つ、WebGLがどんなもんか様子を伺ってみたのでメモっとく。
WebGL概要
- Mozillaが作ってたCanvas3Dがベース
- OpenGL 2.0 or OpenGL ES 2.0をサポートする環境でハードウェアアクセラレートされた2D、3Dグラフィックスを表示する
- HTML5のCanvasを通じた、JavaScriptとOpenGL ES 2.0のバインディング
リソース
WebGL対応ブラウザ（いずれも開発中）
仕事が早いというか、気が早いというかすでにいくつかのライブラリが公開されてる。
WebGLライブラリ
- WebGLU ※MIT License
- SceneJS ※MIT License または GPL Version 2
- SpiderGL ※GNU Library または LGPL
- GLGE ※LGPL
※SpiderGLが、PV3Dとかと感覚的に近いのかな？GLGEなんかはシーングラフをxmlで記述したものをベースに作ってく感じで勝手が違う。
上記ライブラリは使わずに、NeHeからの移植チュートリアルを大いに参考にしつつコードも拝借しながら、いくつかデモを作ってみた。いずれも MacBookPro (Mobility Radeon X1600) OSX10.5.8 にて Webkit、Minefield、Chromium で動作確認。
※Mac版Webkit r54648以降だと動作しなくなった。
3D Cube（要：WebGL対応ブラウザ）
3D Cube Matrix（要：WebGL対応ブラウザ）
Billboard Particle（要：WebGL対応ブラウザ）
思ってたよりパフォーマンス出ない。WebkitとMinefieldに関してはGPUアクセラレーションが効いてるっぽいけど、Chromiumでは機能してない感じ。開発中のものにケチつけてもしょうがないけども、回転数が足りなくて一番おいしいとこが使えてないエンジン載せ替えたばっかりのハチロクみたいなもどかしさがある。「JavaScriptでこんなに！？」みたいなインパクトが欲しいな。オレのコードと環境の問題かもしれんけど。
OpenGL + GLSLそのものを勉強する環境としてはカジュアルに取り組めていいと思う。個人的にはかなり勉強になったし。
なんていうか、派手なビジュアル作りに使うってのはむしろ亜流で、もっと地味なとこでじわじわ効いてくる技術なんだろうなーと漠然と思った。
Flashプラットフォームと比較して云々ってのは、なんかズレてる気がする。マーケティング戦略としてはアリなのかもしれんけど。
2010/02/11追記：
ほとんどシェーダーにやらせる感じの4KB intro的アプローチだとどうなるか？と素朴に興味が涌いたので、日本屈指のscener、kiokuさんの4K Procedural Gfx Monitorに付属するサンプルのシェーダーを拝借させていただいてレイトレ動かしてみた。
Raytrace（要：WebGL対応ブラウザ）
※Minefieldだと動かない。要調査。※Minefieldでも動いたそうです。
ブラウザのウインドウサイズに追従するので、あんまりデカくするとキビしいけどなんとか動いてる。この手法ならGPUパワーでゴリ押しできそう。やっぱりJavascriptとのバインディングって釣り合いが取れてないんじゃなかろうか。
随分楽しめたんで、もう満足。
OpenGL + GLSLをちゃんと勉強しとこ。
