ループアニメーションするプロシージャルテクスチャの作り方を紹介する。
プロシージャルテクスチャは、そのままではループアニメーションになっておらず、ループが終わるたびに動きがカクついてしまう。
特にループエフェクトを作る時に困るので、これをループ化させる。
ノード
Aのテクスチャと、Aの終点が一致するBのテクスチャを、ループ終点までにクロスフェードするようにミックスすることで、切れ目なく動きが繋がるようにしている。
- Aテクスチャ
- 値入力ノードの入力欄に「#frame」と入力することで、カレントフレームを得る。
- 数式[剰余]で、指定のフレーム範囲を繰り返す。
(0～30→0～30→0～30…のように。
剰余(切り捨て)でも剰余(床)でも変わらない？) - そのままでは高速で動いてしまうので、0.01分を乗算することで、値を小さくする。
- これを、動かしたい値に接続する。
今回は、ノイズテクスチャのWに接続する。
- Bテクスチャ
- Aテクスチャのノード群をコピーする。
- 剰余の値は、フレーム範囲分だけ減算する。
これで、フレーム範囲分だけ前の状態のテクスチャを得る。
これ以外は変えないこと。差異があるとうまくループせずバレてしまう。
- AとBをミックス
- AとBをミックスノードで徐々に切り替える。
- 剰余の値をフレーム範囲分で割ることで、0.0～1.0の値にし、これをマスクに使う。
基本の原理は普通のループ動画の作成方法と似ている。
AとBを画像に置き換えて確認してみるとわかりやすい。
(記事冒頭の動画では、わかりやすいように位置Xに値を入力している)