HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト

2012年02月16日 (木)
Tweet

HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト

JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。

デモを見る (2023年バージョン)
デモを見る (2012年バージョン)

※2023年にデモをThree.js r151で動作するようにメンテナンスしました。

WebGLとCanvasの違い

今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。

失敗作A (自前で作成したバージョン)
失敗作B (Three.jsのCanvasレンダラーを利用したバージョン)

対策としてトライアングルを外側に広げるなど色々試したのですが効果がなく、逆に演出が破綻したりもします。

さらに言えばCanvasタグを使うと処理負荷が増大するので、ヒビ割れが解決したとしても実際は利用が難しいという印象です。そもそもCanvasタグでこういう画像変形の際に用いる「トライアングル」の表現が難しく(※Canvas上でメッシュに分解、その後イメージをメッシュ毎に台形変形してクリップする方法で実装)、表示精度も速度も厳しいという感じでした。

最終的にWebGL版を採用しましたが、WebGLであればGPU側で「トライアングル」が処理されるので、表示制度も速度も十分なクオリティーを得ることができます。ただ、WebGLは利用できる環境が少ないのが現状です(ChromeとFirefox、WebGLをオプションで有効にしたSafariのみ)。

なお、WebGLはThree.jsというMr.doob先生の3D用のJSライブラリを通して利用しています。3D制御しているのは明らかにオーバースペックですが、メッシュ制御できるライブラリで思いついたのがこれぐらいだったもので。もし2Dでメッシュ制御ができるJSライブラリがあれば、教えて頂けると幸いです。ちなみにFirefoxはWebGLをサポートしているらしいですが、Three.jsの互換性からかメッシュの変形を適用させることはできませんでした。

Flash版とCanvas版の比較

同じものを以前Flashで実装したことがありますが（wonderflに投稿したBetweenAS3な作例3本）、Flashであれば境界に隙間が発生することがないし、処理負荷もそれほど大きくありませんでした。Canvas版だと10×10セグメントで限界でしたが、Flash Playerであれば非GPUでも20×20セグメントでもまだ余裕がある感じです。

WebGLでできることはFlashのStage3Dでできるし、WebGLは対象ブラウザが限られるので(IE搭載の可能性も望み薄か)、WebGLに力をいれるメリットが全く見えてこないというのが正直なところです…。