どうも！普段Unityを使っている開発部のH.M.です。
皆さんは「シェーダー」というものを聞いたことがありますか？ 最近のゲームはグラフィック設定を変更できたりするので、知っている方も多いかもしれません。 シェーダーとは大雑把に3Dモデルの見た目を表現するコードのことです。 3Dゲームの光の反射や質感をはじめとするリアルな表現は、大体シェーダーによるものと言っても過言ではありません。 風が吹いて草原が揺れる表現なども実はシェーダーによって作られているのです！
今回は、普段コーディングをしない人や、グラフィックデザイナー以外でも直感的にシェーダーを作ることができる、Unityの「Shader Graph」というツールを導入方法から紹介していきます。
Shader Graphの始め方
Unityプロジェクト作成
Shader Graphを使うために、まずUnityのプロジェクトから作成していきます。
①インストールされているバージョンの確認をしましょう！
ShaderGraphは2018.1以降のUnityで利用することができます。とりあえず最新のバージョンをインストールしておけば問題ないので、まだどのバージョンも入れていない場合は推奨バージョンと書かれたものをインストールしましょう！
②プロジェクトのテンプレートを選択しましょう！
Unityにはグラフィックの計算方法がいくつかあり、どれを選択するかによって使える機能が変わります。 今回は「Universal 3D」のコアを選択しておきましょう！ ShaderGraphを使えるのはコアテンプレートの中でも左側のアイコンにSRPと表示されているものになります。最近は標準でSRPが上に表示されるようになりましたが、少し前のバージョンだとBuilt-in Render Pipelineという古いコアが出てくるので注意しましょう。
③プロジェクト名と保存場所を設定しましょう！
プロジェクトがファイル名になります。保存場所はわかりやすいところにしておきましょう。 下の方にあるUnity CloudやUnity Version Controlの設定をすると、複数人で同時編集ができたりするらしいですが、今回は割愛します。
④各項目が確認できたらプロジェクトを作成しましょう！
ボタンを押すと設定ファイル等の作成が始まります。環境によっては長時間かかる可能性もありますが気長に待ちましょう。
Shader Graph Assetの作成
プロジェクトが作成できたら早速開いてみましょう！
今回、Unityエディターの基本的な画面の説明は省略するので、気になる方はこちらの公式マニュアルをご覧ください。 （最新のドキュメントが日本語化されていなかったので少し前のバージョンですが、特に変わりはありません）
ShaderGraphを作成するために、Projectのタブ左上の＋マーク、もしくはAssetsフォルダ下で右クリック→作成(Create)を選択してからメニューで画像の通りに選択してください。
こんなアイコンのShaderGraphが作成されるはずです
（名前は自由につけてください）
ShaderGraphエディターの見方
作成されたShaderGraphをダブルクリックすると、作った名前のタブが開かれるはずです。これはShaderGraphエディターといって、ShaderGraphのコードを編集する画面になります。そのままだと操作しにくいので、タブのタイトルをダブルクリックするか、タブ右上の3点リーダーをクリックして最大化しておきましょう（元に戻すときも同じ）
こんな画面になったはずです。
画面中央のブロックのようなものがシェーダーで最終的に見た目の出力を行うものです。 ShaderGraphエディター内には他にも機能があるので紹介していきます。
- 画面左のウィンドウはBlackboardというもので、シェーダー内で扱うプロパティを作成・管理する場所です。ここに追加したプロパティはInspector上で編集することができ、モノごとに違うテクスチャを割り当てたり、色を変えたりするときに使います。
- 右上はGraphInspectorというもので、シェーダー自体の設定を行う場所になります。両面に描画したり、透過の表現がしたいときなどに使います。
- 右下はMainPreviewで、その名の通りシェーダーを割り当てたモノがどんな見た目になるのか確認することができます。右クリックメニューから球体以外も選択できるので、使う予定のモノに合わせて変更しておくと良いです。
作ってみよう！
アニメーションシェーダーを作ろう
それでは早速、簡単なアニメーションをするシェーダーを作ってみましょう！ エディターの何もないところで右クリックをするとメニューが出てくるのでCreate Nodeを選択してShaderGraphの処理単位であるノードを作成していきます。 検索して探すことができるので、今回は以下の7つを作成してみてください。
- Position
- Split
- Time
- Substract
- Fraction
- Multiply
- Color
ノードの移動は左クリック、エディター内の移動はホイールクリックでできます。 また、ノードの左右にある丸はチャンネルといい、ノードで行う処理の入出力を表しています。（入力：左, 出力：右） 出力からドラッグして入力で離すとノード同士をつなげることができます。
操作ができたらこのようにつなげてみましょう！
（Colorノードのバーを左クリックすると好きな色を設定することができます。
Previewでもう動いているのがわかりますね！ これでアニメーションのシェーダーができました！ Ctrl + Sでしっかり保存しておきましょう
ゲームオブジェクトに張り付ける
シェーダーを見た目に反映させるためには、オブジェクトにマテリアルとして張り付ける必要があります。
今回は適当に立方体を作って張り付けましょう。
Hierarchyタブで＋ボタンを押し、3D Object>Cubeと選択しましょう
HierarchyにCubeが追加されたはずです。 次に、作成したオブジェクト（Cube）にマテリアルを張り付けましょう Projectで＋ボタンからMaterialを選択し、作成したマテリアルに先ほど作ったShaderGraphをドラッグ&ドロップします。 そして、今度はマテリアルをHierarchy上のCubeにドラッグ&ドロップすると、張り付けることができます！
ここまで上手くできた方は、Sceneビューに見える立方体に動くグラデーションがついているはずです！ これをきっかけに、たくさんシェーダーを作ってみてください。
今回のものを応用して、同じ動きでこんなものもできたりします
おわりに
KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
