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

f:id:Effect-Lab:20180426074438g:plain 

 

こんにちは。

 

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

 

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

 

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

 

 

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

 

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

 

 シェーダーを開く

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

f:id:Effect-Lab:20180426205518j:plain

 

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

f:id:Effect-Lab:20180417231251j:plain

 

 全体の流れ

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

f:id:Effect-Lab:20180426211947j:plain

このシェーダーは、①でUVの回転量を設定し、②でUVのオフセット値を設定し、③のTiling And Offsetでそれらを合成して、UVをオフセットかけつつ回転させるUVを作成しています。
このUVをEllipseノードに繋ぐ事で、円が0.5オフセットされた状態で、表示領域の中心を起点として回転するシェーダーが完成します。

最後にColorノードから出力された緑カラーをMultiplyノードで乗算して、下記の絵が完成します。

f:id:Effect-Lab:20180426074847g:plain

  

 重要ノード群の解説

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

 

 ② Combineのノード群

このノード群、特別重要という事ではないのですが、メモ程度に残しておきたい事があるので解説します。

ここでは、Vector1をCombineノードのRだけに繋いで、GBAの値は全て0になっています。
これによりUVのUだけ+0.5オフセットをかけるという事をしています。

試しにVector1ノードを直接Tiling And OffsetのOffsetポートに繋いでみると、元の状態よりも円が表示領域の中心から遠ざかると思います。
これは、下図のようにUだけでなくVに対しても+0.5の値が適用されてしまうからです。

f:id:Effect-Lab:20180426213526j:plain

上図のTiling And OffsetのOffsetポートを見てみると、(2)と書かれていますね。
これは入力されているチャンネルの数を示しています。
このノードのOffsetは、例えVector1ノードを繋いでも強制的に2チャンネル(このノードではUとV)に値が適用されるため、このようになってしまいます。

Outも(2)となっているので、2チャンネルの数値がそのまま出力されます。

これを避けるために事前にCombineノードを中継して、(X:0.5, Y:0)という数値を作っているんですね。
もちろんUとV両方に同じ値を適用させたい場合はVector1ノードを直接繋ぐで問題ありません。

Vector2ノードを繋いで、UとVのオフセット値を別々に制御するでも今回と同じ事ができます。

 

 完成!

f:id:Effect-Lab:20180426074847g:plain

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

 

 まとめ

今回も今まで覚えた事を組み合わせたシェーダーでした。

まだ覚えたノードは少ないですが、組み合わせ次第で色んな表現ができるんですね。

それでは次へ進みましょう!