ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0はChromeとFirefoxで標準で利用でき、次世代のウェブ3D表現技術として注目されています。

前回の記事では大量のオブジェクトを一度に描画できるGeometry Instancing(ジオメトリ・インスタンシング)について紹介しました。連載の第二回となる本記事では同じくWebGL 2.0で追加された代表的な機能であるMultiple Render Targets(マルチプル・レンダー・ターゲッツ)についてデモを交えて紹介します。

Multiple Render Targetsによる動的なライティング表現

Multiple Render Targetsを使うと下記のデモのような表現が可能です。

WebGL 2.0 demo - Multiple Render Targets

右上のUIからライトの数や動きを変えたり、G-Buffer(後述)表示に切り替えられます。また、マウスドラッグやマウスホイール/上下矢印キーで視点を変更できます。

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

オフスクリーンレンダリングについて

Multiple Render Targetsの説明の前に、まずはオフスクリーンレンダリングについて説明します。WebGLは通常、描画結果を画面(canvas)に直接出力します。これに対し、描画結果をWebGLのテクスチャーに出力するレンダリング方法があり、これをオフスクリーンレンダリングとよびます。オフスクリーンレンダリングの結果は他の3Dオブジェクトのテクスチャーとして使用できます。

たとえば、3D空間のレンダリング結果をテクスチャーとして平面に貼り付けることで鏡面表現としたり、画面全体にブラーやモザイクなどのポストエフェクト表現を追加するために使われます。また、出力を目で見えるような画像データの形としてではなく、数値データとして扱うことで物体の影(シャドウ)などの表現の計算にも使われています。


オフスクリーンレンダリング

Multiple Render Targetsとは

Multiple Render Targetsは上記のオフスクリーンレンダリングを行う際に、一度のドローコール(描画命令)で複数のテクスチャーに別々の情報を同時に描画(出力)できる機能です。従来は一度のドローコールにつき一つのテクスチャーへの出力しかできませんでした。そのため、オブジェクトの座標や法線(面の向き)などの異なる情報を複数のテクスチャーに出力したい場合、ドローコールを複数回行う必要がありました。前回の記事でも触れましたが、一般的にドローコールはGPUの演算性能と比べると負荷が高いため、高速化のためにはドローコールの回数を少なくすることが望ましいです。こういった場合にMultiple Render Targetsが役に立ちます。


Multiple Render Targets

次のページではこのMultiple Render Targetsがどのような用途で使えるのか紹介します。