actionScript書きの日記

アラフォーFlashデベロッパのブログ。actionscriptやobjective-cを経て、現在はUnity、Spine、AfterEffectsがメイン。

Houdiniで作成したFlowMapの書き出しとUnityでの使用 その2

前提

前回の記事でHoudiniで作成したFlowmapを、Unityで表示するためのシェーダーを作成する。

ビルトインのシェーダーもあるようなのだが、大まかな構造だけでも把握するために、処理の流れを追ってみることとする。

 

作業内容の概要

Flowmap上の色情報を元に、メインのテクスチャ画像のUV画像を移動させることによって画像内に動きをもたらす。

そのままやるとループしないので、同一周期で開始値が違う2つの画像を用意して、その画像の色情報をLerpで混ぜることでループを実現する。

 

参考資料

Flow Map Shader for Unity3D. Used with Sprites. · GitHub

コードで記述されたシェーダー。これを元に以下の動画内でShaderGraphでの制作を行っている。

 

youtu.be

コードで記述されたシェーダーの、ShaderGraphへの移植。

 

youtu.be

Flowmapを表示するシェーダーの仕組みが分かりやすく解説されている。英語のみだが平易なので、画面を見ていれば内容は理解できると思う。

上記のリンクに非常に助けられた。この場を借りて感謝申し上げる。

 

注意事項

UV移動を、同一周期で開始値だけをずらした2つの値を用意して、その2種類のUVを適用した同一テクスチャ2枚をLerpで合成する、という流れ。その際にLerpの第2引数の値をループさせる必要があるが、それを以下のコードで実装している。

 

float phase0 = frac(_Time[1] * 0.5f + 0.5f);

<中略>

 float flowLerp = abs((0.5f - phase0) / 0.5f);

 

これが全く思いつかなかった。参考にさせていただく。