ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0が主要なブラウザで正式対応し始めました。2017年1月にリリースされたChrome 56とFirefox 51から標準で利用でき、ウェブ表現のさらなる進化への期待が高まります。

本連載では2回に分けてWebGL 2.0の新機能をデモを交えて紹介します。

WebGL 2.0の機能を使ったデモ

まずはWebGL 2.0ではどんなことができるのか、機能ごとにデモを作成したので紹介します。それぞれ、マウスドラッグやマウスホイール/上下矢印キーで視点を変更できるので動かしてみてください。

※各デモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。

Geometry Instancing

Geometry Instancing(ジオメトリインスタンシング)は一度のドローコール(描画命令)で同じオブジェクトを複数同時に描画する機能です。この機能を使うと従来と比べ大量のオブジェクトを高速に描画できます。デモ右上の[Num]からオブジェクトの数を変更しても高いフレームレートが保てていることがわかります。

WebGL 2.0 demo - Gepmetry Instancing

Multiple Render Targets

Multiple Render Targets(マルチプルレンダーターゲッツ)は一度のドローコールで複数のテクスチャに描画(出力)ができる機能です。この機能を使って、大量のライトを扱える「Deferred(ディファード)レンダリング」表現のデモを作成しました。デモ右上の[Num]からライトの数を変更できます。従来の手法では一つのオブジェクトに対して影響を与えるライトは数個〜十数個が一般的でしたが、このデモでは最大100個ものライトを配置できます。

WebGL 2.0 demo - Multiple Render Targets

Transform Feedback

Transform Feedback(トランスフォームフィードバック)はGPUから頂点データを更新できる機能です。この機能を使用すると頂点の座標計算をGPUで高速に行えるため、大量のパーティクルを用いた表現が可能になります。このデモでは10万個という大量のパーティクルの座標をCurlノイズという手法にもとづいてGPUで計算して表示しています。

WebGL 2.0 demo - Transform Feedback

WebGL 2.0の位置づけ

WebGLは組み込み機器向けのコンピューターグラフィックスAPI仕様であるOpenGL ESのブラウザ向けの派生版です(さらにOpenGL ESはOpenGLの派生版です)。WebGL 1.0はこのOpenGL ES 2.0の派生版でしたが、WebGL 2.0はOpenGL ES 2.0の次バージョンであるOpenGL ES 3.0の派生版となっています。OpenGL ES 3.0は2.0と後方互換性があるため、WebGL 2.0もWebGL 1.0と後方互換性があるといえるでしょう。


WebGL 2.0の位置付け

WebGL 2.0の機能を使用する場合はシェーダーの文法など一部変わる部分もありますが、単純にWebGL 1.0に機能が追加されたものがWebGL 2.0と考えてよいでしょう。本連載の前後編を通して、この追加された機能の中から代表的な下記の3つを紹介します。

  • Geometry Instancing
  • Multiple Render Targets(後編)
  • Transform Feedback(後編)

前編ではこの中のGeometry Instancingについて次のページで詳しく紹介します。