こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.①」という事で、公式のサンプルシーンにある上の画像の円がどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか？
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-Shape-Ellipse」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーで最も重要なノードは②と④です。
②は①から受け取った値を元に円を作ります。
④は②で作った円に、③から受け取ったカラーを乗算します。
その結果、下記のような緑色の円が完成します。
重要ノードの解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
① Vector
このノードは他のノードに数値を入力する時に使います。
Vector1～4まであり、4つまでの並列の数値を出力するノードです。
※並列とはどういう事かというと、たとえばVector3のXYZをRGBとみなして、カラーを出力できるというような事です。
Convert To Propertyでプロパティにすれば、マテリアルから値の変更が可能になるためとてもよく使うノードです。
② Ellipse
EllipseノードはWidth(幅)とHeight(高さ)を設定して円を作るノードです。
今回のシェーダーでは１つのVectorノードをWidthとHeightの両方につなげているため真円を作る設定になってますが、WidthとHeightに別々の値を入力すれば楕円を作る事もできます。
③ Color
ColorノードはRGBAを出力するノードです。
今回のシェーダーでは緑色に設定されています。
④ Multiply
Multiplyノードは、AとBに入力された値を乗算するノードです。
今回のシェーダーでは、③で設定した緑カラーを②で設定した白い円に乗算しているため、このような緑色の円が完成します。
乗算はブレンドの基本ですのでとてもよく使うノードです。
完成！
これで今回のシェーダーは完成です！
まとめ
今回は基礎シェーダー1個目という事でノード数が少なめです。
ただ、とても基本的なノードが使われていると思います。
今回新しく覚えるべきノードは下記の4つです。
- Vectorで数値を設定！
- Ellipseで円を作る！
- Colorで色をつける！
- Multiplyで乗算する！
この4つを覚えたら次へ進みましょう！