はじめに
テクスチャにGlitch(グリッチ)エフェクトをかけるシェーダーグラフの作り方を解説します。
左側はシェーダーグラフのみで作ったグリッチエフェクトで、
グリッチのかかり具合をAnimationClipで制御したものが右になります。
サンプル
作り方解説
STEP1 : 横のラインを作る
StepとSubtractを組み合わせ、横のラインを作ります。
Subtractによって発生する負の成分を取り除くため、最後にSaturateをかけています。
STEP2 : ラインをUVのx成分に足す
ラインに0.15を乗算したものをUVのx成分に足します。
横に0.15ズレたテクスチャが表示されます。
STEP3 : ラインをランダムに動かす
ラインのY座標は以下の赤い線で囲ったノードでした。
このY座標を時間経過でランダムに変化する値に置き換えることで、ラインの位置がランダムになります。
以下のようにTime、Modulo、SimpleNoiseを接続してランダムな値を作ります。
時間がある程度大きくなってくるとSimpleNoiseの出力値の変化が乏しくなってくるため、Moduloノードを利用して時間を小さい範囲に抑えています。
Moduloの代わりにFractionを使ってもOKです。
以下のような絵が出力されます。
これでも十分カッコいいですが、変化が激しすぎて扱いづらいので、
フレームレートを落とします。
STEP4 : フレームレートを落とす(完成)
時間にPosterizeをかけることでフレームレートを落とすことができます。
補足 : Posterizeのグラフ
Steps = 6を指定した場合のPosterizeは以下のようなグラフを描きます。
グラフの描画にはGraphToyを使用させていただきました。
Vector1プロパティを作成し、フレームレートの数値として利用するとインスペクター上から値を変更できたり、使いまわせるようになるので便利です。
微調整
微調整1 : ズレ幅をゆらす
時間にサイン波を適用したものをズレ幅に乗算することで、ズレ幅を揺らすことができます。
動きに変化が生まれました。
微調整2 : ノイズをバラつかせる
ノイズに巨大な数を乗算し、Fractionをかけてノイズをバラつかせます
微調整3 : フレームレートを変えてみる
フレームレートを10にした場合、以下のようになります。
フレームレートを24にすると、以下になります。
サイバーな感じが生まれました。
微調整4 : ノイズの係数を手動で変えてみる
これまで、ノイズの係数として0.15を乗算していました。
この数値をインスペクターから変更できるようにしてみましょう。
ノイズの係数用のプロパティGlitchScaleを作成し、これをMultiplyノードに接続します。
今回は数値を0.0 ~ 0.15の間で変更したいので、
プロパティのModeをSliderに設定してMin=0, Max = 0.15に設定します。
インスペクター上からノイズのかかり具合を調整できるようになりました。
調整5 : アニメーションでシェーダーを制御(完成)
上記で追加したプロパティGlitchScaleをアニメーションから制御してみました。
GlitchシェーダーがくっついているオブジェクトにAnimationを追加し、
GlitchScaleの数値を以下のように打ち込みます。
Animationの追加方法についてはここでは割愛します。
再生すると以下のようなになります。