Unity を検索

シェーダーグラフでインタラクティブな頂点エフェクトを作成する

2019年2月12日 カテゴリ: Engine & platform | 6 分 で読めます
シェア

Is this article helpful for you?

Thank you for your feedback!

シェーダーグラフライトウェイトレンダーパイプラインの機能を使ってエフェクトをデザインする方法をお見せするため、これらのツールを使用して、インタラクティブな頂点ディスプレイスメントエフェクトの例を作成しました。本記事ではその手順をステップ毎にご紹介します。シェーダーグラフで作成したシェーダー、サンプルシーン、3D Game Kit のゲームアセットのいくつかのサンプルを含んだデモプロジェクトをダウンロードし、この先を読み進めてください!

下の動画サンプルの球体には、スペースキーを押すとアクティベートされる、シェーダーベースのディスプレイスメントエフェクトが使用されています。こ皆様のゲームで使用される場合は、これを関連のゲームプレイイベントにアサインします。本記事では、シェーダーグラフパッケージを使用してこのシェーダーを作成し、「スペースキーの押下」のトリガーを実装する方法をご説明します。本記事が皆様にとって「シェーダーグラフでエフェクトをデザインして他の C# スクリプトからそのエフェクトとインタラクトする」方法をより良く理解するための一助となれば幸いです。デモプロジェクトには、シェーダーと、そのシェーダーを制御するスクリプト、そして事前設定済みのライトウェイトレンダーパイプライン(LWRP)アセットのほか、出発点としてお使いいただけるサンプルシーンが含まれています。このチュートリアルを文章ではなく動画でご覧になりたい方は、Unity の YouTube チャンネルをご利用ください(※動画は英語になります)。

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

シェーダーグラフと LWRP パッケージをインストールする

まず始めに、シェーダーグラフとライトウェイトレンダーパイプラインの設定方法をご説明します。パッケージマネージャーを開き、Lightweight RP パッケージと Shader Graph パッケージの両方で「Install」を選択してください。

ライトウェイトレンダーパイプラインのインストールが完了したら、プロジェクト内に新しいパイプラインアセットを作成する必要があります。メニューを Create->Rendering->Lightweight Render Pipeline Asset の順に選択してください。

上記が完了したらこのパイプラインアセットをアクティベートできます。これは、メニューを Edit->Project Settings->Graphics と進み、LightweightRenderPipelineAsset を Scriptable Render Pipeline Settings フィールドにドラッグアンドドロップすることで行えますが、上記でダウンロードしたデモプロジェクトのアセットをお使いの場合は、このステップは事前に完了されているので行う必要はありません。

ライトウェイトレンダーパイプラインのインストールが完了したら、新しいシェーダーグラフの作成を開始できます。プロジェクト内に新しいグラフを作成してみましょう。メニューを Create->Shader->PBR Graph の順に選択してください。PBR Graph では、Unity の物理ベースレンダリングシステムから入力を取得する(つまりシャドウや反射などの機能を使用できる)新しいシェーダーを作成できます。このシェーダーの作成が完了したら、新しいマテリアルにこれを追加し、そのマテリアルをサンプルシーン内の球体にドラッグアンドドロップでアタッチします。

シェーダーグラフを使用した頂点ディスプレイスメント

このエフェクトを作るには、PBR Master 出力ノード内の出力 Position を変更することで、頂点をメッシュ内でその法線に沿って動かします。これは各頂点のベースの Object Position に Add ノードを使用して行います。ベースの Object Position に Normal Vector を追加すると全ての頂点が押し出されて球体が大きく見えるようになります。この動き(ディスプレイスメント)に変化を付けるために、Simple Noise ノードを使用して法線ベクターのディスプレイスメントを半ランダムに Multiply します。

「Save Asset」をクリックすると、Simple Noise に基づいて球体が変形したのがシーンビューで確認できます。

残念ながら、Simple Noise が UV 空間に基づいて抽出されているため、ディスプレイスメントに裂け目が現れてしまっています。この修正は簡単です ― オブジェクトに Position ノードセットを追加するだけで、Simple Noise に UV 空間ではなくオブジェクト空間が使用されるようになり、裂け目が修正されます。

脈打ちのエフェクトを作るには、この Position 出力を Simple Noise ノードに送る前に Time ノードに追加することでスクロールします。また Multiply を Time ノードと併用してスクロールの速度に変化を付けることもできます。

シェーダーグラフのプロパティを C# で制御する

ディスプレイスメントを制御するために、シェーダーグラフ内で新しいシェーダープロパティを使用可能にします。シェーダープロパティを使用すると、インスペクター内での値の入力によって、あるいは(この例のように)独自の C# スクリプト経由で、シェーダーに入力を提供できます。Amount という名前の新しい Vector1 プロパティを作成し、参照を _Amount に変更します。参照フィールドがストリング名となり、このストリング名を使用してスクリプト経由でディスプレイスメントへのアクセスと変更を行います。この変更を行わなかった場合は、自動生成された値が使用されます。ストリングが完全に一致しないと、スクリプトからプロパティを扱えなくなるので、大文字・小文字の別も含めて入念に確認してください。

この Amount シェーダープロパティを Multiply ノード内で Simple Node と共に(Simple Node が法線ベクターによって Multiply される前に)使用します。こうすることでノイズが頂点位置に適用される前にそれをスケーリングできます。これで、メッシュ内の各メッシュがどの程度ディスプレイスされるかが Amount 変数によって制御されるようになりました。

この Amount 変数を制御するために、DisplacementControl という名前の C# スクリプトを作成し、それを DisplacementSphere ゲームオブジェクトにアタッチしました。このスクリプトは、MeshRenderer コンポーネントにアサインされたマテリアル内に作成したプロパティとインタラクトすることで、 _Amount 変数を制御します。MeshRenderer コンポーネントへの参照を変数 meshRender 内に格納し、新しいフロート変数 displacementAmount を宣言します。

単純な lerp を Update 関数内で使用して displacementAmount 変数の値を 0 に補間します。そしてシェーダー変数 _Amount を displacementAmount 変数内に格納されている値に設定します。これによりシェーダーグラフの _Amount 変数が更新され、時間の経過と共に徐々に変化して 0 になるようになります。

Unity のデフォルトの入力軸「Jump」(デフォルトでスペースキーにアサインされています)を使用して、押下された時に displacementAmount の値が 1 に設定されるようにしています。

これで、シーンで再生モードを開始すると、スペースキーを押した時に displacementAmount の値が 1 に設定され、その後ゆっくりと補間によって 0 に戻されるのが確認できます。

シェーダーグラフでボロノイ分割を用いたグローエフェクトを作成する

調整可能なグローエフェクトを作成するには、PBR Master ノード内の Emission に出力します。Voronoi Noise ノードを使用し、それを Color ノードへ Multiply します。これによりグローエフェクトに若干の変調と暗点が加わります。そして Lerp ノードに別の Color ノードをベースの色として使用して、T 入力に Amount 変数を使用します。こうすることで、ベースの Color ノードと Voronoi Noise の Color ノードを、Amount 変数によってブレンドすることができます。

そして、先のステップと類似した設定によってグローをスクロールします。Object に設定された Position ノードを使用し、これを Time ノードに追加して、出力を Voronoi Noise ノードの UV スロット内に接続します。

2019年2月12日 カテゴリ: Engine & platform | 6 分 で読めます

Is this article helpful for you?

Thank you for your feedback!