【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.⑥
こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.⑥」という事で、公式のサンプルシーンにある上の画像の四角と円がどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか?
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-Shape-Multiple」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーは、RectangleノードとEllipseノードで四角と円を作り、それらを③で加算合成して二つの図形が並んでいる絵を作っています。
①と②では、四角と円のUV座標を指定しています。
加算合成した後は、Colorノードから出力された緑カラーをMultiplyノードで乗算して下記のような緑色の四角と円が並んだ絵が完成します。
重要ノードの解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
① Tiling And Offset
このノードは、UVのタイリングやオフセットを設定します。
OffsetパラメーターはUV自体の座標を移動するパラメーターです。
例えば、最初にこのノードを作った時は「X=0、Y=0」となっているため、これをEllipseノードにつないでみると円は中心に表示されます。
ここから「X=0.25,Y=0.25」と入力すると、下図のようになります。
これを図で説明するとこのようになります。
UVがXY軸に対して+0.25オフセットされる事により、円はUVの表示エリアの左下に映ります。
Tilingパラメーターは、シェーダーの表示エリアに0-1のUV座標を何回繰り返すかを指定します。
Tilingの値を「X=1,Y=2」とすると、シェーダーの表示エリアにV2まで表示するため、下記のように表示エリアの下半分に円が表示されるようになります。
Ellipseノードだと図形が繰り返し表示されずちょっと分かり難いため、グロウのテクスチャを貼って確認してみます。
左はTilingの値が「X=1,Y=2」、右はTilingの値が「X=3,Y=3」の時の表示です。
このように、「Tiling And Offsetノード」はUV座標を移動させたりタイリングさせたりと、UVを調整する基本ノードになるため非常に重要です。
② Add
このノードは、Aに入力された値とBに入力された値を加算するノードです。
式で表すとこのようになります。
A+B=Out
完成!
これで今回のシェーダーは完成です!
まとめ
今回は、UVを設定するノードと、2つのノードを加算合成するノードというとても重要なノードが登場しました。
今回新しく覚えるべきノードは2つです。
- Tiling And OffsetでUVをいじる!
- Addで加算合成!
この2つを覚えたら次へ進みましょう!