rn.log

備忘録など

【シェーダーグラフメモ その45】シンプルなGlitchエフェクト

 

はじめに

テクスチャにGlitch(グリッチ)エフェクトをかけるシェーダーグラフの作り方を解説します。

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

 左側はシェーダーグラフのみで作ったグリッチエフェクトで、

グリッチのかかり具合をAnimationClipで制御したものが右になります。

 

サンプル

github.com

 

作り方解説

STEP1 : 横のラインを作る

StepSubtractを組み合わせ、横のラインを作ります。

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

 Subtractによって発生する負の成分を取り除くため、最後にSaturateをかけています。

 

STEP2 : ラインをUVのx成分に足す

ラインに0.15を乗算したものをUVのx成分に足します。

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

 

横に0.15ズレたテクスチャが表示されます。

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

 

STEP3 : ラインをランダムに動かす

ラインのY座標は以下の赤い線で囲ったノードでした。

このY座標を時間経過でランダムに変化する値に置き換えることで、ラインの位置がランダムになります。

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

 

以下のようにTime、Modulo、SimpleNoiseを接続してランダムな値を作ります。

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

時間がある程度大きくなってくるとSimpleNoiseの出力値の変化が乏しくなってくるため、Moduloノードを利用して時間を小さい範囲に抑えています。

Moduloの代わりにFractionを使ってもOKです。

 

以下のような絵が出力されます。

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

これでも十分カッコいいですが、変化が激しすぎて扱いづらいので、

フレームレートを落とします。

 

STEP4 : フレームレートを落とす(完成)

時間にPosterizeをかけることでフレームレートを落とすことができます。

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

 

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

 

 

補足 : Posterizeのグラフ

Steps = 6を指定した場合のPosterizeは以下のようなグラフを描きます。

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

グラフの描画にはGraphToyを使用させていただきました。

Graph Toy

 

Vector1プロパティを作成し、フレームレートの数値として利用するとインスペクター上から値を変更できたり、使いまわせるようになるので便利です。

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

 

微調整

微調整1 : ズレ幅をゆらす

時間にサイン波を適用したものをズレ幅に乗算することで、ズレ幅を揺らすことができます。

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

 

 

動きに変化が生まれました。

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

 

微調整2 : ノイズをバラつかせる

ノイズに巨大な数を乗算し、Fractionをかけてノイズをバラつかせます

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

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

微調整3 : フレームレートを変えてみる

フレームレートを10にした場合、以下のようになります。

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

 

フレームレートを24にすると、以下になります。

サイバーな感じが生まれました。

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

 

微調整4 : ノイズの係数を手動で変えてみる

これまで、ノイズの係数として0.15を乗算していました。

この数値をインスペクターから変更できるようにしてみましょう。

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

 

ノイズの係数用のプロパティGlitchScaleを作成し、これをMultiplyノードに接続します。

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

 

今回は数値を0.0 ~ 0.15の間で変更したいので、

プロパティのModeをSliderに設定してMin=0, Max = 0.15に設定します。

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

 

インスペクター上からノイズのかかり具合を調整できるようになりました。

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

 

調整5 : アニメーションでシェーダーを制御(完成)

上記で追加したプロパティGlitchScaleをアニメーションから制御してみました。

 

GlitchシェーダーがくっついているオブジェクトにAnimationを追加し、

GlitchScaleの数値を以下のように打ち込みます。

Animationの追加方法についてはここでは割愛します。

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

 

再生すると以下のようなになります。

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