テクスチャを歪ませながらフェードさせるシェーダーグラフです。
目次
サンプル
作り方解説
STEP1 : テクスチャ表示
Sample Texture 2Dノードを使い、テクスチャを表示します。
STEP2 : テクスチャにサイン波を足す
テクスチャに波のようなディストーションがかかりました。
STEP3 : サイン波を動かす
Y座標に数値を足すと、サイン波が動くようになります。
STEP4 : Sliderをプロパティ化
Sliderなどの数値はプロパティ化するとマテリアルのInspector上から値を変更できるようになります。
Sliderを右クリックしてConver to Propertyを選択することで、プロパティ化できます。
Sliderをプロパティ化すると、Vector1プロパティが追加され、SliderはVector1プロパティに置き換わります。
マテリアルのInspector上から数値が変更できるようになりました。
Vector1という名前は曖昧で分かりにくいので、TimePosition(時間の位置)という名前に変えます。
STEP5 : TimePositionに応じてサイン波を小さくする
サイン波に(1.0 - TimePosition)を乗算し、時間(TimePosition)の増加に伴ってディストーションが弱まるようにします。
STEP6 : 波を速くする
波が遅すぎて、動いている感じがしないのでSineノードの入力に使用しているTimePositionを6.0倍します。
Sineの係数にもTimePositionがいますが、こちらは触りません。
サイン波の速度が6.0倍になったので、動いている感じが出ました、
STEP 7: フェードアウトを入れる(完成)
テクスチャの色に(1.0 - TimePosition)を乗算します。
TimePositionの増加に伴って線形にテクスチャが暗くなります。
暗くフェードするようになりました。
微調整
調整1: 縦方向の波の動きを加える
ほぼ完成ですが、動きがやや単調に感じます。
縦方向の波を加えて動きを複雑にしてみましょう。
STEP1 ~ STEP7ではY座標で作ったサイン波をUVのX座標に足していましたが、
さらにX座標で作ったサイン波をUVのY座標に足します。
より複雑な形状のディストーションがかかるようになりました。
調整2: ディストーションの時間を反転させる(完成)
Sin波の係数として(1.0 - TimePosition)を乗算していましたが、
TimePositionを乗算するように変更してみましょう。
ディストーションの時間が反転します。
ロゴなどの出現演出に使うとイイ感じになりそうです。