[UE4] “Cutting-Edge Test Drive” 荒野パート -画像からフォグを作成する方法-

執筆バージョン: Unreal Engine 4.24

本記事はヒストリア・エンタープライズチームにより制作された
インタラクティブデモ「Cutting-Edge Test Drive」についての連載記事です。
全5回にわたって記事を公開していきます。

エンタープライズチームCETD連載ブログ第3弾
「荒野パート -画像からフォグを作成する方法-」

荒野パートではMegascansによる背景に目を奪われますが、全体の雰囲気を作るうえで欠かせない要素がフォグです。今回の記事では雲の画像1枚から自然に流れ続ける煙を作成したいと思います。

↑荒野パート全般で使用されているフォグ表現

＜マテリアルを作成＞

Blend Mode

Translucent

Emissive Colorに雲の写真を加工したテクスチャをつなぎます。

CheapConstractノードはIn（S）につないだものに対してConsrast（S）の数値を上げるとコントラストが上がるノードです。
これでEmissive Colorの雲の暗いグレー部分を黒にして透明化して見えないように調整します。

＜作成したパラメーターの説明＞

AlbedoConstant	0だとテクスチャの色のまま、数値を上げればコントラストが強くなります
AlbedoIntensity	数値を上げると全体の明るさが上がります
Color	煙に色を乗せられます

雲のテクスチャ画像の端を透明にするのと地面から近い位置がどんどん透明になっていくようにしていきます。

DepthFadeノードを使用すれば、Fogマテリアルを割り当てた板が地面に刺さってある部分を透明にしてくれます。

＜作成したパラメーターの説明＞

GroundDistance	この数値を上げると地面の接点から透明度が上がっていきます。
Thick	数値で全体の透明度を調整できます。上げるほど濃く。

全体を動かすのは雲画像のUVにPannerノード
しかし、そのままだと左右上下に雲がスライドするだけなので、歪み用テクスチャを作りLinear InterpolateのBにつなぎます。

Aが元の形のTexCoordノード、BがUVから雲の画像の形を歪ませるためのもの、この２つをLerpのAlphaで動かしていきます。

UVの歪みのための画像は赤緑のTexCoord画像をPhotoshopで変形させたものです。

ノイズテクスチャを用意してPannerノードでスライドさせ動かします。

Linear InterpolateのAlphaのはPhotoshopでのBにかかるマスクと同じなので
Alphaの黒い部分が元の形Lerp A、白い部分が歪ませた形Lerp Bになります。

SineノードはTimeノードをつなぐと-1から+1で動くので一定周期で黒と白くり返します。

これらをMultiplyで合わせるとノイズがPannerで移動しつつ、周期的に黒くなるAlphaをつくれます。

つまり、雲のテクスチャがオリジナルと歪めた形を
動くノイズで半々にした状態からたまにオリジナルの形に戻る動きになりました。
このマテリアルをPlaneの平面に割り当てると
Fogがつくれます。