Flow Map #2 回転するフローマップ

環境：Substance Designer 5

Substance DesignerのPixel Processorで回転するフローマップを作ってみることにしました。

座標を中心にオフセットし、中心からの角度をアークタンジェントで求めます。風車のように回したいので角度を加算して90°方向にベクトルの向きを変えます。角速度は半径に比例するので、半径の長さを色に掛けることで、同一角度上のピクセルの動きが一致します。

最後にベクトルを色に変換して、フローマップが出来ました。フローマップはノーマルマップと違って一見何を意味しているのかわかりにくいですね。

Unreal Engineで確認したところ綺麗に回ってくれました。

 

歪ませてみる

等速で回るのもいいけど、どうせなら緩急つけて回してみたい。

このようなノードを間に挟んで渦巻のフローマップも作ってみました。

y=x*(1-x)*4

半径の真ん中あたりで一番速くなるようなカーブをかけてます。

結果このようなテクスチャーが出来ました。これで正しいのかなと思いながらUnreal Engineで動かしてみると・・

いい感じに渦巻いています。

プログラマブルな画像処理ツールとしてSubstance Designerは便利ですね。

 

半径（範囲）

内包する円の直径で計算していましたが、対角線を直径としてスケーリングするならこのようなノードになります。こうするとテクスチャー全体で回るようになります。

Flow Map

環境：Substance Designer 5, Unreal Engine 4.18

テクスチャーのUV空間でループアニメーションさせるフローマップというものを最近知り、その仕組みが面白かったので取り組んでみました。こういうゲームならではの誤魔化しテクニックが好きなんです。しかしこれ2010年にValveから発表されていたんですね。全然知りませんでした。

RチャンネルがX軸方向、GチャンネルがY軸方向のベクトルで表したテクスチャーを使います。動かないニュートラルなベクトルは(128, 128, 0)になります。色の強さがベクトル（流れ）の強さになり、この値に時間（0～1の周期）を掛け算してUV値に加算していきます。

Unreal Engineのマテリアルノードで組んでみました。2枚のテクスチャーのレイヤーをそれぞれ周期をずらしてUVアニメーションさせる流れですね。透明度を上手く利用して入れ替えながらループしているように見せています。

フローマップはいろいろなことに応用できそうですね。問題はどうやってテクスチャーを作るかですが、この辺りは後々考えてみます。