Search Unity

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

, 2月 5, 2021

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

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

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

 

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

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

新しく導入されたマスタースタック機能を試していただくために、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 デバイス、コンソールをまたいでさまざまなプラットフォームのプロジェクトの仕事をしてきました。

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

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

First of all what the hell are you talking about? This post is about creating shaders in a visual way, using a node based editor. How much more artist friendly would you like it to be?

And to answer your question anyway: because it gives you more control.

There is a sensitivity to the word, “Master”, in some parts of the world. Even though this is a very different context, it is just something to consider.

You are not serious are you? Master is used everywhere in software for years, including “master reslease” “master server” “master controller” etc…

This really is not something to consider, unless you expect the entire software industry to also change.

Actually, a number of companies are removing the terms “Master” and “Slave” from their dev ecosystems. Apple, Google and Microsoft to name just a few. You can argue whether it’s worth the effort but big players are doing it.

As someone whose grandfather was a slave labourer – no, there is no sensitivity. Please do not inject social justice politics and virtue signaling into software.

The only people I’ve ever seen say this are white people. The reason that companies like Microsoft are doing away with it is because it’s easy publicity while doing the absolute minimum required. There is no sensitivity or controversy here

Nonsense. A slave-master may be one type of “master”, but that does not poison the word “master”. “Master Chef” for example means a chef of exceeding skill. It does not mean they are oppressing anyone.

Another thing occurred to me. Many black entertainers take on a moniker beginning with “M.C.” which stands for “Master of Ceremony”. Surely they wouldn’t do this if the term “master” was completely unacceptable.

When opening the scene using 2020.2.2f1 the rocks and trees look like a wrinkled paper and the base dome doesn’t have water texture applied. There seem to be graphical bug. Can someone verify the sample file?

Good but can you start with a full graph of the lit node yet?! Recreating a whole graph and copying the inputs is a pain just to add a slight change or additional parameter!

The quality of the blog posts have been improving a lot lately. We’re seeing more posts about real engine features that people care about, and much less “services” stuff. Good job, and keep going in this direction!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です