泰延WebGL2952WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。WebGLを使えば主に次のようなコンテンツ開発に役立ちます。Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTML5デモを多数掲載。どれもスマートフォンのブラウザでも利用可能です。WebGLの可能性を体験したうえで、WebGLの勉強方法を紹介します。(Away3D)では、実際のデモを再生させて試していきましょう。燃え盛る炎を表現した3Dの作例です。タッチして動かすとアングルが変わります。(TypeScript)この作例はもともとFlashで作成されたものですが、2014年にWebGLに移植しました。Flashのほうが技術として先行していましたが、WebGLはそれに匹敵する表現力を有していることがわかります。(Three.js)スローモーションのデモを紹介します。リアルタイムのモーショングラフィックスとなりますが、JavaScriptを用いスローモーションの動きを実現しています。デモを再生するソースコード空間に無数に配置された赤い立方体が落下する作例。落下途中にマトリックスの映画のようなスローモーションになります。大量のオブジェクトを動かしても滑らかなことが特徴です。(Three.js)デモを再生するソースコード無数のアイコンが集まっていき、最終的にワードが形成される作例。これも演出途中にスローモーションになるリアルタイムモーショングラフィックスとなっています。これらのデモは記事「高機能なモーション制作用JSライブラリTweenMaxを使ったタイムリマップ表現」で解説してます。(Three.js)デモを別ウインドウで再生するソースコードを確認するゲームやビジュアライゼーションのウェブコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。このデモは必殺技やオーラのようなものがWebGLで表現可能であるかを試した演出サンプルです。ゲーム演出に役立つマグマ表現の作り方」で解説しています。(TypeScript)従来のmacOSやiTunesでお馴染みのカバーフローの表現をWebGLで作成。画面下側のスライダーを動かすことで、左右の写真にスライドさせることができます。フレームワークにはThree.jsスリー・ジェイエスを利用。詳しくは記事「HTML5とWebGLで実現するカバーフローの表現」をご覧ください。(TypeScript)写真をRGB三原色に分解して3次元で表示するHTML5とWebGLの作例。一見するとただの写真を表示しているだけに見えますが、ステージをドラッグすると写真が赤・青・緑の3原色に分解されます。詳しくは記事「HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ」をご覧ください。(TypeScript)青い粒子が飛散する3Dの作例で、タッチでアングルが変えられます。詳しくは記事「WebGL対応の本格派フレームワークAway3Dを使ったパーティクルデモ」をご覧ください。Flashで作成してましたが、WebGLに移植した作例。(Three.js編)」の作例。タッチでアングルを回転させることができます。航空路や輸出入のデータビジュアライゼーションで使えそうなテクニックです。Three.jsの使い方は記事「Three.js入門サイト」で解説しています。ブラウザとエディターがあれば簡単につくれるので、ぜひ試してください。弊社も開発に協力したゲームですが、戦闘機のゲーム画面をWebGLを用いて実装しました。詳しくは次の記事をご覧ください。-フォーメーションガールズ-」における3Dレンダリング技術解説2次元表現でもWebGLが役立つWebGLに対して誤解されることが多いのですが、「WebGLは3Dのためだけの機能」ではありません。WebGLは実は2次元表現でも利用できます。次のデモはWebGLの高速なグラフィック処理を利用して作られた、物理演算のシミュレーションです。サンプルを別ウインドウで開くコードを確認するこの作例ではWebGLを2D表現として利用できるJSライブラリ「Pixi.js」が用いられています。WebGLならでは強力な描画性能は、大量の流体表現に適しているでしょう。WebGLのブラウザ対応状況2017年現在、WebGLはほとんどのデスクトップやスマートフォンのブラウザーで対応しています。8のリリースから5年経過しているので、今やほとんどのiPhoneでWebGLが動作すると考えて問題ありません。WebGLの対応状況。灰色の行が現行版バージョンを、緑色になっているものがWebGLに対応していることを示します。10)以下で未対応であることです。11以外のバージョンはメジャーなOSにおいてMicrosoftはサポートしていません(※)。10以下のブラウザを対応する義務はウェブ制作者にありません。11だけを視野に入れれば良いということになります。スマホでもWebGLがぬるぬる動く検証動画WebGLがスマホのブラウザでどのぐらい再生できるか録画したので、上のビデオをご覧ください。2014年に録画したビデオなので、検証に用いた端末は古い端末です。5sでは滑らかにWebGLが再生できています。コンテンツの最適化次第なところもありますが、デスクトップ向けに制作したデモでもぬるぬる動いていることから、iPhoneのWebGLはとても高速に動作すると言えそうです。WebGLを学ぶには定番はThree.jsを学ぶことWebGLは基本的な技術なので応用の幅が大きいです。「WebGLを使うと、はなやかな3D表現ができるようになる」とイメージを想像している方は、WebGLの代名詞とも言われるJavaScriptライブラリ「Three.js」から学ぶのが王道でしょう。MEDIAThree.jsは短いコード量で3Dを実現でき、入門者にオススメのJavaScriptライブラリです。Three.jsは入門者に適しているだけでなく、第一線の制作現場でも使われています。WebGLの仕事の半分以上はThree.jsと考えても大げさではないはずです。WebGLの仕組みの理解もWebGLのプリミティブな知識が欲しい方は次のサイトが役立ちます。WebGLの原理的な仕組みを理解していれば、シェーダーの開発に役立ちます。Three.jsだけでもかなりの表現を開発できますが、シェーダーが使えるとさらにその先の表現ができるようになります。wgld.orgまとめWebGLを使うとネイティブアプリに遜色ない表現を作ることが可能になり、ブラウザ向けのウェブコンテンツの可能性が今後ますます広がるはずです。AIRのパフォーマンス比較検証」で類似技術と比較しましたが、WebGLは非常に高い性能を有していることを確認しました。ゲームや広告表現、データビジュアライゼーションなどWebGLを必要とするコンテンツは多岐にわたります。平成31年4月19日に内容をメンテナンスしています。