さわぐちFMオキーステーション

幸せの鐘が鳴り響き僕はただ嬉しいふりをする

Shader Graphの超入門レシピ その10~ノイズを使ったちらつき表現~

前回の記事

amidamangrove.hatenablog.com

今回の記事

ノイズを使用したお手軽な「ちらつき表現」を紹介したいと思います。

f:id:amidaMangrove:20200419115828p:plain

ちらつきを作るシェーダー

f:id:amidaMangrove:20200419105244p:plain

Timeノード」から時間を取得し、「Fractionノード」で小数点部分のみを取り出します。取り出した値を「SImple Noseノード」のUV値に設定します。ノイズから取得した値を「Stepノード」につなぎ完成です。

Previeを見るとStepノードがちらついているのが確認できると思います。 f:id:amidaMangrove:20200419105636g:plain

この出力される値をMultiplyノードに繋げば「ちらつき」や「ランダムな効果」を与える事ができそうです。

毎回、毎回ノードを繋ぐのも面倒なのでSub Graphにして使いまわせるようにしましょう。

Sub Graphを作る

Sub Graphにしたいノードを範囲選択し、「右クリック→Convert To Sub-graph」を選択します。名前は「Flicker」とします。

f:id:amidaMangrove:20200419110039p:plain

f:id:amidaMangrove:20200419110305p:plain

Sub Graphにしてみましたが何やらエラーが出ているようです。これは値が出力されていないのが原因です。

f:id:amidaMangrove:20200419110339p:plain

作成したノードをダブルクリックで開き、出力値を設定してあげましょう。「Output」の歯車ボタンで出力する値を追加できます。Vector1型で名前はOutにしてStepからの出力を繋ぎます。

f:id:amidaMangrove:20200419110648p:plain

外部からの入力値も追加しましょう。「Scale」と「Edge」をプロパティに加え、適宜ノードに繋ぎます。 f:id:amidaMangrove:20200419110948p:plain

Save Assetで保存し、元のシェーダーグラフを確認するとオリジナルの「Flickerノード」が無事に作られています。 f:id:amidaMangrove:20200419111153p:plain

ではこのノードを使用して遊んでみましょう。

ちらつきで遊ぶ

UVにノイズを加算し描画位置をズラし、画面のブレを表現してみます。 f:id:amidaMangrove:20200419113335g:plain

f:id:amidaMangrove:20200419113322p:plain

Lerpを使用することで別の画像に切り替えるということもできます。不可解な画像を差し込んでちょっと不気味な表現もできます。

f:id:amidaMangrove:20200419115337g:plain f:id:amidaMangrove:20200419115444p:plain