シェーダーとは?
シェーダーは、ビデオゲームや3Dグラフィックスの描画に使われるプログラムのことです。これらのプログラムは、3Dオブジェクトの表面の色や質感、影や反射などを決定します。シェーダーを使うことで、ゲームや映画などの3D映像を美しくリアルに描画することができます。

シェーダーは、ゲームの見た目を作っているよ!
マテリアルには、何らかのシェーダーが既に設定されています。
これらの見た目を自分好みにカスタマイズしたいときは、シェーダーグラフを使うのが便利です。
シェーダーグラフとは?
シェーダーグラフは、プログラムコードを書かずにシェーダーを作成することができます。視覚的にわかりやすく、初心者でも扱いやすいことが特徴です。
「ノード」と呼ばれるものどうしを線でつないで、作っていきます。

初心者でもとっつきやすいんだね!
シェーダーグラフの作成
プロジェクトビューから、Create > Shader Graphからシェーダーグラフを作成します。プロジェクトのレンダリング設定に応じて、URPかBuiltInかを選択してください。
今回は2Dで、光の影響を受けた表現も入れると良いので、Sprite Lit Shader Graphを選択します。

マテリアルの作成
シェーダーグラフを設定するマテリアルも同様に、Create > Materialから作成しましょう。

作成したマテリアルには、インスペクターから先ほど作成したシェーダーに設定をします。Shader Graphsから選択ができます。

サンプル画像の準備
今回は、画像にシェーダーグラフを使っていきます。
対象の画像をあらかじめ、Unityに取り込んでおきます。画像は、ヒエラルキーにドラッグ&ドロップします。

画像のマテリアルを先ほど作成したものに変更します。
インスペクターの Sprite RendererコンポーネントのMaterialを変更しましょう。
シェーダーグラフはまだ何もいじっていないので、グレーになります。

シェーダーグラフの中身
作成したシェーダーグラフをダブルクリックすると、このようなウィンドウが表示されます。
- Blackboard・・・ここに、変数の一覧が表示されます
- Main Preview・・・マテリアルの見た目が確認できます
- Graph Inspector・・・シェーダーグラフの各種設定
また、右上のボタンから、それぞれ表示・非表示を切り替えられます。

シェーダーグラフの基本操作
マウスがなくても、ノートPCのタッチパッドでも操作ができます。
- スクロール・・・マウスホイールをドラッグ、または「ctrl」+マウス左ドラッグ(Macは「option」+マウス左ドラッグ)
- 拡大縮小・・・マウスホイール回転、またはマウスパッドで二本指で上下に動かす
- ノードの作成・・・右クリック > Create Node
- ノードや線の削除・・・右クリック > Delete
画像を表示しよう
いよいよシェーダーグラフをいじっていきます。
右クリックをして、Create Nodeから、Sample Texture 2Dを選択します。

検索窓に直接入力して検索するのが早いです。

sample Texture 2Dノードを作成できたら、画像を設定します。

次に、Sample Texture 2D ノードのRGBA(4)とFragmentのBase Color(3)を接続します。
線はドラッグ&ドロップで結ぶことができます。

左上のSave Assetを押して、シーンビューに戻ると画像が表示されたことが確認できます。

画像表示の完成です!

色味を変えてみよう
画像の色味を変えてみましょう。
MultiplyノードとColorノードを追加して以下のように繋いでみましょう。
- Multiply・・・乗算(掛け算)のこと
ColorノードはModeをHDRに設定し、好きな色を選択しましょう。

青みがかった画像に変わりました!
このようにノードを組み合わせていくことで、見た目を変えていくことができます。

インスペクターで調整できるようにするには
画像と色をシェーダーグラフ上で設定していますが、インスペクターからでも変えられるようにすると便利です。
画像を変数として設定するには、シェーダーグラフの左上にあるBlackboardの+を押して、Texture 2Dを選択します。

適当に名前をつけ、エディタにドラッグ&ドロップします。そして、Sample Texture 2Dに画像の代わりとして接続します。

ノードから変数に変換する方法
Blackboardから変数を作成するのではなく、既にあるノードを変数に変換することもできます。
Colorノードを選択して右クリック > Convert To > Propertyを選択すると、BlackboardにColorの変数が出現します。

これで、マテリアルのインスペクターから変更できるようになりました!

おわりに
シェーダーグラフの使い方の紹介と、色味を変える方法でした。
様々なノードがあるので、色々使って試してみたいと思います。
参考動画