新シリーズShader編、始まります。
本シリーズでは基本的にはShader Graph（ノードベース）で進めていく予定ですが、それだけではもったいないので一緒にコードベースなShaderも扱えるようになろう！
という方針で進めていきます。
また、前提としてURPの環境を前提としますのでその点ご注意ください。
あわせて筆者はトゥーン・イラスト調のルックを扱うことが多いためそれらを前提にすることが多くなりますのでよろしくお願いします。
また、自分がもとデザイナーということもあり、デザイナーが新しくシェーダーも覚えたい！ということも実現できるような記事にしていく予定です。
シェーダーは一見難しそうに見えはするもののやっていることは実はPhotoshopでできるようなことの知識をベースにできる部分も結構多かったりします。
そういったデザイン的な部分も取り上げつつデザイナーに優しいシェーダー入門、みたいなノリでやっていければと思います。
実行環境：Unity6(6000.0.26f1)
今回の目的
今回は導入編ということなのでShader Graphの編集を始められる環境を整え、基本的な操作的な部分を覚えることを目的とします。
インストールについて
ShaderGraphはVFXGraphと違ってプロジェクトを作成した時点で既にインストールされています。
そのため特段インストール作業は不要です。
バージョンの確認やアップデート等は従来通りWindow -> PackageManagerからShaderGraphを確認できます。
ShaderGraphを作成する
新しくシェーダーを作成する際はProjectの中で右クリック -> Create -> Shader Graph -> URPの中に表示されるものから作成が可能です。
今回はライティング等難しいことはおいておくためとりあえずUnlitの方で始めてみましょう。
作成されたら適当にわかりやすい名前でも付けておきましょう。
今回はお試しなのでTestShaderとしてみました。
編集画面を開く
作成されたShaderGraphファイルをダブルクリックすることで編集画面を開くことができ、上画像のような画面になります。
プロパティとかノードはVFXGraphと同じような感覚に近いですね。
ShaderGraphでは右下にマテリアルのプレビューとシェーダ全般の設定が右上の部分で設定可能です。（Graph Inspectorの部分）
ここの設定は基本そのままでも良いのですが、Allow Material Overrideのチェックは入れておいた方が良い場合が多いのでチェックしておきましょう。
ここにチェックを入れるとFragmentの部分にAlphaとAlpha Clip Threshouldが出現します。
他にもSurface TypeやDepth Write / Testなどよくある項目がここに並んでいる、という感じです。
ちなみに、最下部にあるSupport VFX Graphというものがありますが、ここにチェックを入れるとVFXGraphでShaderGraphで作成したシェーダーを使用できます。
これはまた別途VFXGraph編の方で記事にすることにします。
＜記事リンク追加予定＞
ShaderGraphで作成したシェーダーを割り当てる
先ほど作成したShaderGraphはマテリアルのシェーダー選択の中のShader Graphs -> [作成したシェーダー名]から選択可能です。
今回はTest Shaderという名前にしたのでそれを選択します。
そうすると下画像のようなほぼ何もないマテリアルになることがわかると思います。
特に何もない場合はデフォルトでグレーでライティングも何もない描画されます。
ノードの配置方法
ノードの配置方法はVFXGraphと似たような感覚で使用できます。
何もない部分でSpaceキーを押すとノード一覧のポップアップが出るのでその中から選択して配置します。
また名前で検索も可能なのでノード名を把握しているなら検索したほうが早いです。
今回は色を付けるためにColorをダブルクリックして追加してみます。
これでノードの配置ができました。
またこの方法以外にもColorのようなプロパティ系のノードは左上の部分にプロパティに追加してドラッグ＆ドロップでも配置可能です。
こちらの方法で配置したプロパティはインスペクタに表示されるようになり、そこで動的に変更ができるようになるので変更される可能性があるプロパティについてはこちらの方法で配置しましょう。
ノードを接続する
ノードの接続方法もVFXGraphと同じようにソケットからドラッグ＆ドロップで接続可能な接続先ソケットに接続できます。
今回はColorなのでBase Colorへと接続します。
これによって右下にあるプレビューへ反映されていることが確認できます。
おわりに
とりあえずここまでの内容でShader Graphの作成からノード配置・接続までの基本的な操作は覚えられると思います。
あとはどういった処理を組むのか、を知っていくことであらゆるシェーダー表現が可能になっていくので本シリーズで少しずつ覚えていければと思います。
次回から解説編に入っていきます。早速次回からノードを組んで簡単なシェーダーをから作成していきます。
