シェーダーとは？
シェーダーは、ビデオゲームや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の変数が出現します。
これで、マテリアルのインスペクターから変更できるようになりました！
おわりに
シェーダーグラフの使い方の紹介と、色味を変える方法でした。
様々なノードがあるので、色々使って試してみたいと思います。
参考動画
