[UE5]ポストプロセスマテリアルで霧っぽいのやってみた

執筆バージョン: Unreal Engine 5.4

はじめに

今回の記事は、ポストプロセスマテリアルで「霧っぽいもの作れないかな？」と思って試してみた記録です。
自分なりに調べて理解した内容を、チュートリアル形式でまとめました。
手軽に雰囲気フォグを実装したいときの参考になればうれしいです。

それでははじめます。

Part 1 – 「距離で」霧っぽいポストプロセスマテリアルを作る

Step 1 -サードパーソンテンプレートでプロジェクトファイルを作成

今回はバージョン5.4を使用しています。まずはサードパーソンテンプレートでプロジェクトファイルを作成してください。
（詳しいやり方は割愛します）

Step 2 -ポストプロセスマテリアルの作成と設定

コンテンツブラウザで右クリック → 「Material」を作成

名前を PPM_DistanceFog にします。
今回はUnreal Engineの推奨命名規則に従いマスターマテリアルはPPM_をプレフィックスとして付けます。
名前は分かりやすく距離フォグ PPM_DistanceFog としました。
※パラメーター名は UpperCamelCase（単語の頭を大文字にする書き方）で統一していきます。

マテリアルを開いて、以下の設定を変更します。
Material Domain を Post Process にします。

次に、Blendable Location を検索して Scene Color After DOF を選びます。

なぜこうするのか？
Blendable Location とは、
「このマテリアルを、レンダリングのどの段階で処理させるか」を指定する項目です。

Scene Color After DOF は、
DOF（被写界深度）のボケ処理が済んだ後の画面に対して効果を加えるタイミングです。

他のLocationだと、処理タイミングや対象が合わないので、今回の用途には適していません。
気になる方は、他のLocationも試してみるか、公式ドキュメントを参照してみてください。

ちなみに、半透明（Translucent）マテリアルには、今回の Fog は効きません。
そういう仕様なので、その点はあらかじめご理解いただけると助かります。

※この記事は Unreal Engine 5.4 をもとにしています。
バージョンによって Blendable Location の項目が異なる場合があります。

Step 3 -マテリアルのノードを組む

作成するフォグのイメージは、カメラから数メートル先に霧がかかって、遠くが薄っすらと見えるような感じです。では順を追って組んでいきましょう。

まず、SceneTextureノードを作成します。
ノードグラフ上で右クリックしてScenetと検索すれば出てきます。

このノードは現在描画されている画面の絵（シーンカラー）を取得するためのものです。

ノードを選択した状態で、DetailsのUMaterial Expression Scene Textureから
Scene Texture IDにPostProsessInput0を指定します。

SceneTexture ノードでは「どの画像情報を使うか」を Scene Texture ID で選びます。
今回は画面の絵そのものを加工したいので、基本の PostProcessInput0 を選びます。

ちなみに、他の ID（SceneColor や CustomDepth など）は特殊な情報を扱います。
PostProcessInput1〜6 は、ポストプロセスマテリアルを複数重ねる場合に使用します。
通常は Input0 だけで十分です。

次に、ScreenPositionノードを作成します。
これは画面のピクセル位置（UV座標）取得できるノードです。

ポストプロセスマテリアルは、画面全体に効果をかけるためのマテリアルなので、
このようにScreenPositionをつなぐことで画面全体の座標を UV として扱うことができます。

取得したUVを、SceneTextureノードのUVsに繋げます。
ポストプロセスは基本的にEmissive Colorのみを使用します。
SceneTexture の出力は RGBA なので、Emissive RGB に繋ぐために、
ComponentMask で RGB だけを取り出します。

この状態で、画面に描かれている元の絵をそのまま再表示できるようになります。

次に、フォグの色を合成していきます。
Vector3 ノードで色を指定し、分かりやすくするために、青に設定します。
後で、マテリアルインスタンスから、色を変えられるように、
パラメーターに変換して、名前を FogColor とします。

次に、Lerpノードを作成します。
SceneTexture（シーンカラー）をAに、FogcolorをBに接続し、Aplhaに 0.5 を入れて合成します。

この状態で、Fogの色がシーンカラーに合成される準備ができました。

ここから実際にマテリアルを画面に適用して確認してみます。

Post Process Volumeを選択して検索欄に mat と打つと、
Post Process Materialの項目が見つかります。

プラスボタンを押して、プルダウンからAsserrefarenceを選びます。

マテリアルインスタンスを作成してPPMI_DistanceFogと名前を付けて、割り当てます。

すると画面全体に青い色が乗ってるが確認できるはずです。

※もしもPost Process Volume がない場合は自分で配置してください。
全体に適用させるには「Infinite Extent（Unbound）」のチェックを入れておく必要があります。

Before
ポストプロセスマテリアル設定前

After　ポストプロセスマテリアル設定後
Alpha 0.5　

試しにLerpの値を1.0にすると画面はほぼ真っ青になります。
Alpha 1.0　

次に、カメラから、一定の距離でフォグがかかり始めるようにする処理を組んでいきます。
まずはカメラの位置を取得します。

右クリックして「Camera」と検索し、
CameraPosition　ノードを作成します。（検索キーワードCameraPositionWS ）
「WS」は World Space（ワールド空間）の略です。
このノードは、今カメラがどこにいるか（ワールド座標）を返してくれます。
つまり、画面を見ている「出発点」のようなものです。