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

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

 

こんにちは。

 

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

 

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

 

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

 

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


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

 

 シェーダーを開く

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

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

 

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

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

 

 全体の流れ

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

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

このシェーダーで最も重要なノードは③と⑤です。

③は②から受け取った値を元に長方形を作ります。

⑤は③で作った長方形に、④から受け取ったカラーを乗算します。

その結果、下記のような緑色の長方形が完成します。

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

 

重要ノードの解説

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

 

 ① Vector

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

このノードは他のノードに数値を入力する時に使います。
このシェーダーではX,0.6とY,0.3という値を出力しています。

Vector1~4まであり、4つまでの並列の数値を出力するノードです。
※並列とはどういう事かというと、たとえばVector3のXYZをRGBとみなして、カラーを出力できるというような事です。

Convert To Propertyでプロパティにすれば、マテリアルから値の変更が可能になるためとてもよく使うノードです。

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

 

 ② Split

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

このノードは、4チャンネルまでの並列なVector値を受け取り、RGBAの4チャンネルにSplit(分割)するノードです。

このシェーダーでは、Vector2から受け取ったX,Yの値をそれぞれR,Gに分割して出力しています。

 

このシェーダーを初めて見た時に、なぜわざわざこのノードを差し込む必要があるんだろう?と僕は思いました。
この次の③Rectangleノードに繋げるだけならVector1を2個繋げても同じじゃない?と思ったんです。

 

確かにそれでもまったく同じ計算結果になりますが、この値をマテリアルから制御したい時に少し違いが出ます。
その違いが以下になります。

 

【Vector2とSplitを使った場合】

・エディター

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

・マテリアルでの数値変更項目

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

 

【Vctor1を2個繋げた場合】

・エディター

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

・マテリアルでの数値変更項目

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

 

このように項目を1つにまとめるか2つに分けるかの違が出てきます。
この程度の違いならお好みでいいかなーと思いますが、できるだけパラメーター類はシンプルな方がいいのでVectorとSplitのコンボはよく使う事が多くなりそうです。

 

 ③ Rectangle

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

RectangleノードはWidth(幅)とHeight(高さ)を設定して四角形を作るノードです。

 

 ④ Color

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

ColorノードはRGBAを出力するノードです。 

今回のシェーダーでは緑色に設定されています。

 

 ⑤ Multiply

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

Multiplyノードは、AとBに入力された値を乗算するノードです。

今回のシェーダーでは、④で設定した緑カラーを③で設定した白い長方形に乗算しているため、このような緑色の長方形が完成します。

乗算はブレンドの基本ですのでとてもよく使うノードです。

 

 完成!

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

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

 

 まとめ

今回は基礎シェーダー2個目という事で、前回とほぼ同じノード構成ですが新しいノードが出てきました。

今回新しく覚えるべきノードは下記の2つです。

  1. SplitVector値を分割!
  2. Rectangleで長方形をつくる!

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