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

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

 

こんにちは。

 

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

 

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

 

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

 

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

 

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

 

 シェーダーを開く

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

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

 

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

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

 

 全体の流れ

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

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

このシェーダーは、④のEllipseで円をタイリングして並べるために、①②③のノード群でタイリング用のUVを作成しています。

その後はColorノードから出力された緑カラーと並んだ円をMultiplyノードで乗算して、下記の絵が完成します。

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

 

 重要ノードの解説

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

 

 ① Reciprocal

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

このノードは、入力された値を2つの計算式で計算し、その結果を出力するノードです。
その2つの計算式は以下になります。

Default : Out = 1.0 / In

Fast : Out = rcp(In)

Fastの計算式は僕にはよく分からないので解説を省きます、ごめんなさい。

今回のシェーダーで使われているのはDefaultの計算式ですね。
VectorからXYそれぞれ「5」の値を受け取っているため、出力される値は「0.2」になります。
計算の結果はノードのプレビュー画面に色として表示されるので、X=R,Y=GでRGが0.2となり、画像のように暗い黄色となります。

 

 ② Modulo

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

このノードは、A入力をB入力で割ってその余りを出力するノードです。

とこちらの説明には書いてあります。
Modulo Node · Unity-Technologies/ShaderGraph Wiki · GitHub

 

が、その計算でなぜこのようにタイリングされるのかがどうしても分かりませんでした。
ですのでここも詳しい解説は省かせてもらいますが、正しくないかもしれないけど僕は以下のように理解してます。

A入力のUV座標、UVは0-1の範囲で画像を表示するので、最大値1 / 0.2 = 5。
なので5タイリングになっている。
色も0.2が関係して暗くなっている。

ググッてもどうしても理解できなかったのでこの程度の理解でこのノードはOKとしてます。

いつか分かる人に詳しく教えてもらいたいですね~。
もし解説していただける方いましたらコメントお願いしますw

 

 ③ Multiply

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

ここではA入力のX,Y「5」の値を、Moduloノードで出力された値を乗算しています。

Moduloノードの時点だとタイリングされた各エリア内のUVは0-0.2の範囲しか表示されません。
ですので、各エリアがUV0-1の範囲を表示するために「5」の値を乗算しています。

 

 ④ Ellipse 

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

ここでは、今まで計算してきたUV値を元に、円を並べています。

 

 完成!

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

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

 

 まとめ

今回は、今までよりも一歩進んだUV値の計算方法が学べるノードでした。

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

  1. Reciprocal
  2. Modulo

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