ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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のオープンソース・ソフトウェアです。

HTML GL filters demo

PixelsCommander/HTML-GL

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2