Unity 2020.3 LTS で使えるShader Graph v10 の新機能と利用事例

＜このページで学べる内容＞

Unity 2020.3 LTSで使える Shader Graph v10 での新機能や改善された機能を紹介するとともに、Shader Graph の利用法に関する事例を紹介します。なお、Shader Graph v10 は Unity 2020.2 以降でも利用可能です。

2021/12/16

はじめに

本稿では Unity 2020.3 LTSで使える Shader Graph v10 での新機能や改善された機能を紹介するとともに、Shader Graph の利用法に関する事例を紹介します。なお、Shader Graph v10 は Unity 2020.2 以降でも利用可能です。

Shader Graph の新機能

まずは、Shader Graph v10 で加わった機能のうち主立ったものを紹介します。

何がどう新しくなったのか？を比較するために、Unity 2019.4 LTS と Unity 2020.3 LTS のそれぞれで次の表のようなバージョンを用いてプロジェクトを作成しています。

	Unity 2019.4 LTS	Unity 2020.3 LTS
Unity Version	Unity 2019.4.33f1	Unity 2020.3.23f1
Render Pipeline	Universal Render Pipeline 7.7.1 High Definition Render Pipeline 7.7.1	Universal Render Pipeline 10.7.0 High Definition Render Pipeline 10.7.0
Shader Graph	Shader Graph 7.7.1	Shader Graph 10.7.0

作成可能な Graph の種類

2019.4 時点では 2D 系の Shader Graph が Experimental という形で提供されていましたが、2020.3 では Experimental が外れて Sprite Lit や Sprite Unlit として作成出来るようになりました。

また、HDRP の Eye Graph も Experimental が外れて正式に利用可能になりました。

また、後述する Master Stack の登場により、Blank Graph という空の Shader Graph を作成して Material の基本属性を後から変更することができるようになっています。

Master Stack

v8 以前の Shader Graph では Master Node という出力設定を行うための特別な Node が Graph 内に配置されており、一度 Shader Graph を作成すると「2D か？3D か？」「PBR か？Unlit か？」といった Material の基本属性を変更することができませんでした。
v10 以降の Shader Graph では、この Master Node が廃止され Master Stack という仕組みに置き換わりました。

Master Stack は「Shader の性質を管理するための要素」で、後述の Graph Inspector から設定を変更出来ます。
Shader Graph 上の見た目は、大まかに Vertex と Fragment の領域に分かれており、Graph Inspector の Graph Settings タブで「どの Material を選択しているか？」や「Material 毎のオプションをどのように設定しているか？」に応じて Master Stack への入力項目が増減します。

Material 変更やオプションのオンオフによるMaster Stack の変化

Graph Inspector

Shader Graph v10 から Graph Inspector が新設されました。

Graph Inspector は Master Stack に影響するような Graph 全体の設定や、各 Node の設定、Blackboard に追加したプロパティの設定などを表示・変更するためのウィンドウです。

Graph 全体の設定は Graph Settings タブに表示され、Node や Property の設定は Node Settings タブに表示されるようになりました。

Node 毎の精度や、入出力以外の設定項目がある Node の設定などは、従来の歯車アイコンではなく Graph Inspector から行う形になります。

複数の Active Targets

Graph Inspector の Graph Settings > Target Settings に Active Targets という項目が追加されており、「URP と HDRP との両方で Shader を使い回す」や「HDRP 環境下での Renderer と Visual Effect Graph とで同じ Shader を用いる」といったことができるようになりました。

Active Targets の一覧右下にある＋ボタンから Target を追加

Target ごとにオプションを変更できるので、「HDRP は Lit で URP は Unlit」といった設定にすることも可能です。

複数の Active Targets を選択している場合、Master Stack の見た目は各 Target で選択している Material やオプションが必要とする入力項目が全て表示された状態になります。

HDRP を Lit、URP を Unlit にして URP の Alpha Clip オプションをオンにした場合

Shader の Debug

Shader Graph v10 以降では Shader Graph によって生成される Shader コードを表示する方法が少しだけ簡略化されました。
これまでは Shader Graph を開いて Master Node のコンテキストメニューから Show Generated Code を選択する必要がありましたが、v10 以降では対象の Shader Graph アセットを選択し Inspector に表示される View Generated Code ボタンを押下するだけで Shader のコードが表示されるようになったので、Shader Graph ウィンドウを起動するというステップが省けるようになりました。

Unity 2019.4 の場合: Asset を選択 → Master Node を右クリックしてコンテキストメニューを表示 → Show Generated Code を選択

Unity 2020.3 の場合: Asset を選択 → Inspector に表示される View Generated Shader を選択

なお、Shader の表示には Preferences の External Tools > External Script Editor に設定している IDE が用いられます。

External Script Editor で選択している IDE が利用される

検索ウィンドウの改善

Shader Graph v10 では Node 追加時に表示される検索ウィンドウも改善されています。

これまでは、キーワードを入力して部分一致した Node がフラットに一覧されてしましたが、v10 以降は「どのカテゴリに属する Node なのか？」が分かりやすくなりました。

また、複数のカテゴリを同時に開いておくことができるようになったので、豊富な Node を探す際の効率が良くなっています。

キーボードショートカット

Shader Graph v10 では、以前のバージョンから存在しているキーボードショートカットに加えて、Node のグルーピングに関するショートカットが追加されています。

操作	ショートカット（Windows / macOS）
グルーピングする	Ctrl + G / command + G
グルーピングを解除する	Ctrl + U / command + U

また、元々ショートカットは存在していましたが、コンテキストメニューに含まれていなかった「Property の複製」がコンテキストメニューに含まれるようになりました。

Appendix

本稿で扱っている項目は ShaderGraph パッケージの Changelog を参考にピックアップしました。

本稿執筆時点（2021年11月）での Unity バージョンと ShaderGraph, Universal Render Pipeline, High Definition Render Pipeline の最新バージョンとの対応は次の表のとおりです。

Unity Version	URP / HDRP / ShaderGraph Version
Unity 2019.4 LTS	7.7.1
Unity 2020.3 LTS	10.7.0
Unity 2021.1	11.0.0
Unity 2021.2	12.1.1
Unity 2022.1 Alpha	13.1.0

Shader Graph で Skybox を自作する

本章では Shader Graph の使い方の事例として、URP での Procedural Skybox を自作する方法を紹介します。

URP に於ける Skybox の概要

URP で Skybox を設定する場合は、Manual にあるように組み込みで提供されている「6面」「Cube Map」「パノラマ」の何れかの Texture を展開する Shader か、Texture を用いない Skybox/Procedural Shader を設定した Material を作成する方法が一般的です。

このうち Procedual Shader をカスタマイズしようと思うと、Shader が公開しているプロパティ以外は変更できません。

Built-in の Procedural Shader を用いた Material

この組み込みの Shader で事足りることも多いですが、例えば「夕暮れの空のような水色からオレンジにグラデーションする空を描画したい」や「ゴッドレイ的な表現を含む雲を足したい」といった複雑なカスタマイズはできません。

そういった複雑なカスタマイズを要する Skybox の表現には、Shader Graph を使って自前の Skybox 用 Procedural Shader を作成するというアプローチが有用です。

Skybox 用の Shader Graph を作成する

まずは、以下の要点をおさえた Shader Graph を作成します。

Graph Settings の Material は Unlit にする
World Space の Position を入力に用いる

Shader Graph の使い方や作り方の説明は本稿の本質ではないため詳細は割愛しますが、サンプルとして次のスクリーンショットのような Built-in Render Pipeline の Skybox を模倣した Shader Graph を作成しました。

この Shader Graph の構造は概ね次のようになっています

World Space Position を正規化した Y 成分（Green）を利用
上半分（天頂）と下半分（天底）とで描画を分け、それぞれ Blackboard に設定したパラメータから色を重ねる
地平線の遠景部分はパラメータに設定したグラデーションパターンを加算

Shader Graph で表現できるものであれば、雲の表現や太陽の描画など何でも Skybox に映し出すことができますので、プロダクトの要件にマッチする Shader Graph を作成しましょう。

作成した Shader Graph を利用する Material を作成する

新規に Material を作成し、作成した Shader Graph を選択します。

Scene の Lighting Settings で作成した Material を参照する

Lighting Settings ウィンドウの Environment タブにある Skybox Material に作成した Material を設定すれば設定完了です。
作成した Material を Scene View に直接 Drag & Drop しても OK です。

なお、ランタイムで Skybox の Material を変更したり、プロパティを変更する場合は UnityEngine.RenderSettings.skybox を操作します。
その際、Ambient Probe を更新する為に UnityEngine.DynamicGI.UpdateEnvironment() メソッドも併せて実行する必要がある点に注意を要します。

Appendix

本章で作成した Skybox 用 Shader Graph を含むサンプルプロジェクトのリポジトリはコチラです。

筆者紹介：もんりぃ先生（森哲哉）

株式会社キッズスター / CTO。Unity Ambassador。Microsoft MVP for Developer Technologies。モバイルゲーム開発に軸足を置きつつ、登壇・執筆活動にも精を出す。Player, AssetBundle ビルド・ワークフロー・アーキテクチャなどのおじさん業を得意とする。

Twitter：https://twitter.com/monry

この記事はいかがでしたか？