はじめに

今回の記事は、以下の記事の続きです。
[UE5]ポストプロセスマテリアルで霧っぽいのやってみた｜株式会社ヒストリア

前回の記事では、ポストプロセスマテリアルを使って、「カメラからの距離」に応じた簡易的なフォグ表現を作成しました。

今回はその応用として、「高さベースのフォグ」を作ります。
UE標準のExponential Height Fogに似ていますが、シンプルなので、カスタマイズ性の高い表現が可能になるかもしれません。

Part 2 – 「高さで」霧っぽいポストプロセスマテリアルを作る

目指す表現

地面から上空に向かって薄れていく霧です。
地面に近いほど霧が濃く、上に行くほど徐々に消えていくような表現です。

それでははじめます。

前回作成したPPM_DistanceFogを複製して、
PPM_HeightFogという名前にリネームします。

Absolute World Position と Subtractは残して、
カメラからの距離で調整する為の赤枠内のノード群を一旦削除します。

もし、前回のデータが無い場合は、以下の手順でゼロから作成してください。

——————–ゼロから作る場合の手順—————————

1.マスターマテリアルを作成します。

Material Domain を Post Process にします。

Blendable Location を Scene Color After DOF にします。

③SceneTextureノードを作成します。
DetailsのUMaterial Expression Scene Textureから
Scene Texture IDにPostProsessInput0を指定します。

④ScreenPositionノードを作成し、SceneTextureのUVsに繋ぎます。

⑤ComponentMask で RGBに限定します。

⑥Vector3 ノードを作成しFogcolorとします。

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

2.Post Process Volumeへの割り当て

Post Process MaterialをPost Process Volumeに割り当てます。
Post Process Volumeを選択して検索欄に mat と打ちます

①プラスボタンを押して、プルダウンからAsserrefarenceを選び
②マテリアルインスタンスを作成してPPMI_HeightFogと名前を付けて、割り当てます。

これで準備ができました。

——————————————————————-

ここからが本題です。

1.高さを取得

Absolute World PositionとSubtractノードを作成し、（これは前回も使用していますね）
今回は高さを使用したいので、Absolute World Position のZからSubtractのAに接続します。
SubtractのBをパラメータ化し、GroundHeightと名前を付けます。

 

WorldPosition は「ピクセルがワールド空間のどこにあるか」を知るためのノードです。
この計算は、現在のピクセルのZ座標が地面からどのくらいの高さにあるかを求めています。

例：
ピクセルのワールドZ座標：150cm
地面の基準の高さ（GroundHeight）：10cm

150 – 10 = 140

→このピクセルの位置が140cmの高さにある、という結果が得られます。

2.可視化します

計算式を見てもいまいち直感でつかめないので、これを画面に表示して見てみましょう。
SubtructからEmmisiveColorに直接つないでください。

 

Defaultのままだと、Bloomで光ってしまうので、
PostprossesVolumeのBlumeのIntencityを0にしてください。

PPMI_HeightFogをPostProsessVolumeにまだ入れてない場合は入れてください。

すると画面が白黒になって、地面の座標0より下が黒、上が白で塗り潰されたようになります。

3.高さを0～1に正規化

これは数値が無限に上書きされて真っ黒と真っ白になっている状態です。
フォグのマスクとして使用する為には0～1に正規化する必要があります。

Divideノードを作成し、Bをパラメータ化してMaxheightという名前にして、Default Valueに100をいれます。100で割ることで0～100の高さの範囲が、0～1割合（比率）に変換されたことになります。

 

すると高さ0～100cmにかけてグラデ―ションがかり、それ以上は真っ白で、こんな感じの見た目になりました。

 

4.白黒反転

フォグを下から上にかけたいので、白黒を反転させます。
①OneMinus（1-ｘ）ノードを挟みます。
②数値の破綻を防ぐためにsaturateノードに繋ぎます。

5.フォグの濃さを調整

①次にフォグの濃さを調整する為にMultiply（乗算）でBをパラメータ化して
FogDensity（霧の密度）と名付けます。

②次にPowerでBをパラメータ化してFogContrustと名付けフォグの濃さの割合の緩急をコントロールできるようにします。

最後に作成したマスクをLeapのAlphaに接続します。
これで高さベースのフォグマテリアルの完成です。

 

こんな感じになりました。

 

マテリアルインスタンスの値を好みの値に調整してみてください。

 

プレイして確認してみてください。

最後に前回の「カメラからの距離」と「高さベースのフォグ」を簡単に合体させてみようと思います。

実務では一つのマテリアル内で合成する方が軽量になる可能性が高いですが、今回はPostProcessVolumeで合成します。

現在割り当てているPPMI_HeightFogを一度削除します。

 

次にプラスボタン押下してAsst referenceを選び

 

PPMI_HeightFogを割り当てます。

 

こうすることで、PPMI_HightFogの上にPPMI_DistanceFogが重なります。
ちなみに逆にすると高さフォグが距離フォグを上書きするので、遠くまで高さフォグが均一に見えて、意図しない見た目になります。

合成して、それぞれのマテリアルインスタンスでフォグの微調整をします。

上の画像はマスターマテリアルで、Group名を付けて整理しています。

プレイして確認しましょう。

今回は以上です。お疲れ様でした。