Unity を検索

シェーダーグラフの更新とサンプルプロジェクト

2018年8月7日 カテゴリ: Engine & platform | 6 分 で読めます
取り上げているトピック
シェア

Is this article helpful for you?

Thank you for your feedback!

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 でご覧ください!

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

2018年8月7日 カテゴリ: Engine & platform | 6 分 で読めます

Is this article helpful for you?

Thank you for your feedback!

取り上げているトピック