Shader Graphの超入門レシピ その8～ノイズで遊ぼうーディゾルブエフェクトとか頂点アニメーションとか～
前回の記事
Simple Noiseノード
Simple Noiseノードは入力されたUV値とScale値に基づいてノイズを発生させます。今回はこのノードを使用してディゾルブエフェクトや頂点のアニメーションを作ってみようと思います。
ノイズをアルファ値に使用してみる
Alpha値とAlphaClipThreshold値にノイズを使用することで古地図のような表現ができます。作成したShader Graphがこちら。
Simple NoiseをAlpha値に接続しています。次にTimeノードをFractionノードに接続しています。「Factionノードは入力された値の小数点部分を返すノード」で、出力される値は0以上～1未満となります。
接続先の「Alpha Clip Threshold」は「そこに入力された値よりもアルファ値が下回っていたら描画しない」というもので0～1に変化する過程でNoiseの暗い部分から徐々に描画がスキップされていきます。
ノイズのUV値を変更する
UV値を変更するとノイズの出力結果も変わります。デフォルトではUV0が指定されていますが、その値を「Polar Cordinateノード」に変えます。このノードは入力されたUV値を極座標に変換してくれるノードです。
ディゾルブエフェクトを加える
ディゾルブエフェクトの作り方はkeijiroさんのサンプル「例２：ノイズを使ったディゾルブエフェクト」を見て頂くとわかりやすいのでこちらを紹介します。（手抜きとか言わないで・・・
Shader Graph Examples インストラクション · GitHub
ちなみに先ほどのノードにエフェクトを加えてパラメータをいじるとこんな感じになります。
同じエフェクトでもUVの値を変更するだけでも多少変化をつけられるようになりますね。
おまけ：頂点のアニメーションにノイズを加えてみる
頂点座標にノイズを加算することで少し変わった効果を作れます。前回の記事でも実は使用していました。
ノイズを発生させ、法線の方向に乗算した結果を座標に加算する・・・という内容です。実際のShader Graphは以下
作成したシェーダーをスフィアに適用すると以下のようにちょっとぐにゃぐにゃした感じに。
Noiseのスケールを下げUV値をアニメーションさせてみます。
シャボン玉っぽいような面白いアニメーションが作れました。
ノイズを使うことで表現の幅は結構増えそうですね！特にディゾルブエフェクトは単純かつ見た目も派手なのでとても使い勝手が良さそうです。 ということでまた次回！
