Search Unity

Unity 2018.1 で、シェーダーを視覚的にビルドできる新しいツール「シェーダーグラフ」が公開されました。バージョン 2018.2 では、これに多数のエキサイティングな新機能が追加されました。Unity 2018.2 と新しいデモプロジェクトをダウンロードし、ぜひお試しになってください!

Unity 2018.2 でシェーダーグラフに追加された新機能には以下が含まれます。

  • HD レンダーパイプライン(HDRP)に対応
  • 頂点位置
  • プロパティ参照名
  • グラフ用の編集可能パス
  • 新しいノード(グラデーション、テクスチャ 2D 配列、テクスチャ 3D、その他

デモプロジェクトを使用する

サンプルプロジェクトを使って、シェーダーグラフで群葉のシーンを作成する方法を見ていきましょう。まずはこちらからサンプルプロジェクトをダウンロードしてください。GitHub にまだ馴染みのない方は、プロジェクトの ZIP アーカイブをダウンロードすることも可能です。

Unity の新しいテンプレートプロジェクト同様、本プロジェクトにも Readme が含まれており、使用ツールに関するドキュメンテーションを素早く参照できるようになっています。

このプロジェクトには、美しい群葉のサンプルグラフと環境シェーダーが含まれているほか、2 つのレンダーパイプラインの切り替え方法のデモ機能も付いています。Readme ファイルのインスペクターには、ライトウェイトレンダーパイプラインと HD レンダーパイプラインの切り替え用ボタンがあります。これらは主に、アセットを作成してパイプライン同士の互換性をテストするために使用します。製品版には 1 種類のレンダーパイプラインのみを使用することが推奨されます。

まずは Assets フォルダー配下の Scenes フォルダー内にあるサンプルシーンから始めましょう。以下、デモプロジェクト内にあるグラフのいくつかをそれぞれご紹介していきます。

標準シェーダーグラフ

Unity の標準サーフェスシェーダーを活用している方に朗報です!シェーダーグラフを使うと、ご自分のシェーダーを作成することができます!デモプロジェクトの Assets/Shaders/ フォルダー内にサンプルグラフがあります。

グラフのプロパティは標準サーフェスシェーダーのオプションとほぼ同じです。グラフは HDRP の Mask マップ用のパックされたテクスチャ形式に従っています。これはグラフですので、プロジェクトのニーズに合わせてカスタマイズすることができます。

本プロジェクトの標準シェーダーには以下のような特性があります。

  • マスターノードの設定内で両面レンダリングの有効化が可能
  • 新しい Is Front-Face ノードでバックフェースの法線をフリップ可能
  • アルファチャンネル内に、ワールド空間の位置に基づくディザーマスクを搭載

単純な群葉のグラフ

プロジェクト内には単純な群葉のグラフも 1 つ含まれています。このグラフは単純な頂点アニメーションを持つ標準シェーダーです。変化をつけるために少々の乱流が加えられた、非常に単純な揺らぎを生成します。

アニメーションは頂点色で制御します。黒から赤になる単純なグラデーションを使用して簡単なアニメーションを作っているため、群葉の先端のみがアニメーション化され、根本は地面に固定された状態です。複雑なアニメーションの場合には複雑な色が必要になります。

一般的に、質の良い群葉アニメーションの基礎となるのは、波です。このグラフは、時間入力およびリマップされた値を持つサイン波を使用して魅力のあるビジュアルを作り出します。黒線は基本のサイン波を表し、赤線はリマップされたサイン波を表しています。

乱流波は、基本のサイン波の修正版です。これは振幅ではなく波の速度を変化させます。これによりランダムな揺らぎの値が生まれ、それを用いて基本の波の上に細かな変則的な揺れを作り出すことができます。ここでは、基本のサイン派と乱流波との違いを見せるために青線を追加しました。

2 つの波を足し合わせて、それに希望の頂点色(上の画像の植物に塗られている赤いペイント)を掛けます。そして、この波をオブジェクトの位置に追加して頂点のオフセットを作り出します。ここでは X 軸のみにオフセットを追加していますが、これはどの方向にも(あるいはすべての軸に同時にでも)行えます。最終的な出力を Master ノードの Position スロットに接続すると、群葉が風に揺れるシンプルなアニメーションが出来上がります。

複雑な群葉のグラフ

本プロジェクトには、複雑な群葉のグラフも含まれています。モーションは Nvidia の GPU Gems 3 に収録されている Tiago Sousa 氏の素晴らしい論文を基にしたものです。この論文では、本システムの基盤となる考え方が丁寧に解説されていますが、ここではそれを本プロジェクトにどのように適用しているかを簡単にご紹介します。

このようなシステムは樹木などの大きな群葉に最適で、木全体が風に揺れた時の大きな波動運動(揺れ)を生み出し、枝にはより小さなバリエーション、葉にはそれよりさらに小さな揺れ(はためき)を生み出します。メッシュに適用された頂点色が波の位相を制御します。赤はメッシュの中で小さな葉の揺れが現れる箇所を指定するので、葉の縁に最適です。緑はすべての枝が同時に揺れないようにするためにタイミングのバリエーションを加えます。青は枝が幹に取り付けられる位置と、風の影響を最も受ける箇所を指定します。これはベースから外側に向かってのシンプルな黒から青に向かうグラデーションになっています。

これらの 3 つの位相を組み合わせると、心地の良い風が吹いているような表現が作り出せます。

しかし、グラフを見ると…複雑で、あまり心地良い見た目とは言えませんね。ただ、幸運なことにこれは見た目ほど複雑ではありません。小さなネットワークに分けて見てみましょう。幹の位相、枝の位相、葉の位相です!

これがシステムの根幹となる幹の位相です。上述の単純な群葉グラフで使用されている乱流と同じノードから開始しています。この波に方向プロパティを掛けて、風が吹いている箇所をより精密に制御します。またこれは、上述の単純な群葉のグラフと同様に、バリエーションのあるリマップされたサイン波も使用しています。その上で、乱流および基本の波を足し合わせます。

このセクションは、2 つ目の位相、つまり枝の揺れです。まず始めに、幹の位相の動きを単一のベクター値内に分離します。波と青の頂点色チャンネルを乗算して、メッシュのどの部分が「枝」になるかを指定します。次に波の強さを下げて速度を上げます。これにより、大きな動きに連動した、非常に小さな波動運動が作り出されます。枝の揺れのもう半分は、値を平滑化してより柔らかいグラデーションにします。なかなかいいですね!

これはアニメーションの葉の位相で、高速な揺れの動きを加えるものです。まず、メッシュの頂点色の赤と緑のチャンネルで、どの縁を高速で揺らすかを指定します。緑のチャンネルは動きのバリエーションを設定します。緑の値が強い領域は、低い領域よりも動きが激しくなります。赤のチャンネルはメッシュの中で激しく動かす部分を指定します。通常これは木のメッシュ上の葉の縁に適しています。

ここまで来たら、後はすべてを足し合わせるだけです!葉の位相を枝の位相と足し合わせ、その結果をさらに根幹となる幹の位相と足し合わせると、複雑な風のエフェクトが完成します!

本プロジェクトで行われているプロセスをさらに詳しく知りたい方は、Assets フォルダー内のサンプルコンテンツをクリックして確認してみてください。一部のスクリプトには追加の ReadMe ファイルが含まれており、皆様がご自身のプロジェクトを開始する際に参照していただけるようになっています。

シェーダーグラフのその他のサンプルコンテンツは、Andy Touch 氏提供の Shader Graph Example Library でご覧ください!

シェーダーグラフについてのご質問やご意見はフォーラムにお寄せください。また、今後のブログでのアップデートもお楽しみに!

23 コメント

コメントの配信登録

コメント受付を終了しました。

  1. I regularly visit your site and find a lot of interesting information.
    Not only good posts but also great comments.
    Thank you and look forward to your page growing stronger.
    https://carhampt.com

  2. Shader Graph is awesome. Will you guys add Vertex ID support? For now, it seems it is not possible to distinguish between different vertices.

  3. This looks a very interesting article – I’ll need to sit down and take time looking into this – Thanks very much!

  4. Thanks for this article, I made a good shader for vegetation, and created my nodes, including SSS.
    https://forum.unity.com/threads/nodes-for-shader-graph.543519/#post-3584384

    1. Arturo Nereu

      8月 13, 2018 8:57 am

      Amazing Job Andrey!

  5. There needs to be a way to visually group nodes together (not resulting in shader code at the end.) And you need to be able to add comments. Bigger graphs can get quite messy and you totally get lost without any commenting feature.

    1. Arturo Nereu

      8月 13, 2018 8:59 am

      Hey Maik,

      You can create subshaders which you can use to group nodes together and if you don’t use them simply not reference them. For the comments, I agree and that is something coming.

      1. I’ve tried using a subgraph, but ran into a problem that I couldn’t work around. Mainly, the subgraph returns basically a Vector4, but the Position port on the PBR master node expects a Vector3. I wasn’t able to connect both together. Then I tried splitting the Vector4 into its subcomponents, then combining RGB together into a new Vector3, and still the Position port wouldn’t accept the connection (it would grey out when dragging the edge.) I don’t have a clue why.

      2. Also, it looks like subgraphs can only return exactly one data type, which is quite cumbersome. I don’t want to deal with a Vector4 if my subgraph returns a Vector3. It doesn’t make sense.

  6. Wait, hold up. Where is that translucent effect came from? i don’t think you can change HDRP surface type in shadergraph yet??!!!

  7. Is there any way to write all that in code in the same/similar way as with surface shaders?
    I really find shader graphs too much overcomplicated and hard to follow. Many parts of those huge graphs could be put in a couple of lines in code.

  8. Thanks for delivering a tutorial about how to switch between renderpipelines.
    But in my opinion it needs too many steps/scripts/assets/prefabs/profiles etc. and should be much more userfriendly.
    Hopefully this will change when coming out of beta…..

  9. How to use the SSS Profile into a Shader Graph? I think we need that support asap.

  10. Ashley Hooper

    8月 7, 2018 6:34 pm

    @Tufan Aydin

    That should just be a rim shader, I don’t see why shader graph couldn’t make that as it’s pretty standard.

  11. Ciro Continisio

    8月 7, 2018 5:17 pm

    Amazing post, Alex! As somebody who’s experimenting a lot with ShaderGraph and trying to use it to the next level, this kind of advanced info is great. Thanks for the tips!

  12. Alan Mattano

    8月 7, 2018 4:53 pm

    For artists who don’t know how to start to build shaders visually, (since ShaderGraph is new), I recommend looking for “UDK shader” on Youtube.

  13. Thanks for the examples, it will be handy for artists like me who don’t know how to start doing their own modification of a standard shader.

  14. Tufan Aydin

    8月 7, 2018 3:10 pm

    Please answer me. Can Shader Graph do now Toon shader with Outline? Can we make Outline shader like in cartoons?

    1. Arturo Nereu

      8月 13, 2018 9:02 am

      Yes, you can get that effect. See this example, the Rim effect can be a good starting point.

  15. Isaac Surfraz

    8月 7, 2018 2:50 pm

    nice! great post!