HTML GL – HTML構造をそのままWebGL化
Web上でのアニメーション、エフェクトについては多くの問題を抱えています。特に大きいのは、その実行速度のようです。CSS3を使うと改善しますが、それでも複雑なアニメーションが行える訳ではありません。 そこで生み出されたのがHTML GLです。WebGLでDOMをレンダリングすることで、その後のアニメーション処理を大幅に改善するライブラリです。
HTML GLの使い方
HTML GLでは元々のHTMLがあった上で、それをWeb GLで再現します。かつ、元々のDOM構造は廃棄します。
こんな感じの揺らいだアニメーションも高速に動作します。以下はアニメーションGIFなので粗いですが、実際にはFPS 60出ています。
エフェクトはダイナミックに適用できます。オプションも数多く用意されています。
WebGLはWebとは言いつつもその表現方法はこれまでのHTMLとは全く異なり、OpenGLに近いものになります。その習得は容易ではありません。HTML GLを使えば既存のHTMLでデザインを行って、その上でWebGL上でコンテンツの操作ができるようになります。ちょっとしたアニメーション表示などに使っても便利そうです。
WebGL上に展開はしていますが、クリックイベントはとれるようになっています。さらにWeb Componentとして利用することも、jQueryと組み合わせた利用も可能です。
HTML GLはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。