【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.㉒

こんにちは。

シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。

このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。 

今回は「基礎編.㉒」という事で、公式のサンプルシーンにある上の画像の減衰していく円がどのように作られているかを解説します。

 まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。

シーンは開けましたか？
それではシェーダーの解説に入ります。

 シェーダーを開く

サンプルのシーンを開いたら、「Procedural-Color-RadialGradient」というファイルをダブルクリックして下さい。

するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。

 全体の流れ

個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。

このシェーダーは、①で②に必要な2チャンネル分の値を出力し、それを②で合成する事で、円のような、中心から放射状に減衰していく値が作られます。
エフェクトではお馴染みのグロウパーティクルみたいですね。

その値を③で倍率をかけることで円のサイズを調整できるようにし、その値を基に④のLerpで減衰具合によるカラーの変化を作っています。

その結果、このように中心から放射状に減衰しつつ、色も変化するシェーダーが完成します。

 重要ノード群の解説

さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。 

 ① 2チャンネル分の値を出力

ここでは②のDistanceノードに入力するための2チャンネル分の値を用意しています。

UVノードから出力された4つの値をSplitで4分割し、RGの2チャンネルだけ出力しています。

これらをCombineノードで合成する事で、1ポートから2チャンネル分の値を出力しています。

 ② Distanceノードで放射状に減衰する値を作る

ここでは新しくDistanceというノードが出てきました。

このノードは「AとBの値の間のユークリッド距離を出力する」ノードです。

？？？

ユークリッド距離って何？

なんかよく分からないのでとりあえずドキュメントページ貼っておきますね。

分かる方は次へ進んで下さい。

分からない方も次へ進んじゃいましょう！

とりあえずこういう風につなげるとこうなるんだでOKとしちゃいましょう！！

これがノードベースエディタの良いところ！

内容理解できなくても同じように繋げれば同じ結果になる！素晴らしい！

あっ、Vector2ノードで円の中心座標を変更できますからね。

 ③ 円のサイズを調整できる設定にする

Distanceノードから求められた値は、倍率をかけることで減衰距離の調整ができるみたいです。

Vector1の値を2倍、3倍と増やしていくと、最終結果の円が徐々に小さくなっていくのが分かると思います。

ここで円のサイズを調整できるようにノードを組んでいるんですね。

 ④ 円にカラーの変化をつける

③までで出力された値を基に、カラーの変化をつけています。

 完成！

これで今回のシェーダーは完成です！

 まとめ

今回はDistanceという新しいノードが出てきました。

ちょっと僕の知識と理解力では詳しい事は分からなかったので適当な解説になってしまいました。
ごめんなさい。

ただし、この表現自体はよく使いそうなものなので、重要なノードなのかなと思います。

さて、今回新しく覚えるべきノードは1つです。

1. Distanceで放射状に減衰する円をつくる！

この1つを覚えたら次へ進みましょう！