研太郎WebGLWebGL22327ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。2.0はChromeとFirefoxで標準で利用でき、次世代のウェブ3D表現技術として注目されています。Instancing(ジオメトリ・インスタンシング)について紹介しました。Targets(マルチプル・レンダー・ターゲッツ)についてデモを交えて紹介します。Targetsを使うと下記のデモのような表現が可能です。デモを別ウインドウで再生するソースコードを確認する右上のUIからライトの数や動きを変えたり、G-Buffer(後述)表示に切り替えられます。マウスドラッグやマウスホイール/上下矢印キーで視点を変更できます。2.0で作成しています。2.0に対応したブラウザでご覧ください。Targetsの説明の前に、まずはオフスクリーンレンダリングについて説明します。WebGLは通常、描画結果を画面(canvas)に直接出力します。これに対し、描画結果をWebGLのテクスチャーに出力するレンダリング方法があり、これをオフスクリーンレンダリングとよびます。オフスクリーンレンダリングの結果は他の3Dオブジェクトのテクスチャーとして使用できます。3D空間のレンダリング結果をテクスチャーとして平面に貼り付けることで鏡面表現としたり、画面全体にブラーやモザイクなどのポストエフェクト表現を追加するために使われます。出力を目で見えるような画像データの形としてではなく、数値データとして扱うことで物体の影(シャドウ)などの表現の計算にも使われています。Targetsは上記のオフスクリーンレンダリングを行う際に、一度のドローコール(描画命令)で複数のテクスチャーに別々の情報を同時に描画(出力)できる機能です。従来は一度のドローコールにつき1つのテクスチャーへの出力しかできませんでした。そのため、オブジェクトの座標や法線(面の向き)などの異なる情報を複数のテクスチャーに出力したい場合、ドローコールを複数回行う必要がありました。前回の記事でも触れましたが、一般的にドローコールはGPUの演算性能と比べると負荷が高いため、高速化のためにはドローコールの回数を少なくすることが望ましいです。Targetsが役に立ちます。その1つがDeferred(ディファード/遅延)レンダリングとよばれる手法です。通常のレンダリングでは1つのオブジェクトごとに影響するライトの計算(ライティング)を行い描画します。これを複数のオブジェクトに対して順番に行い、最終的に3D空間内のすべてのオブジェクトに対しオブジェクトとライティング結果を描画します。これをForward(フォワード/前方)レンダリングとよびます。これに対し、Deferredレンダリングは最初に3D空間内の全オブジェクトをライティングなしでテクスチャーに描画します。その際にオブジェクトの描画色の他に、3D空間内での座標や法線など、ライティングに必要な情報をそれぞれ別のテクスチャーに出力しておきます。最後にそれらのテクスチャーの情報を元にライティングの計算を行います。Forwardレンダリングでは、下記の理由などからあまり多くのライトを配置しません。ライトの数が増えるとシェーダーが複雑化するドローコール時にオブジェクトごとに寄与する可能性のあるすべてのライトの情報を渡す必要があるピクセルに影響しないライトの計算まで行うことがあるため、ライト数の増加に対する負荷の増加が大きいDeferredレンダリングにはこのような制約はないため、Forwardレンダリングと比べ多くのライトを使用できる特徴があります。今回のデモではG-Bufferのそれぞれの情報を可視化しています。Targetsを使わなくても座標、法線などのG-Bufferに格納する情報ごとにドローコールを行えばDeferredレンダリング自体は実現可能です。Targetsと相性がよく、ドローコールと共通計算を削減することで大きな高速化が見込めます。今回のデモは最大100個の動的なライトを処理しています。Targetsは大量のライトをあつかえるDeferredレンダリング表現に欠かせない機能です。一度のドローコールで複数のテクスチャーに情報を出力できるこの機能は現代のコンシューマーゲーム機では標準で搭載されており、今回紹介したDeferredレンダリングはゲームシーンにおいて欠かせないものとなっています。2.0の対応ブラウザが広がることでコンシューマーゲームと同等の表現がウェブで可能になるというのはなんだかワクワクしますよね。Feedback(トランスフォーム・フィードバック)について詳しく紹介します。1.0でもブラウザによっては拡張機能として使用できます。平成30年3月19日に内容をメンテナンスしています。フォローICSインタラクティブディベロッパー。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。