rn.log

備忘録など

【シェーダーグラフメモ その37】サイン波を利用したディストーションエフェクト

テクスチャを歪ませながらフェードさせるシェーダーグラフです。

f:id:r-ngtm:20190102103259g:plain

 

目次

 

サンプル

github.com

作り方解説

STEP1 : テクスチャ表示

Sample Texture 2Dノードを使い、テクスチャを表示します。

f:id:r-ngtm:20190102103518p:plain

f:id:r-ngtm:20190102103650p:plain


STEP2 : テクスチャにサイン波を足す

f:id:r-ngtm:20190102105024p:plain

 

テクスチャに波のようなディストーションがかかりました。

f:id:r-ngtm:20190102105046p:plain


STEP3 : サイン波を動かす 

Y座標に数値を足すと、サイン波が動くようになります。

f:id:r-ngtm:20190102110220p:plain

f:id:r-ngtm:20190102110519g:plain

 

STEP4 : Sliderをプロパティ化

Sliderなどの数値はプロパティ化するとマテリアルのInspector上から値を変更できるようになります。

Sliderを右クリックしてConver to Propertyを選択することで、プロパティ化できます。

f:id:r-ngtm:20190102133838p:plain

 

Sliderをプロパティ化すると、Vector1プロパティが追加され、SliderはVector1プロパティに置き換わります。

f:id:r-ngtm:20190102134418p:plain

 

マテリアルのInspector上から数値が変更できるようになりました。

f:id:r-ngtm:20190102135006g:plain

 

Vector1という名前は曖昧で分かりにくいので、TimePosition(時間の位置)という名前に変えます。

f:id:r-ngtm:20190102135544p:plain

 

STEP5 : TimePositionに応じてサイン波を小さくする

サイン波に(1.0 - TimePosition)を乗算し、時間(TimePosition)の増加に伴ってディストーションが弱まるようにします。

f:id:r-ngtm:20190102140149p:plain

 

f:id:r-ngtm:20190102140419g:plain

 

STEP6 : 波を速くする

波が遅すぎて、動いている感じがしないのでSineノードの入力に使用しているTimePositionを6.0倍します。

Sineの係数にもTimePositionがいますが、こちらは触りません。

f:id:r-ngtm:20190102141120p:plain

 

サイン波の速度が6.0倍になったので、動いている感じが出ました、

f:id:r-ngtm:20190102141333g:plain

 

STEP 7: フェードアウトを入れる(完成)

テクスチャの色に(1.0 - TimePosition)を乗算します。

TimePositionの増加に伴って線形にテクスチャが暗くなります。

f:id:r-ngtm:20190102142313p:plain

 

暗くフェードするようになりました。

f:id:r-ngtm:20190102142624g:plain

 

微調整

調整1: 縦方向の波の動きを加える

ほぼ完成ですが、動きがやや単調に感じます。

縦方向の波を加えて動きを複雑にしてみましょう。

 

STEP1 ~ STEP7ではY座標で作ったサイン波をUVのX座標に足していましたが、

さらにX座標で作ったサイン波UVのY座標に足します

f:id:r-ngtm:20190102151431p:plain

 

より複雑な形状のディストーションがかかるようになりました。

f:id:r-ngtm:20190102152013g:plain

 

調整2: ディストーションの時間を反転させる(完成)

Sin波の係数として(1.0 - TimePosition)を乗算していましたが、

TimePositionを乗算するように変更してみましょう。

ディストーションの時間が反転します。

f:id:r-ngtm:20190102152959p:plain

 

f:id:r-ngtm:20190102153146g:plain


ロゴなどの出現演出に使うとイイ感じになりそうです。