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

こんにちは。

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

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

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

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

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

 シェーダーを開く

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

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

 全体の流れ

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

このシェーダー、基礎編.① のシェーダーとほとんど同じです。
大きな違いとしては新しく①Polygonというノードが使われているくらいですね。

全体の流れとしては、2つのVectorノードの値を①が受け取り五角形を作っています。

その後はColorノードから出力された緑カラーと五角形をMultiplyノードで乗算して、下記のような角が丸くなった長方形が完成します。

 

 重要ノードの解説

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

 ① Polygon

このノードは多角形を作るノードです。

Sidesで角の数を指定し、Width、Heightで幅と高さを指定します。

Sidesの値を変えれば下図のように様々な多角形を作る事ができます。

 完成！

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

 まとめ

いまのところ前回までのシェーダーと大きな違いはありませんね。

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

1. Polygonで多角形を作る！

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