Unity を検索

シェーダーグラフに新しく導入されたマスタースタックのご紹介

2021年2月5日 カテゴリ: テクノロジー | 6 分 で読めます
取り上げているトピック
シェア

Unity 2020.2 では、シェーダーグラフに複数の新機能が導入され、アーティスト向けのワークフローの改善が図られています。たとえば、全体的なユーザー体験の向上と、グラフインスペクターの導入によって、グラフエディターのパフォーマンスが大幅に向上しています。グラフのエンドポイントとして、これまでのモノリシックなマスターノードに代わり、使いまわしの利く機能ブロックのコレクションであるマスタースタックが導入されました。

マスタースタックはシェーダーのエンドポイント、つまりシェーダーによって描かれる最終的な外観を定義するものです。これは頂点ステージとフラグメントステージで実行される命令間の関係を可視化する上で役立ちます。Unity 2020.2 では、以前のバージョンの Unity にあったマスターノードがこのマスタースタックで置き換えられます。

グラフインスペクターは、マスターノードとグラフ内の他のノードの設定を 1 つの場所にまとめて表示します。ここでは、アクティブなターゲットとシェーディングのモードを設定することができます。

以下の動画で、今回のシェーダーグラフのアップデートの内容をご確認ください。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

新しいサンプルプロジェクトを使ってみよう

新しく導入されたマスタースタック機能を試していただくために、GitHub からダウンロードできるサンプルプロジェクトを作成しました。ここからは、サンプルプロジェクトを見ながらいくつかの例を紹介します。

サンプルプロジェクトをクローンまたはダウンロードして、ぜひ試してみてください。

このサンプルプロジェクトは、Unity のユニバーサルレンダーパイプライン(URP)を使用して作成したものです。このプロジェクトには、シェーダーグラフで作ったシェーダーを使って表現された 2 種類の水、崖から流れ落ちる滝と、島を囲む海で構成された、ミニチュアビーチ環境が含まれています。完成したサンプルシーンは、Asset > Scenes > MasterStackDemoScene にあります。

それでは、新しいマスタースタック機能を使って水のシェーダーを構築する方法を詳しく見ていきましょう。

滝を作る

滝のシェーダーの場合は、シェーダーのベースカラーチャンネルとアルファチャンネルを設定するだけです。Voronoi ノードを使用してテクスチャを生成しながら、滝のモデルの UV のオフセットとタイリングの設定をします。それから One Minus ノードを 2 つ使って、アルファチャンネルのメッシュの端にマスクを掛けることで、滝がより自然に見えます。

海を作る

実際のグラフを調整する前に、水のシェーダーに持たせたい基本的な属性を考える必要があります。まず、水のを考えましょう。次に、の満ち引きのような水の表現を鮮やかにする要素について考えます。水面の反射も非常に重要な要素です。また、水が岸に接するところにを追加することも忘れてはいけません。海岸線に水がかなり近づいている場所もあるので、水に深さを持たせられればその表現は素晴らしいものとなるでしょう。

水のシェーダーに持たせる属性の見極めができたので、サンプルのシェーダーを参考に、意図した結果を得る方法を見ていきましょう。

まず、底のガラスのボウルに色を適用します。水のシェーダーは、4 つの色に関するプロパティを使用します。そのうち 2 つは全体のグラデーションを制御するもので、残りの 2 つは深いところの水と浅いところの水の表現に関するものです。深いところの水と浅いところの水の境目の見た目の変化は、後ほど詳しく説明する深さの値によって制御されます。

次に、サンプルシェーダーが潮の満ち引きを表現するためにどのように頂点ディプレイスメントを使っているかを確認しましょう。新しいマスタースタックでは、頂点シェーダーとフラグメントシェーダーは分けて表示されます。これにより、どのノードが頂点に影響を与えているかが分かりやすくなり、また、グラフを更新する際の手続きも簡単になります。

上の画像のシェーダーグラフでは、頂点に y 軸方向の変位が加えられています。変位の大きさと周波数はプロパティで制御できます。Gradient Noise ノードを使って、潮の満ち引きの周波数のバリエーションを増やすこともできます。

下の画像に示すように、水面の小さな波を表現するために、互いに反対方向に動く 2 枚の法線マップを、時間で制御される速度を使って設定値を変えながらタイリングしています。

次に、水の反射深さの表現方法を見ていきましょう。

Reflections 反射は、シェーダーにスムースネスを適用することで表現できます。いつものように、ここでも 2 つの値がありますが、1 つはガラスのボウルの上部、もう 1 つはガラスのボウルの側面の表現に使うものです。

シェーダーを使って深さの表現を作ろうとする前に、プロジェクトで使用しているレンダーパイプラインアセットで Depth Texture オプションがオンになっていることを確認してください。Depth Texture オプションは、使用しているレンダーパイプラインアセットの General セクションにあります。現在使っているレンダーパイプラインアセットは、Edit > Project Setting > Graphics > Scriptable Render Pipeline Asset からアクセスできます。

Depth Texture が有効になっていることを確認したら、ウォーターシェーダに depth を追加しましょう。

Scene Depth ノード、Screen Position ノード、およびカメラのファークリッピングプレーンまでの距離を使用して水の深さを計算することができます。また、ブラックボードにはいくつかの深度に関するプロパティが設定されているので、マテリアルのインスペクターから水の深さを制御することができます。そして、Lerp ノードで深さの値を使えば、深いところの水と浅いところの水の間の領域を表すために必要な色の補間を統一的に行うことができます。

深いところの水の色と浅いところの水の色以外に、水面のも深さの値に依存しています。しかし泡の場合は水が何かとぶつかったときだけ現れるはずです。そのため、深さの値を反転させる必要があります。それに使えるのが One Minus ノードです。

これで、重要な属性については一通り見たことになります。あとは、皆さんご自身でプロジェクトの内容を自由に調べてみたり、調整したりしてみてください。

Shader Graph パッケージのバージョンが 10.0 以上の場合、それ以前のバージョンで作成したシェーダーグラフは、グラフエディターで開いた時にマスタースタックを使用する形にアップグレードされますのでご注意ください。また、アップグレードガイドも公開しており、プロジェクトを新しいバージョンにアップグレードする方法について詳しく説明しています。

学習リソース

シェーダーグラフの制作に強く関心をお持ちの方は、フォーラムを覗いてみたり、Discord で私たちと交流されたりすることをおすすめします。今後も、シェーダーグラフの話題にご興味を持ち続けていただきますよう、よろしくお願いいたします。

このブログの著者紹介

Siyu (Tracy) Chen(R&D グラフィックス部門所属テクニカルアーティスト)は、シェーダー制作、ツール開発、ルックデブに情熱を注ぐテクニカルアーティストです。彼女は以前 Unity でテクニカルアーティストのインターンをしていましたが、カーネギーメロン大学のエンターテイメントテクノロジーセンターを卒業して最近再び Unity で働き始めました。

彼女は AR/VR デバイス、コンソールをまたいでさまざまなプラットフォームのプロジェクトの仕事をしてきました。

現在、彼女はシェーダーグラフをユーザーにとって使いやすいツールにする、およびワークフローのイテレーションをより素早く重ねられるように安定性と拡張性を向上を図るというミッションに、エンジニアやデザイナーと共に取り組んでいます。

2021年2月5日 カテゴリ: テクノロジー | 6 分 で読めます
取り上げているトピック