初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション

10章高度なテクニック

これまでの章でさまざまなコンピューターグラフィックスの基礎的な概念について説明し、最終的には3Dバーチャル自動車ショールームを構築できるだけの知識と技術が得られました。つまり、すでにこの時点でWebGLを用いて機能豊富な3Dアプリケーションを作成するために必要となる知識はすべて身についていると言ってもいいでしょう。とはいえ、これらの知識はまだまだWebGLで可能なことのほんの上辺に触れただけにすぎません！ シェーダーやテクスチャ、頂点アトリビュートの使い方を工夫することで、想像もしなかった効果が得られます。以降の章では、皆さんの興味をそそるに違いない、WebGLの高度な概念についていくつか説明します。

本章では、以下について説明します。

• さまざまなポストプロセッシング効果
• ポイントスプライトを使用したパーティクルシステム
• 法線マップ
• レイトレーシング

10.1　ポストプロセッシング

ポストプロセッシングは、レンダリングの結果として得られるシーンの画像をシェーダーを通じて再描画することで、シーンに視覚効果を追加するプロセスです。（理想的には秒間60フレーム以上で）シーンのスクリーンショットを取得し、任意の画像エディタで編集してさまざまなフィルタを適用するプロセスだと考えてもいいでしょう。もちろんそのような手作業との違いは、これが実際にリアルタイムで動作するということです。

単純なポストプロセッシングの例には次のようなものがあります。

• グレースケール
• セピアトーン
• 色反転
• フィルムグレイン
• ブラー
• ウェービー／ディジー効果

これらの効果を実現するテクニックの基本的な考え方は比較的単純です。canvasと同じサイズのフレームバッファを作成し、draw