WebGL入門
サンプルで理解する3D表現の迫力

29
50

WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。

WebGLを使えば主に次のようなコンテンツ開発に役立ちます。

  • 3Dモデルの表示
  • ゲームコンテンツ
  • データビジュアライゼーション
  • プログラミングアート
  • 魅力的で華やかな画面演出(広告系サイトなど)

かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。

本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTML5デモを多数掲載。どれもスマートフォンのブラウザでも利用可能です。WebGLの可能性を体験したうえで、WebGLの勉強方法を紹介します。

燃え盛る炎の表現 (Away3D)

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

この作例はもともとFlashで作成されたものですが、2014年にWebGLに移植しました。Flashのほうが技術として先行していましたが、WebGLはそれに匹敵する表現力を有していることがわかります。

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

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

空間に無数に配置された赤い立方体が落下する作例。落下途中にマトリックスの映画のようなスローモーションになります。大量のオブジェクトを動かしても滑らかなことが特徴です。

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

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

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

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

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

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

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

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

青い粒子の表現 (Away3D)

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

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

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

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

ゲームの3D表現に利用

弊社も開発に協力したゲームですが、戦闘機のゲーム画面をWebGLを用いて実装しました。詳しくは次の記事をご覧ください。

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

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

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

WebGLのブラウザ対応状況

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

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

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

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

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

WebGLがスマホのブラウザでどのぐらい再生できるか録画したので、上のビデオをご覧ください。2014年に録画したビデオなので、検証に用いた端末は古い端末です。それでもiPhone 6 PlusとiPhone 5sでは滑らかにWebGLが再生できています。コンテンツの最適化次第なところもありますが、デスクトップ向けに制作したデモでもぬるぬる動いていることから、iPhoneのWebGLはとても高速に動作すると言えそうです

WebGLを学ぶには

定番はThree.jsを学ぶこと

WebGLは基本的な技術なので応用の幅が大きいです。「WebGLを使うと、はなやかな3D表現ができるようになる」とイメージを想像している方は、WebGLの代名詞とも言われるJavaScriptライブラリ「Three.js」から学ぶのが王道でしょう。

Three.jsは短いコード量で3Dを実現でき、入門者にオススメのJavaScriptライブラリです。さらに、Three.jsは入門者に適しているだけでなく、第一線の制作現場でも使われています。WebGLの仕事の半分以上はThree.jsと考えても大げさではないはずです。

WebGLの仕組みの理解も

WebGLのプリミティブな知識が欲しい方は次のサイトが役立ちます。WebGLの原理的な仕組みを理解していれば、シェーダーの開発に役立ちます。Three.jsだけでもかなりの表現を開発できますが、シェーダーが使えるとさらにその先の表現ができるようになります。

まとめ

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

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

※この記事が公開されたのは5年2ヶ月前ですが、 平成31年4月19日に内容をメンテナンスしています。