シェーダーとは?
シェーダーは、ビデオゲームや3Dグラフィックスの描画に使われるプログラムのことです。これらのプログラムは、3Dオブジェクトの表面の色や質感、影や反射などを決定します。シェーダーを使うことで、ゲームや映画などの3D映像を美しくリアルに描画することができます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/http://umistudioblog.com/wp-content/uploads/2023/01/cropped-アイコン候補.png)
シェーダーは、ゲームの見た目を作っているよ!
マテリアルには、何らかのシェーダーが既に設定されています。
これらの見た目を自分好みにカスタマイズしたいときは、シェーダーグラフを使うのが便利です。
シェーダーグラフとは?
シェーダーグラフは、プログラムコードを書かずにシェーダーを作成することができます。視覚的にわかりやすく、初心者でも扱いやすいことが特徴です。
「ノード」と呼ばれるものどうしを線でつないで、作っていきます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/http://umistudioblog.com/wp-content/uploads/2023/01/cropped-アイコン候補.png)
初心者でもとっつきやすいんだね!
シェーダーグラフの作成
プロジェクトビューから、Create > Shader Graphからシェーダーグラフを作成します。プロジェクトのレンダリング設定に応じて、URPかBuiltInかを選択してください。
今回は2Dで、光の影響を受けた表現も入れると良いので、Sprite Lit Shader Graphを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_524,h_704/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-19.16.06-762x1024.jpg)
マテリアルの作成
シェーダーグラフを設定するマテリアルも同様に、Create > Materialから作成しましょう。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_446,h_482/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-20.35.47-947x1024.jpg)
作成したマテリアルには、インスペクターから先ほど作成したシェーダーに設定をします。Shader Graphsから選択ができます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_458,h_600/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-20.38.31-1.png)
サンプル画像の準備
今回は、画像にシェーダーグラフを使っていきます。
対象の画像をあらかじめ、Unityに取り込んでおきます。画像は、ヒエラルキーにドラッグ&ドロップします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_569/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-20.52.05-1024x569.jpg)
画像のマテリアルを先ほど作成したものに変更します。
インスペクターの Sprite RendererコンポーネントのMaterialを変更しましょう。
シェーダーグラフはまだ何もいじっていないので、グレーになります。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_438,h_558/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-20.55.42.png)
シェーダーグラフの中身
作成したシェーダーグラフをダブルクリックすると、このようなウィンドウが表示されます。
- Blackboard・・・ここに、変数の一覧が表示されます
- Main Preview・・・マテリアルの見た目が確認できます
- Graph Inspector・・・シェーダーグラフの各種設定
また、右上のボタンから、それぞれ表示・非表示を切り替えられます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_799/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-20.59.09-1024x799.png)
シェーダーグラフの基本操作
マウスがなくても、ノートPCのタッチパッドでも操作ができます。
- スクロール・・・マウスホイールをドラッグ、または「ctrl」+マウス左ドラッグ(Macは「option」+マウス左ドラッグ)
- 拡大縮小・・・マウスホイール回転、またはマウスパッドで二本指で上下に動かす
- ノードの作成・・・右クリック > Create Node
- ノードや線の削除・・・右クリック > Delete
画像を表示しよう
いよいよシェーダーグラフをいじっていきます。
右クリックをして、Create Nodeから、Sample Texture 2Dを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_761/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-21.38.17-1024x761.png)
検索窓に直接入力して検索するのが早いです。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_391,h_395/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-21.41.49.png)
sample Texture 2Dノードを作成できたら、画像を設定します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_759/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-21.40.14-1024x759.jpg)
次に、Sample Texture 2D ノードのRGBA(4)とFragmentのBase Color(3)を接続します。
線はドラッグ&ドロップで結ぶことができます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_849/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-21.46.52-1024x849.jpg)
左上のSave Assetを押して、シーンビューに戻ると画像が表示されたことが確認できます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_777/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-21.49.34-1024x777.jpg)
画像表示の完成です!
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_777/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-21.52.18-1024x777.jpg)
色味を変えてみよう
画像の色味を変えてみましょう。
MultiplyノードとColorノードを追加して以下のように繋いでみましょう。
- Multiply・・・乗算(掛け算)のこと
ColorノードはModeをHDRに設定し、好きな色を選択しましょう。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_682/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-22.02.00-1024x682.jpg)
青みがかった画像に変わりました!
このようにノードを組み合わせていくことで、見た目を変えていくことができます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_454/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-23.22.09-1024x454.jpg)
インスペクターで調整できるようにするには
画像と色をシェーダーグラフ上で設定していますが、インスペクターからでも変えられるようにすると便利です。
画像を変数として設定するには、シェーダーグラフの左上にあるBlackboardの+を押して、Texture 2Dを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_324,h_452/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-23.26.27.png)
適当に名前をつけ、エディタにドラッグ&ドロップします。そして、Sample Texture 2Dに画像の代わりとして接続します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_479,h_466/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-23.29.24.png)
ノードから変数に変換する方法
Blackboardから変数を作成するのではなく、既にあるノードを変数に変換することもできます。
Colorノードを選択して右クリック > Convert To > Propertyを選択すると、BlackboardにColorの変数が出現します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_416,h_344/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-23.33.47.png)
これで、マテリアルのインスペクターから変更できるようになりました!
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_588,h_402/https://umistudioblog.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-21-23.38.08.png)
おわりに
シェーダーグラフの使い方の紹介と、色味を変える方法でした。
様々なノードがあるので、色々使って試してみたいと思います。
参考動画