VFX Graph を使ってみる

Unity のパーティクルシステム (Particle Systems) を使用して、環境とゲームプレイのビジュアルエフェクト (VFX) を作成する方法を学びましたね。

ただし、Unity で VFX を作成するための VFX Graph という全く別のワークフローがあり、同じ種類の素晴らしいエフェクトなどを作成することが可能です。

画像：VFX Showcase の動画より抜粋

画像：VFX Showcase の動画より抜粋

VFX Graph をパーティクルシステムと比較することにおいての大きな利点は、アプリケーションの優れたパフォーマンスを維持しながら、より多くのパーティクルをシミュレートできることです。VFX アーティストの責任のひとつは、そのエフェクトがアプリケーションの全体的な使い勝手やフレームレートを妨げないようにすることなので、パフォーマンスの最適化は本当に重要なことです。

このチュートリアルでは、前のチュートリアルで作成した天候エフェクトのパーティクルシステムを、VFX Graphで作成したものに置き換えます。これによりパーティクルシステムと比較して、VFX Graph の構造、機能、違いを試すことができます。

VFX Graph は、Unity でエフェクトを作成するためのノードベースのエディターです。ここでは、より複雑なエフェクトのための VFX Graph がどのように見えるかのサンプル例について説明します：

このノードベースのワークフローは、これまで使ってきたコンポーネントベースのパーティクルシステムとは全く異なるものです。

また、メリットとデメリットがはっきりしています。

VFX Graph のメリット

• VFX Graph は数百万個のパーティクルを同時に処理できますが、パーティクルシステムは数千個のパーティクルを処理するのがやっとです。
• VFX Graphでは、パーティクルシステムでは実現できない、上の画像のような緻密なシミュレーションを行うことができます。

VFX Graph のデメリット

• VFX Graph は、パーティクルシステムに比べると、初心者が学ぶには少し難易度が高いです。
• VFX Graph は、パーティクルシステムよりもハードウェア要件が厳しく、一部のターゲットデバイスで正常に動作しないことがあります。
• VFX Graph は GPU 上で動作し、Unity の物理演算は CPU で行われるため、VFX Graph のパーティクルはアプリの他の物理演算（例えば、地面と衝突する）と相互作用することができません。パーティクルシステムは CPU 上で動作するため、他の物理ベースのコンポーネントと相互作用することができます。

VFX Graph とパーティクルシステムの選択

では、VFX Graph とパーティクルシステムのどちらを使うか、どのように選択すればいいのでしょうか。

• もし、かなり経験を積んでいて、本当に複雑なものや何百万ものパーティクルを必要とするものを作りたい場合は、VFX Graph を使うのがよいでしょう。
• エキスパートではなく、シンプルなもの、すべてのデバイスで動作するもの、シーン内の他の物理ベースのオブジェクトと相互作用するものを作成したい場合は、パーティクルシステムを使用します。

シーンの天候エフェクトの場合、パーティクルの数を多くしたい場合があります。

2 つのスクリーンショットをご覧ください。1 枚目は、100 万個のパーティクルをシミュレートするパーティクルシステムです。フレームレートは 5fps 程度とひどいものです。

VFX Graph を用いて 100 万個のパーティクルをシミュレートし、なおかつ約 100 フレーム/秒の優れたフレームレートを実現したこのエフェクトと比較してみてください。

VFX Graph の優れた最大パーティクル数を活かして、より過激な天候を実験してみよう。

VFX Graph が大量のパーティクルをシミュレートするためにどれほど高性能になるかが分かったところで、その天候エフェクトのパーティクルシステムを置き換えてみましょう。

1. シーン内にすでにある環境パーティクル（雪や雨）を非アクティブとしてマークします。

2. Assets > CreativeCore_VFX > VFX > Samples の順に開いて、プレビューしたいエフェクトの該当フォルダーを開き、天候の VFX Graph プレハブのいずれかを Hierarchy に移動して、シーンへ追加します。

3. 雨や雪が降っているように見えるように、オブジェクトを空に適切に配置します。

VFX Graph オブジェクトをシーン内に配置したところで、実際のグラフをエディターウインドウで開いてみましょう。

1. VFX Graph オブジェクトを選択した状態で、Visual Effect コンポーネントを探します。コンポーネント名の横にある小さなランプのアイコンは、VFX Graph のアイコンです。

2. Edit ボタンを選択すると、VFX Graph エディターウィンドウが表示されます。

3. VFX Graph と Scene ビューウィンドウを同時に表示できるように、エディターのレイアウトを変更します。

4. 新しいレイアウトでよければ、Layout ドロップダウンで新しいカスタムレイアウトとして保存し、「VFX Graph」のような名前を付けます。

編集を始める前に、エディター領域での操作に慣れておくと便利です（たとえ、まだ何の意味もないとしても）。

グラフ内を移動する練習：

• Pan：中クリックしてドラッグするか、Alt (Windows) または Option (macOS) を押しながらクリックアンドドラッグしてください。
• Zoom：ホイールを回転させるか、トラックパッドでズームします。
• Focus and zoom in：要素を選択し、F キーを押します。
• Fit to window：A キーを押します。

VFX Graph の全体像が見えると、まず 4 つの主要なノードで構成されていることに気がつくでしょう。これらのノードは、互いに垂直に積み重ねられています。

これら 4 つのデフォルトノードは、Context Nodes（コンテキストノード、略して「Context」）と呼ばれ、上から下へと読み進められます。次のステップで、それらを詳しく説明します。

それでは、4 つのデフォルトのコンテキストとその機能について、いくつかの値を調整しながら、実際に見ていきましょう。

Spawn コンテキスト

この最初のコンテキストは、パーティクルシステムの Emission モジュールと同様に、パーティクルの生成を制御します。Spawn コンテキストを素早く表示するには、それを選択して F キーを押します。

デフォルトでは、新しい VFX Graph は一定のスポーンレートを使用しますが、スモークバーストのエフェクトで行ったように、パーティクルの変数、間隔、またはバーストを設定することができます。

1. VFX Graph バージョンのエフェクトが、元の Particle System エフェクトと一致するように、Rate プロパティを調整します。

フレームレートにあまり影響を与えずに、スポーンレートを非常に高い値まで上げることができます。

パーティクルコンテストの初期化

Initialize Particle のコンテキストは、パーティクルが最初に現れる場所と方法を制御します。パーティクルの初期サイズ、形状、速度、生存期間、最大容量など、パーティクルシステムのメインモジュールと同じプロパティの多くが含まれます。また、パーティクルの生成元となるボリュームを定義する Shape モジュールに相当するものも含まれています。

2. VFX Graph バージョンのエフェクトが元の Particle System エフェクトと一致するように、Initialize Particle コンテキスト内のプロパティを設定します。

パーティクルコンテキストの更新

Update Particle コンテキストは、パーティクルが生成された瞬間から死ぬ（消える）瞬間まで、パーティクルに対するあらゆる変更を制御します。これはパーティクルを更新し、各フレームを実行します。Particle System の Color over Lifetime、Size over Lifetime、Noise（VFX Graph では Turbulence と表示）、Texture Sheet Animation（VFX Graph では Flipbook Player と表示）に似たプロパティが含まれます。

こ れ ら の動作はそれぞれ、 コンテキスト内の新 し い Block と し て追加す る こ と がで き ます。たとえば、上のスクリーンショットでは、Turbulence が Block になっています。

3. 新しい Blocks を試すには、 Context 内で右 ク リ ッ ク し て Create Block を選択 し ます。その後、サブメニューをブラウズするか、検索バーを使って探索します。

Output Particle コンテキスト

Output Particle コンテキストは、パーティクルシステムの Renderer モジュールに非常に似ており、各パーティクルの外観を制御します。ここでは、パーティクルのマテリアルを割り当てます。

4. Output Particle コンテキストでプロパティを設定し、VFX Graph バージョンのエフェクトが元の Particle System エフェクトと一致するようにします。

VFX Graph の天候エフェクトは、パーティクルシステムで実現したものと似ている（あるいはそれ以上！）はずです。

5. VFX Graph エディターウィンドウで Ctrl/Cmd+S を押して、作業内容を保存します。

注：VFX Graph のインターフェイスには、専用の Save ボタンがあります。これは Prefab ウィンドウの保存機能に似ています。VFX Graph で作業する際には、頻繁に保存するか、自動保存機能を有効にしてください。

雨や雪のような単純な環境パーティクルの VFX Graph がどのようなものかはお分かりいただけたと思いますが、このツールの可能性はまだほんの一部です。

プロの VFX アーティストが作る複雑なグラフの種類を見る前に、一からグラフを新規作成する方法を知っておく必要があります。

1. Project ウィンドウ（Hierarchy ではない）で、右クリックして、Create > Visual Effects > Visual Effect Graph の順に選択し、新しい VFX Graph を Hierarchy に移動してシーンに追加します。ランプのアイコンで示されたオブジェクトを、見やすい場所に移動します。

VFX Graph のデフォルトのアセットでは、パーティクルシステムが使用するデフォルトの白いドットのパーティクルではなく、XYZ 軸インジケーターが付いた非常に便利な円が提供され、パーティクルの Transform プロパティをより簡単に視覚化できることに気づかれるでしょう。

2. Project ウィンドウの VFX Graph アセットをダブルクリックすると、VFX Graph エディターウィンドウにアセットが表示されます。

これで、コンテキストノード内の各 Block で何が起こっているのか、理解できるようになったと思います。

3. Blocks の種類を変えて、パーティクルが上空に浮きながらぐるぐる回るとか、面白いことができないか試してみましょう。

ヒント：Update Particle コンテキストに Set Angular Velocity Block を追加します。

VFX Graph のスタート地点がわかったところで、プロレベルのサンプルをインポートして、どこまでできるかを見てみましょう。

1. メインメニューから Window > Package Manager と選択し、左パネルのパッケージ一覧から Visual Effect Graph を選択します。右側のパネルから、折りたたみ式の Samples を展開し、Import を選択して VisualEffectGraph Additions を追加してください。

VFX Graph のサンプルをプロジェクトにインポートします。

2. Samples は、Project ウィンドウで開いていた任意のフォルダーに自動的にインポートされます。 Assets > Samples > Visual Effect Graph > [version] > VisualEffect Graph Additions > VFX の順に選択し、Project ウィンドウから Bonfire VFX Graph を Hierarchy にドラッグしてシーンに追加してください。Samples フォルダーが他のディレクトリにインポートされた場合、Project ウィンドウで検索することができます。

3. Project ウィンドウの Bonfire VFX Graph をダブルクリックして VFX Graph エディターウィンドウで開き、グラフを探索しましょう。

あなたが扱ったオリジナルの炎のパーティクルシステムが、いくつかのサブシステムで構成されていたように、この焚き火もいくつかのサブグラフ（煙、炎、火花）で構成されています。また、これらのサブグラフはそれぞれ Node グループで結ばれており、時間の経過とともにランダムな方向性を持つようになります。

また、これらの VFX Graph には、メインコンテキストに接続された小さなノードである Operators が使用されていることがおわかりいただけると思います。

Operators は、より複雑なシミュレーションに不可欠なカスタムビヘイビアに数学的計算やロジックを使用することができます。

VFX Graphs は、すぐに複雑になってしまいます。ただし、複雑であればあるほど、すばらしさも増すのです。さらに複雑な VFX Graph サンプルを深く掘り下げたい場合は、 Unity の VFX Samples Github repo や Unity の Spaceship Demo をチェックするとよいでしょう。どちらも本当にクールな VFX が含まれています。

画像：VFX Showcase の動画より抜粋

モーフィングフェースのサンプル

画像：VFX Showcase の動画より抜粋

宇宙船のデモ

画像：VFX Showcase の動画より抜粋

VFX Graph の設定方法についてはご理解いただけたと思いますが、まだ VFX Graph を使ったエフェクトを一から作成することはしていません。

VFX Graph で炎を再現してみましょう。

VFX Graph での編集の具体的な方法については、VFX Graph のドキュメントを参照してください。

完璧にはできないかもしれませんが、少しでも近づけることができれば、それはとても素晴らしいことです！

VFX Graph とは何か、どのような構造になっているのか、パーティクルシステムとの比較はご理解いただけたと思います。