【UE5】マテリアルで”流れ”を実装してみよう【FlowMap】
こんにちは。
技術連結課の秋月です！
段々と涼しくなってきて気持ちよく散歩ができるようになってきましたね！
家の近くにある河川敷沿いを散歩するのがとても好きなので嬉しい限りです。
穏やかな河を見ていたら何だか作ってみたくなったので、今回はその第一歩として流れを実装してみようと思います！
目次
環境
今回はUE5を使用して実装していきます。
- UnrealEngine 5.4.4
水の流れを実装してみよう！
とりあえずパッと思いつく方法で実装をしてみます。
時間経過でUVをスクロールして動かし、ノイズテクスチャで歪みを加えることで流れる水を再現してみました。
今回ノイズテクスチャにはPhotoshopの雲模様を出力して使用しています。
それっぽくできています！
フローマップを用いて水の流れを実装してみよう！
このままでもそれっぽくはありますが、この実装方法では一方向の流れしか実現できません。
この点を解決するため、次はフローマップという技術を用いて実装をしてみます！
フローマップは2010年にValve社から発表された流れを表現するための技術手法です。
原理さえ理解してしまえば比較的簡単に実装ができるうえに、応用を利かせれば様々な表現が可能です。
フローマップの原理を理解する
実装を進める前にまずフローマップの原理を理解しましょう。
フローマップでは流れる方向の情報を持ったテクスチャであるフローテクスチャを使用してUVを動かします。
今回使用するフローテクスチャはこちらです。
（とりあえずPhotoshopで適当に描いてみました。）
2次元空間上で方向を再現するのであれば、画像のような方向ベクトルの情報があれば再現できます。
xが-1のとき右方向へ、xが+1のとき左方向へ、yが1のとき上方向へ、yが-1のとき下方向へ…といったような感じです。
この情報をこのままテクスチャに格納してあげれば、流れる方向を指定してUVを動かすことが出来ます！
といってもテクスチャに負の値を格納することは不可能なので、以下のようにします。
テクスチャには方向ベクトルを0~1の範囲に補正した値を格納し、
実際にテクスチャを参照するときに-1~+1の範囲に戻して使用します。
実際に方向ベクトルを格納したテクスチャはこんな感じです。
動かしてみるとこのようになります。
なお、上下左右の方向は実装方法等により変わってくるため、必ずしもこのような仕様になるとは限りません。
フローテクスチャを利用して動かす
実際にフローテクスチャを使用して実装したものがこちらになります。
最初に実装したものはUVをただスクロールしただけでしたが、こちらの実装ではフローテクスチャの値を足してUVをずらすことで流れのように見せかけています。
-1~+1の値を二次元的に加算することにより、上下左右の全方向にUVをずらします。
また、フローテクスチャには時間に応じたFrac関数の値を乗算し、UVに足される値が0以上1未満の値になるようにしています。
ループの切れ目をなくす
Frac関数を使用している影響でループの切れ目が見えてしまっています。
Fractionは小数部分を繰り返しているので、画像のように突然値が変化する瞬間があります。
現在はそれが切れ目のように見えてしまっています。
この現象を防ぐため、位相を半分ずらしたものを用意して突然値が変化することがないようにブレンドしてあげます。
ブレンドにはLerpノードを使用します！
Lerpについての説明は下記の記事がわかりやすいかと思うのでご参考にしてください。
Unreal EngineのマテリアルのLerp｜くろさわ
Lerpを使用する場合、ブレンド値が0のときは1つ目のフロー（A）が使用され、ブレンド値が1のときは2つ目のフロー（B）が使用されます。
なので、Aで突然値が切り替わる瞬間のときはブレンド値が1、Bで突然値が切り替わる瞬間のときはブレンド値が0になるようなグラフを用意してあげれば切れ目が見えないようにブレンドすることができます。
ブレンド値のグラフはこのような形になります。
この形のグラフは以下のように、Aの値を流用して作ることができます。
UE5での実装はこんな感じになりました！
完成
ここまで実装してできたのがこちらになります！
フローテクスチャを変更してみてもちゃんと実装できていることが確認できます。
ここまででできたマテリアルノードはblueprintUEで公開しているので、よかったらご参照ください。
➡https://blueprintue.com/blueprint/0-eir3a1/
FlowMapを応用してみよう！
フローテクスチャ自体はPhotoshopで作成したり、SubstanceDesignerなどでNormalMapを変換することで簡単に作成することができます。
他にも作成方法を工夫することで表現の幅を広げることが可能です。
例えば、Houdiniで地形と共に作成することで地形に合わせた流れの情報をもったFlowTextureを作成することが可能です。
また、CEDEC2018で発表されたモンスターハンター：ワールドではモデルのタンジェント・バイノーマルを利用することで重力方向に常に流れ続ける表現を行っています。
実際に実装してみるとこんな感じです。フローテクスチャを参照していたところを変更しています。
もっと追及していけば面白い表現ができそうですね！
まとめ
一見複雑そうなことをやっているように見えても、一つずつ意図を紐解いていくと意味が少しずつ見えてきます。
既存の表現技術であってもさらに応用を効かせることで様々な新しい表現が生まれるので、ぜひ色々研究してみてください！
それではお互い良き制作ライフを！！
参考文献
本ブログで使用しているアセット等は以下のサイトを利用させていただきました。
- NormalMap：NormalMap-Online
- チェッカーテクスチャ：UV Checker Map Maker – Custom UV Textures – VINZI
- グラフ： Desmos | グラフ計算機
【免責事項】
本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。