WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含む全てのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。Flash PlayerやUnity Web Playerのようなブラウザ・プラグインを必要としないため、プラグイン未搭載のスマートフォンのブラウザでも利用可能なことが特徴です。

本記事では数秒で試せるオリジナルのWebGLのHTML5デモを多数掲載。スマートフォンのブラウザで試しながら、WebGLの可能性を体験ください。

燃え盛る炎の表現 (Away3D)

では、いくつか実際のデモを再生させて試していきましょう。まずは燃え盛る炎を表現した3Dの作例です。タッチして動かすとアングルが変わります。

この作例はもともとFlashで作成されたものですが、2014年にWebGLに移植しました。Flashのほうが技術として先行・実用化されてましたが、WebGLはそれに匹敵する表現力を有していることがわかります。詳しくは記事「WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的」をご覧下さい。

タイムリマップ表現① (Three.js)

次は3D空間でのスローモーションのデモを紹介します。リアルタイムのモーショングラフィックスとなりますが、JavaScriptを用いスローモーションの動きを実現しています。

空間に無数に配置された赤い立方体が落下する作例。落下途中にマトリックスの映画のようなスローモーションになります。WebGLを利用していることもあり、無数のオブジェクトの制御がウェブの技術で実現できていることが特徴です。

タイムリマップ表現② (Three.js)

無数のアイコンが四方から集まっていき、最終的にワードが形成される作例。これも演出途中にスローモーションになるリアルタイムモーショングラフィックスとなっています。これらのデモは記事「高機能なモーション制作用JSライブラリTweenMaxを使ったタイムリマップ表現」で解説してます。

3Dゲームエフェクト (Three.js)

ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。このデモは必殺技やオーラのようなものがWebGLで表現可能であるかを試した演出サンプルです。作り方のエッセンスは記事「エフェクト作成入門講座 Three.js編 ゲーム演出に役立つマグマ表現の作り方」で解説してます。

カバーフローの表現 (Three.js)

従来のmacOSやiTunesでお馴染みのカバーフローの表現をWebGLで作成。画面下側のスライダーを動かすことで、左右の写真にスライドさせることができます。フレームワークにはThree.jsスリー・ジェイエスを利用。詳しくは記事「HTML5とWebGLで実現するカバーフローの表現」をご覧下さい。

物理演算の粒子表現 (Three.js)

画面をタッチしている間はパーティクルが発生し、床に落下する作例。フレームワークにはThree.jsを利用。最適化ができていないため、端末によっては不安定な動作になります。WebGLの開発は「性能の最適化」が重要であることがわかります。

RGBの三原色分解表現 (Away3D)

写真をRGB三原色に分解して三次元で表示するHTML5とWebGLの作例。一見するとただの写真を表示しているだけに見えますが、ステージをドラッグすると写真が赤・青・緑の3原色に分解されます。詳しくは記事「HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ」をご覧下さい。

青い粒子の表現 (Away3D)

青い粒子が飛散する3Dの作例で、タッチでアングルが変えられます。詳しくは記事「WebGL対応の本格派フレームワークAway3Dを使ったパーティクルデモ」をご覧下さい。もともとFlashで作成してましたが、WebGLに移植した作例。

パーティクル表現 (Away3D)

フレームワークとしてAway3Dアウェイ・スリーディー TypeScriptを使ったシンプルな作例。負荷も少ない(ドローコールが少ない)ため、ほとんどのモバイル端末でも安定して動作します。

衛星軌道の表現 (Three.js)

衛星軌道の実装方法を説明した記事「WebGL開発に役立つ重要な三角関数の数式・概念まとめ (Three.js編)」の作例。タッチでアングルを回転させることができます。航空路や輸出入のデータビジュアライゼーションで使えそうなテクニックです。

Three.jsの使い方は記事「最新版で学ぶThree.js入門」で解説しています。ブラウザとエディターがあれば簡単につくれるので、ぜひ試してください。

二次元表現でもWebGLが役立つ

WebGLに対して誤解されることが多いのですが、「WebGLは3Dのためだけの機能」ではありません。WebGLは実は2次元表現でも利用できます。次のデモはWebGLの高速なグラフィック処理を利用して作られた、物理演算のシミュレーションです。

150530_liquildfun_pixijs

この作例ではWebGLを2D表現として利用できるJSライブラリ「Pixi.js」が用いられています。WebGLならでは強力な描画性能は、大量の粒子/流体表現に適しているでしょう

WebGLのブラウザ対応状況

2017年現在、WebGLはほとんどのデスクトップやスマートフォンのブラウザーで対応しています。具体的には対応ブラウザはIE 11以上、Chrome 18以上、Firefox 4以上、Safari 8以上となります。2014年のiOS 8のリリースを皮切りにiPhoneでもWebGLが利用できるようになりましたが、iOS 8のリリースから3年経過しているので、今やほとんどのiPhoneでWebGLが動作すると考えてもよいでしょう。

161012_webgl_caniuse

▲ WebGLの対応状況。灰色の行が現行版バージョンを、緑色になっているものがWebGLに対応していることを示します。「Can I Use」より

また、すべてのブラウザでWebGLを有効化するのに設定の必要がなく、デフォルトでWebGLを利用できます。

IE 10以下のブラウザはWebGLが未対応

WebGLの採用を躊躇する要因として考えられるのは、WebGLはInternet Exploere 10 (IE 10)以下で未対応であることです。ただ、記事「Internet Explorerサポートポリシー変更の重要なお知らせ – Microsoft」によると、IE 11以外のバージョンはメジャーなOSにおいてMicrosoftはサポートしていません(※)。そのため、実質的にはIE 10以下のブラウザは対応する必要はなく、WebGLが利用可能なIE 11だけを視野に入れれば良いということになります。

ウェブ制作の受発注において、もしIE 9やIE 10の対応を求められた場合は上記のMicrosoftの記事のリンクを伝えるといいでしょう。もしくは代替手段としてWebGLと同等の表現が実現可能なFlashのStage3Dの採用が考えられます。詳しくは「Flash Stage3Dとの比較から見えてくるWebGLのあり方について」をご覧ください。

※IE 9はWindows Server 2008のみにおいてのみサポートを受けられます。Windows Server 2008はサーバー用OSなので、ウェブ制作においてはIE 9を対応外とするのが一般的です。

スマホでもWebGLがぬるぬる動く検証動画

WebGLがスマホのブラウザでどのぐらい再生できるか録画したので、上のビデオをご覧ください。検証に用いた端末は次の3つです(2014年に録画したビデオなので、古い端末です)。

  • iPhone 6 Plus (iOS 8)
  • iPhone 5s (iOS8にアップデート済み)
  • Sony Xperia A (Android 4.1.2 / Firefox 32)

結果はどうだったかというとiPhone 6 PlusとiPhone 5sでは非常に滑らかに再生できています。コンテンツの最適化次第なところもありますが、デスクトップ向けに制作したデモでもぬるぬる動いていることから、iPhoneのWebGLはとても高速に動作すると言えそうです

まとめ

WebGLを使うとネイティブアプリに遜色ない表現を作ることが可能になり、ブラウザ向けのWebコンテンツの可能性が今後ますます広がるはずです。当サイトでは記事「iOSにおけるSwift/Unity/PhoneGap/Adobe AIRのパフォーマンス比較検証」で類似技術と比較しましたが、WebGLは非常に高い性能を有していることを確認しました。

ゲームや広告表現、データビジュアライゼーションなどWebGLを必要とするコンテンツは多岐にわたります。ぜひみなさんもWebGLコンテンツに挑戦してみてはいかがでしょうか?