「流れる方向」の情報をテクスチャに持たせて、マテリアルで水の流れを表現。ロジカルビートが解説記事をブログで公開

ロジカルビートは2024年10月16日（水）、「【UE5】マテリアルで”流れ”を実装してみよう【FlowMap】」と題した記事を、自社ブログにて公開しました。

技術ブログが更新されました！🖥️

🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿
🚿🚿UE5でFlowMapを作ってみませんか！？
🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿🚿

【UE5】マテリアルで”流れ”を実装してみよう【FlowMap】 https://t.co/UI2PEEPng3 @logicalbeat_jpより

— 株式会社ロジカルビート (@logicalbeat_jp) October 16, 2024

同記事では、Unreal Engine 5.4.4を使用して、水の流れを表現する方法を解説しています。

まずは、時間経過に合わせてUVをスクロールして動かし、ノイズテクスチャで歪みを加えるといった方法で表現。記事では、ノイズテクスチャにPhotoshopの「雲模様」を使用しています。

（画像はブログ記事より引用）

完成したもの。既に「それっぽい」表現に成功している（画像はブログ記事より引用）

ただし、この実装方法では一方向の流れしか表現できないという弱点があります。

そこで、「流れる方向」の情報を持ったテクスチャ（フローテクスチャと呼ばれる）を用いてUVを動かす、「フローマップ」と呼ばれる技術を使用します。これは2010年にValveより発表されたもので、原理さえ理解すれば比較的簡単に実装できると述べられています。

記事で使われたフローテクスチャ（画像はブログ記事より引用）

方向ベクトルの情報を、軸ごとに-1から+1の数値で管理。この情報をテクスチャに格納することで、流れを表現することが可能です。

方向ベクトルと、その情報を格納したテクスチャ。テクスチャに負の値を入れることは不可能なため、0から+1の範囲に補正した値を格納しておき、参照の際に-1から+1の範囲に直して使用する（画像はブログ記事より引用）

フローテクスチャを利用した実装が下記です。フローテクスチャの値に合わせてUVをずらすことで、ただのスクロールとは違い、上下左右の全方向に流れるような動きを表現できます。

（画像はブログ記事より引用）

また、数値の小数部分を返すFrac関数を用いて取得した値を、時間に応じてフローテクスチャに乗算。UVに足される値を0以上1未満にし、緩急のある流れを表現しています。

このとき、Frac関数が小数点以下の値を繰り返す影響で、値が大きく変わる瞬間にループが切れたように見えてしまいます。

（画像はブログ記事より引用）

記事では2つのフローを用意し、位相を半分ずらしてブレンドすることで切れ目を回避しています。

最終的に下記の実装ができあがります。

（画像はブログ記事より引用）

完成したもの（画像はブログ記事より引用）

フローテクスチャを変更しても、正しく適用されることがわかります。

（画像はブログ記事より引用）

なお、ここまでのマテリアルノードは、UEを使う開発者向けにブループリントを共有できるサービス「blueprintUE」にて公開されており、誰でも閲覧可能です。

記事ではほかにも、フローテクスチャ作成における工夫や、『モンスターハンター：ワールド』で実際に使われた表現なども紹介。「一見複雑そうなことをやっているように見えても、一つずつ糸を紐解いていくと意味が見えてくる」といった言葉で結んでいます。

記事本文は、こちらをご確認ください。