こんにちは、エンジニアのオオバです。
結論から話しますと Shader Graphはプログラミング無しでシェーダーを作ることができるUnity公式ツール です。Shader Graph(シェーダーグラフ)を使うことでエンジニアだけでなく、デザイナーやプランナーもNode(ノード)と呼ばれる線をつないでシェーダーを作れるのです。
そこでShader Graphの始め方を初心者向けに解説します。この記事をとおしてぜひともShader Graphの始めてみてください。今までシェーダーをやりたかったけどできなかったという方にぜひ読んでもらいたいです。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!
Shader Graphを使うための準備
最初にShader Graphを使うための準備を解説します。今回は初心者向けということで手っ取り早く始める方法です。新しくUnityプロジェクトを作ります。 Unity2021.3.0f1 を使っています。
→ Unityバージョンのおすすめの選び方バージョンアップや注意点まとめ
![【Unity】初心者向けShader Graphの始め方_0](https://i.gyazo.com/d6ca4790f251a3934490a7aa1e6cfca2.jpg#750__439)
上図のとおりテンプレートを3D(URP)を選択してください。
URPとは描画パイプライン「Universal Render Pipline」の略です。ビルトインパイプラインと呼ばれる昔ながら描画システムを一新しました。今後のUnityのデフォルト描画システムになると言われています。URPの特徴は描画システムをC#でカスタマイズできるところです。
今回URPを選んだ理由は、URPを選択すると自動的にShader Graphがインストールされるからです。Shader Graphを手っ取り早く始めたい方はURPを選んでUnityプロジェクトを作るのが早いです。
Shader Graphの大まかな流れ3手順
具体的なシェーダーの作成に入る前に、Shader Graphでシェーダーの作成から3Dオブジェクトに反映してディスプレイに表示するまでの流れを簡単に解説します。その後の章「Shader Graphで基本的なシェーダーの作り方3選」でShader Graphを使ってシェーダーを作成していきます。
①Shader Graphファイルの作成
②Materialにシェーダーをセット
③Materialをオブジェクトにセット
手順①Shader Graphファイルの作成
最初の手順はShader Graphファイルの作成です。Shader Graphファイルがそのままシェーダーファイルになります。
![【Unity】初心者向けShader Graphの始め方_1](https://i.gyazo.com/1d43408de326a22e669d317a8a911ed0.jpg#750__260)
メニュー Assets > Create > Shader Graph URP > Unlit Shader Graph
をクリックします。「Unlit」とはライトの影響を受けないシェーダーです。ライトの影響を受けたシェーダーを作りたい方は「Lit Shader Graph」を選んでください。今回はシンプルなシェーダーを作りたいので「Unlit」を選択しています。
![【Unity】初心者向けShader Graphの始め方_2](https://i.gyazo.com/7242bae469475d87f99fd697b216c6cc.png#588__358)
ProjectウィンドウにUnlit Shaderファイルが作られるので任意の名前を付けます。
手順②Materialにシェーダーをセット
作成したShaderをオブジェクトに適用するためにMaterialを作成します。
![【Unity】初心者向けShader Graphの始め方_3](https://i.gyazo.com/ca485cf5c5c9fd8b1aecef54f6c405f9.jpg#438__500)
メニュー Assets > Create > Material
で新規のMaterialを作成し、名前を付けましょう。 ![【Unity】初心者向けShader Graphの始め方_4](https://i.gyazo.com/4744fa4929ebb8dc3d0927ba02b12388.gif)
ShaderファイルをMaterialにドラッグ・アンド・ドロップしてください。するとMaterialはShaderを適用された状態になります。
手順③Materialをオブジェクトにセット
最後に3DオブジェクトにMaterialを適用してディスプレイに表示させます。
![【Unity】初心者向けShader Graphの始め方_5](https://i.gyazo.com/26631ab604051806d574073057687939.jpg#750__422)
メニュー GameObject > 3D Object > Quad
をクリックします。 ![【Unity】初心者向けShader Graphの始め方_6](https://i.gyazo.com/0e506019e61ff139dfcb8c40c7b93b37.png#676__298)
すると、Hierarchyウィンドウに「Quad」というオブジェクトが作られます。Quadとは4頂点で作られたシンプルな四角形ポリゴンメッシュです。Inspectorウィンドウを使ってQuadにMaterialをセットしていきます。
👉 【初心者向け】今さら聞けないUnityでオブジェクト(基本図形)を配置する方法
![【Unity】初心者向けShader Graphの始め方_7](https://i.gyazo.com/23ba132d97f39d77cd455f119030ed18.gif)
QuadのInspectorウィンドウにMaterialをドラッグ・アンド・ドロップしてください。するとQuadにMaterialが適用されます。
![【Unity】初心者向けShader Graphの始め方_8](https://i.gyazo.com/00b112e7d6ed90ad06c5f355b1ab2138.jpg#750__489)
このようにSceneビューにシェーダーを適用した四角形が表示されました。見た目に変化が無いかもしれませんが安心してください。以降の章でシェーダーを編集して見た目を変えていきます。
👉 【初心者向け】Unityのオブジェクトの色を変える方法(マテリアルを使用)
Shader Graphで基本的なシェーダーの作り方3選
ここからはShader Graphを使ってシェーダーを編集していきます。まずはShader Graphがどういうものかを解説します。その後に 色の変更、テクスチャ、アニメーション といった基本的なテクニックを解説していきます。
Shader Graphウィンドウの表示
Shader Graphのシェーダーを編集するためにはShader Graphウィンドウを使います。Shader Graphウィンドウは Shader Graphファイルごとに開くことができます。
![【Unity】初心者向けShader Graphの始め方_9](https://i.gyazo.com/0bedcd18a313aecbaaa2eac3a744e5b9.png#602__328)
「手順①シェーダーファイルの作成 CreateからUnlit Graphを選択」で作成したシェーダーファイルを選択し、Inspectorウィンドウの「Open Shader Editor」をクリックします。するとShader Graphウィンドウが開きます。またShader Graphファイルの ダブルクリック で同様にShader Graphウィンドウは開きます。
Shader Graph内の要素の解説
Shader Graphウィンドウは大きく4つの要素で構成されています。
- Blackboard(ブラックボード)
- Master Stack(マスタースタック)
- Graph Inspector(グラフインスペクター)
- Main Preview(メインプレビュー)
![【Unity】初心者向けShader Graphの始め方_10](https://i.gyazo.com/b39aa42c33696833cd33c1e9fe14f86b.jpg#620__500)
「Blackboard」はシェーダーのプロパティとキーワードのリスト。「Master Stack」はシェーダーへの最終的な出力。「Graph Inspector」は現在選択中のノードやプロパティを編集するパネル。「Main Preview」は現在のシェーダーを適用した時のプレビュー画面です。
いきなりすべてを覚えるのは難しいですよね。シェーダーを編集しながら少しずつ学んでいきましょう。
ノードの基本は入力と出力
Shader Graphを使っていく上でノードを作ることになります。複数のノードを組み合わせることでシェーダーを作り上げるのです。そのノードの基本は入力と出力です。 ノードの左側が入力、右側が出力です。 出力しか存在しないノードもあります。
![【Unity】初心者向けShader Graphの始め方_11](https://i.gyazo.com/8bdeb84e22807ace45c833c585835c3d.png#696__407)
例えば上図は「Vector2ノード」です。Vector2には2つの値を格納します。 格納する側が左側の入力。右側がVector2型を出力します。 入力は出力を接続します。入力が入力を接続することはできません。以上のルールをもとにShader Graphでシェーダーを作っていきます。
Shader Graphで色を変更するシェーダーの作り方
ここからShader Graphを使ってシェーダーを編集していきます。最初はシンプルに色を変更する方法を解説しいます。まずはこちらの動画を見てください。
![【Unity】初心者向けShader Graphの始め方_12](https://i.gyazo.com/b7f15ace4d75caaa8df8bac46360919c.gif)
Blackboardの「+」ボタンをクリックして「Color」を選びます。「Colorプロパティ」をドラッグ・アンド・ドロップで外に出し、Master StackのFragmentに接続します。
![【Unity】初心者向けShader Graphの始め方_13](https://i.gyazo.com/e10b16733d01d38c9c0c35a82da20147.jpg#750__392)
このような状態になったと思います。
![【Unity】初心者向けShader Graphの始め方_14](https://i.gyazo.com/6873cd2cdf6a9b42d260d06dd119f4c3.png#466__208)
Shader Graphを編集したら「Save Asset」ボタンを必ずクリックしましょう。これをしないと変更が反映されません。では、Materialを見てみましょう。
![【Unity】初心者向けShader Graphの始め方_15](https://i.gyazo.com/f78d5b69c004898e2b027c125be3ee7f.png#524__406)
MaterialのInspectorウィンドウに新たに「Color」が追加されました。色を変更してみます。
![【Unity】初心者向けShader Graphの始め方_16](https://i.gyazo.com/e531977540f9aa85a09850705b4194b9.gif)
するとオブジェクトの色も変わります。
Shader Graphでテクスチャを貼るシェーダーの作り方
次にテクスチャを貼ってみます。
![【Unity】初心者向けShader Graphの始め方_17](https://i.gyazo.com/05a2f43d5d172294edca737b230734eb.png#256__256)
↑の画像を用意しました。この画像は「中世ファンタジーRPG風2Dキャラクターパック」というのイラストアセットを使用しています
![【Unity】初心者向けShader Graphの始め方_18](https://i.gyazo.com/d8149b5bf2ec131c2ddb89d1191f6780.gif)
Shader Graphウィンドウ内で右クリックして「Create Node」を選択します。検索窓をうまく使いましょう。リストの中から「Sample Texture 2D」を選びSample Texture 2Dノードを作り、Master StackのFragmentに接続します(↑動画参照)。
![【Unity】初心者向けShader Graphの始め方_19](https://i.gyazo.com/b5e1a4b47934b4bed088fc0d43989ab8.gif)
Blackboardに「Texture2Dプロパティ」を作成して外に出し、「Sample Texture 2Dノード」のTextureに接続します。
Save Assetボタンをクリックして保存したら再びMaterialを見てみましょう。
![【Unity】初心者向けShader Graphの始め方_20](https://i.gyazo.com/1aa0d8f9dc82633011fc7753912c3bef.png#540__492)
MaterialのInspectorウィンドウに「Texture2D」プロパティが追加されています。そこに用意した画像をドラッグ・アンド・ドロップしてください。
![【Unity】初心者向けShader Graphの始め方_21](https://i.gyazo.com/2aa9d67bc8192a98e235509b9eacb4d4.jpg#748__500)
するとこのようにQuadにテクスチャを貼ることができました。
![【Unity】初心者向けShader Graphの始め方_22](https://i.gyazo.com/1387645ee6dc6f83e958233248a50065.png#750__394)
最終的なShader Graphも添付しておきます。
Shader Graphでアニメーションするシェーダーの作り方
Shader Graphで簡単なアニメーションを作ってみます。前章「Shader Graphでテクスチャを貼る方法」のグラフをカスタマイズしていきます。今回新しく登場するノードは「Timeノード」と「UVノード」、「Addノード」です。
「Timeノード」とは時間経過をリアルタイムに取得することができます。この値を使ってアニメーションさせるのです。「UVノード」はUV座標を出力するノードです。UV座標とはテクスチャの座標です。テクスチャを動かすときに便利です。最後の「Addノード」とは足し算です。2つの入力を足した数を出力するのです。
UVノードで解説した UV座標の理解は3Dプログラミングでは必須 です。こちらの記事で詳しく解説していますのであわせて読んでみてください。
では話を戻してShader Graphのアニメーションを作成します。
![【Unity】初心者向けShader Graphの始め方_23](https://i.gyazo.com/eb84678237c506f881eb9a359a637bcf.png#750__402)
まずは「Timeノード」と「UVノード」「Addノード」を作ります。
![【Unity】初心者向けShader Graphの始め方_24](https://i.gyazo.com/8e1a018921984f5e437e48127fa25c70.jpg#750__473)
上図のとおりUV座標とTimeを「Addノード」の入力に接続し、Addノードの出力を「Sample Texture2D」に接続します。
![【Unity】初心者向けShader Graphの始め方_25](https://i.gyazo.com/8a1e3af164a08ade7c9d1a568e09b5b2.gif)
するとこのようにテクスチャがスクロールするアニメーションが作成できました。たったこれだけでシェーダーアニメーションも作れるのです。
もしアニメーションスピードが早すぎると感じたら「Multiplyノード」を使って調整してみましょう。「Multiplyノード」とはかけ算です。入力した2つの値を乗算(かけ算)した結果を出力します。
![【Unity】初心者向けShader Graphの始め方_26](https://i.gyazo.com/7289f1be5fc5af9115d6acfeee009f3b.png#750__461)
「Timeノード」を「Multiplyノードに」接続して、もう片方のMultiplyの入力を0.3にします。
![【Unity】初心者向けShader Graphの始め方_27](https://i.gyazo.com/6b47ad7f6824d481fe1e8d617d3c2a93.gif)
すると先ほど作成したスクロールアニメーションのスピードが30%のスピードになり、ゆっくりになります。
Shader Graphはシェーダーのコードを読み書きしなくても作れるのが魅力的です。 中身のソースコードをイメージできると更に学びは加速します。 次の記事は実際にシェーダーを書いてスクロールアニメーションを解説しています。
![【Unity】初心者向けShader Graphの始め方_28](https://cdn-ak.f.st-hatena.com/images/fotolife/e/esakun/20170328/20170328214102.gif)
どのようにスクロール表現を実装しているのかソースコードを読むことで更にイメージがつきます。あわせて読んでみてください。
Sceneビューがシェーダーアニメーションしないときの対処法
Sceneビューでシェーダーアニメーションしないときの対処法を解説します。Sceneビューには負荷を軽減するためにさまざまなオプションが用意されています。無駄なものを非表示にしてUnityエディタでの作業効率化を図るためです。
![【Unity】初心者向けShader Graphの始め方_29](https://i.gyazo.com/127a3f430ed684ad405cc78f3aa23316.jpg#750__332)
シェーダーアニメーションのON/OFFは「Always Refresh」で切り替えます。チェックを入れると、Editモード中も自動でシェーダーアニメーションが再生します。
Sceneビューはひょんなことで重くなります。次の記事では重くなったSceneビューをできるだけ軽くするテクニックを紹介していますので、ぜひ読んでみてください。
Shader Graphの始め方まとめ
この記事ではShader Graphの始め方を解説してきました。簡単に内容をまとめます。
- Shader GraphはPackage Managerからインストール
- Shader Graphウィンドウでシェーダーを編集
- Shader Graphは4つの要素で構成
- 今回は基本的な「色替え」「テクスチャ貼り」「アニメーション」を作成
こんな感じです。作業自体は思ったより簡単だったのではないでしょうか。Shader Graphにはさまざまなノードが用意されているので、ぜひ色々と遊んでみてください。プログラミングができなくても面白い表現が作れるようになったのはShader Graphの良い点です。
しかし、なぜノードをつなげたら色が変わるのか、アニメーションするのかといった疑問が残っている方もいると思います。ノード同士の関係性を理解するためにはシェーダーを書いて理解するしかありません。ただし、いきなりシェーダーを書き始めると理解できなすぎて挫折する可能性も高いです。
おすすめは Shader Graphで遊びつつ、簡単なシェーダーを自分で書いていくこと です。遊びながら学ぶことで勉強を楽しめます。オオバはいつもこんな感じで新しいことを学ぶことが多いです。
以下に紹介する記事は超基本的なシェーダーの話から、自分で一からシェーダーを書いていくチュートリアルです。
以降はプログラミングしながらシェーダーを理解していく記事です。
一通り読むことでシェーダーのことを理解できます。シェーダーの理解はShader Graphの学びに確実に生きますのでぜひ読んでみてください。
![](https://i.gyazo.com/cb50f3d3c995e8e9f877d7924dffbac3.jpg#1920.0__1280.0)
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!
最後まで読んでいただきありがとうございました!
すばらしいShader Graphライフをお過ごしください。
- Unity2021.3.0f1
- Shader Graph v12.1.6
- Universal RP v12.1.6