美しい VFX をリアルタイムで制作

The Visual Effect Graph (VFX Graph) enables the authoring of both simple and complex effects using node-based visual logic. As one of several major toolsets available in Unity, the VFX Graph allows artists and designers to create with little or no coding.

Visual effects are key to crafting deeply immersive experiences for your players. And thanks to continuous hardware advancements, what used to be available only for Hollywood blockbusters can now be attained in real-time.

This article is an excerpt from our 120-page e-book, The definitive guide to creating advanced visual effects in Unity, which guides artists, technical artists, and programmers using the Unity 2021 LTS version of VFX Graph. Leverage it as a reference for producing richly layered, real-time visual effects for your games.

Unity で炎、煙、ホログラムなどの映画のようなエフェクトを実現することに興味をお持ちですか?Unity の Visual Effect Graph のノードベースのワークフローエフェクトと適応性のある機能を使用して、美しい VFX をリアルタイムで作成する方法について説明します。この記事は、Unity のリードグラフィックステストエンジニアである Vlad Neykov が進行役を務めた Unite Copenhagen 2019 のセッションをベースとしています。 

Unity では、Visual Effect Graph の検証済みの機能とワークフローをすべて網羅したブログ記事を最近公開しました。Visual Effect Graph のアーキテクチャに関するヒントや、VFX を Magic Book のデモにどのように活用したかについて詳細をお確かめください。

VFX How to

The Magic Lamp VFX sample scene

VFX graph overview

Visual Effect Graph は、Unity の次世代のビジュアルエフェクトツールです。シンプルなものから複雑なシミュレーションまで幅広く、あらゆるものの制作に使用できます。

各ビジュアルエフェクトは Project フォルダーに自己完結型のアセットとして置かれます。イベントやパラメーターのインターフェースがあり、Unity の残りの部分と通信できます。Visual Effect Graph は HD レンダーパイプライン(HDRP)と連動するよう設計されており、(コンピュートシェーダーをサポートする)次世代のプラットフォームに合わせて調整されています。 

Visual Effect Graph は GPU 上でシミュレートされることで、はるかに多くのパーティクルに対応できます。ノードベースのアプローチにより、ユーザーはカスタム動作や複雑なシミュレーションを作成できるようになるほか、フレームバッファーへのアクセスにより、シーンジオメトリの上に重ねてパーティクルをスポーンするなどの強力な機能を使用できます。

ただし、GPU 上でシミュレートされるということは、CPU とのデータ送信のやり取りがささいなものではなくなるということを意味します。Visual Effect Graph は C# での VFX パーティクルデータの読み取りに対応しておらず、Unity の Physics システムと対話しないため、物理演算ベースのエフェクトを制作するには何らかの代替策を導入する必要があります。

VFX How to

The VFX Graph Asset and Visual Effect component

Visual Effect Graph のフロー

システムを作成するときは、一連のコンテキストノード(コンテキスト)が垂直方向に接続され、上から下の順に実行されます。これらはあらゆるエフェクトのビルディングブロックです。

Spawn は、現在のフレームで作成すべきパーティクルの数を決定するコンテキストです。次のコンテキストである Initialize は、そのエフェクトの容量とバウンディングボックスを決定するほか、そのパーティクルの初期値が指定される場所になります。組み込みのパーティクルシステム内とは異なり、バウンディングボックスは動的ではないため、エフェクトが正しく呼び出されるにはボックスがそのエフェクト全体を囲んでいることを確認する必要があります。 

Update はすべてのフレームを実行するほか、衝突のシミュレーション、異なるノイズ乱流の追加などを実行するのに適した場所です。Output は、パーティクルをどのようにレンダリングするかを決定し、各システムは複数の出力に対応できます。また、大量のパーティクル属性をレンダリングする前に Output で調整することもできます。グラフ全体を通してサイズを変更する必要がない場合は、それを単に最後に設定すればよいため、そのためにバッファーを予約する必要はありません。

VFX How to

The VFX Graph window

Visual Effect Graph のアーキテクチャ

Visual Effect Graph は Project フォルダー内のアセットで、サブアセットとして格納されたスクリプタブルオブジェクトとしてブロックやノードが含まれます。Visual Effect Graph から、Unity は Visual Effect Graph の下位レベルである表現グラフを生成します。その後、表現グラフはこの情報を VFX コンパイラーに送信し、そこで大量のランタイムデータが生成されます。 

このデータには、シミュレーション用にコンピュートシェーダー、パーティクルのレンダリング用に頂点シェーダーとピクセルシェーダーのペアが含まれます。また、CPU インタープリター用にバイトコードを生成します。CPU でフレームごとに 1 回計算するほうが、GPU でパーティクルごとに 1 回計算するよりも効率的であるためです。 

また、VFX コンパイラーは、各システムが実際に必要なデータのみを格納するように、パーティクルデータレイアウトを生成します。たとえば、システム内で加速度を使用していない場合、Unity は加速度用にパーティクルごとに別の Vector3 を格納しません。各システムは関連するものだけを認識するよう最適化されます。シンプルなエフェクトを作成する必要がある場合、より大きなエフェクトで必要とされる可能性があるすべての属性は持ちません。 

また、コンパイラーはプロパティシートを作成します。ここに公開されたすべてのパラメーターが見つかります。Visual Effect Graph の要素は Timeline またはコードを通じてアクセスするか、インスペクターで直接変更できます。 

最後に、コンパイラーにすべての VFX システムの一覧が表示されます。これにより、それぞれに対して異なる呼び出しを発行できます。

Visual Effect Graph

Visual Effect Graph は複雑なネットワークの組み合わせが可能

コンパイル機能

エフェクトの編集中、自動コンパイルを使用すると、Visual Effect Graph を再生モードででも常に変更できるので便利です。値を変更して再コンパイルすることなくエフェクトの結果を確認できるほか、ブロックやノードを接続または接続解除することでグラフを変更すると、再コンパイルがトリガーされます。

VFX How to

The vertical logic in a graph flows downward.

Visual Effect Graph の新機能

次の数多くの新機能が Visual Effect Graph に追加されています。 

  • サブグラフ
  • VFX シェーダーグラフ(プレビュー)
  • パーティクルストリップ(プレビュー)
  • 内部シーケンシング(ループと遅延) 
  • モーションベクターのサポート

サブグラフを使用すると、要素を再利用できるようになるほか、プロジェクトを整理するのに便利であるため、より規模の大きなプロジェクトのビジュアルエフェクトで不可欠です。サブグラフは、コンテキストメニューで目的のノード/ブロックを選択するか、プロジェクトウィンドウで直接作成できます。 

Visual Effect Graph にシェーダーグラフの統合を追加しました。これにより、シェーダーグラフのシェーダーを作成し、ブラックボードを介してパラメーターを公開して、それらを Visual Effect Graph 内で直接使用することで、VFX の出力ごとにレンダリング動作をカスタマイズできます。

モーションベクターのサポートは、火花などの高速で動くパーティクルを作成するのに特に便利です。モーションブラーポストプロセッシングエフェクトと一体となって機能し、目的の出力のボックスをオンにするだけでアクティベートできます。 

Visual Effect Graph に新しく追加された実験的および製品版の機能の詳細と、それらをご自身のプロジェクトで使用する方法については、Unity の最新のブログ記事を参照してください。

VFX の方法

空のパーティクルシステム

Contexts

In the image above, you’ll notice the four Contexts present in the empty particle system graph.

The flow between the Contexts determines how particles spawn and simulate. Each Context defines one stage of computation:

  • Spawn: Determines how many particles you should create and when to spawn them (e.g., in one burst, looping, with a delay, etc.)
  • Initialize: Determines the starting Attributes for the particles, as well as the Capacity (maximum particle count) and Bounds (volume where the effect renders)
  • Update: Changes the particle properties each frame; here you can apply Forces, add animation, create Collisions, or set up some interaction, such as with Signed Distance Fields (SDF)
  • Output: Renders the particles and determines their final look (color, texture, orientation); each System can have multiple outputs for maximum flexibility

Systems and Contexts form the backbone of the graph’s “vertical logic,” or processing workflow. Data in a System flows downward, from top to bottom, and each Context  encountered along the way modifies the data according to the simulation.

Systems are flexible, so you can omit a Context as needed or link multiple outputs together.

Contexts themselves behave differently depending on their individual Blocks, which similarly calculate data from top to bottom. You can add and manipulate more Blocks to process that data.

Click the button at the top-right corner of a Context to toggle the System’s simulation space between Local and World.

See the Node Library for a complete list of Contexts and Blocks.

VFX の方法

さまざまなブロックの例

Blocks

Blocks can do just about anything, from simple value storage for Color, to complex operations such as Noises, Forces, and Collisions. They often have slots on the left, where they can receive input from Operators and Properties.

VFX How to

Horizontal logic

Properties and Operators

Just as Systems form much of the graph’s vertical logic, Operators make up the “horizontal logic” of its property workflow. They can help you pass custom expressions or values into your Blocks.

Operators flow from left to right, akin to Shader Graph nodes. You can use them for handling values or performing a range of calculations.

Use the Create Node menu (right-click or press the spacebar) to create Operator Nodes

Properties are editable fields that connect to graph elements using the property workflow. Properties can be:

Properties change value according to their actual value in the graph. You can connect the input ports (to the left of the Property) to other Graph nodes.

Property Nodes are Operators that allow you to reuse the same value at various points in the graph. They have corresponding Global properties that appear in the Blackboard.

VFX の方法

ブラックボードとその利用可能なプロパティ

The Blackboard

A utility panel called the Blackboard manages Global properties, which can appear multiple times throughout the graph as Property Nodes.

Properties in the Blackboard are either:

  • Exposed: The green dot to the left of any Exposed Property indicates that you can see and edit it outside of the graph. Access an Exposed Property in the Inspector via script using the Exposed Property class.
  • Constant: A Blackboard property without a green dot is a Constant. It is reusable within the graph but does not appear in the Inspector.

New properties are Exposed by default, and as such, appear in the Inspector. You must uncheck the Exposed option if you want to hide your property outside of the graph, and create Categories to keep your properties organized.

VFX How to

Work with Group Nodes and add Sticky Notes.

Group Nodes and Sticky Notes

As your graph logic grows, use Group Nodes and Sticky Notes to cut down on clutter. With Group Nodes, you can label a group of nodes and move them as one. On the other hand, Sticky Notes operate like code comments.

To create Group Nodes, select a group of nodes, right-click over them, then choose Group Selection from the Context menu. You can also drag and drop a node into an existing Group Node by holding the Shift key to drag it out. By deleting a Group Node, either with the Delete key or from the Context menu, you do not delete its included nodes.

Meanwhile, you can use Sticky Notes to describe how a section of the graph works, plus leave comments for yourself or your teammates. Add as many Sticky Notes as you need and freely move or resize them.

VFX の方法

サブグラフを作成する方法

Subgraphs

A Subgraph appears as a single node, which can help declutter your graph logic. Use it to save part of your VFX Graph as a separate asset that you can drop into another VFX Graph for reorganization and reuse.

To create a Subgraph, select a set of nodes and then pick Convert To Subgraph Operator from the right mouse menu. Save the asset to disk and convert the nodes into a single Subgraph Node. You can package Systems, Blocks, and Operators into different types of Subgraphs.

Creating a Subgraph is analogous to refactoring code. Just as you would organize logic into reusable methods or functions, a Subgraph makes elements of your VFX Graph more modular.

VFX の方法

Visual Effect Graph での編集のレイヤー

Levels of editing in VFX Graph

The VFX Graph supports three different levels of editing:

  • Asset instance configuration: Use this to modify any existing VFX Graph. Designers and programmers alike can adjust exposed parameters in the Inspector to tweak an effect’s look, timing, or setup. Artists can also use external scripting or events to change preauthored content. At this level, you’re treating each graph as a black box.
  • VFX asset authoring: This is where your creativity can truly take charge. Build a network of Operator Nodes to start making your own VFX Graph, and set up custom behaviors and parameters to create custom simulations. Whether you’re riffing off existing samples or starting from scratch, you can take ownership of a specific effect.
  • VFX scripting: This supports more experienced technical artists or graphics programmers using the component API to customize the VFX Graph’s behavior. With VFX scripting, your team can enjoy a more efficient pipeline for managing specific effects, and access advanced features like the Graphics Buffers.
VFX How to

Get the Attribute with an Operator and set the Attribute with a Block.

Attributes

An Attribute is a piece of data you might use within a System, such as the color of a particle, its position, or how many of them you should spawn.

Use nodes to read from or write to Attributes. In particular, use the:

  • Get Attribute Operator to read from Attributes in the Particle or ParticleStrip System
  • Experimental Spawner Callbacks to read from Attributes in Spawn systems
  • Set Attribute Block to write values to an Attribute; either set the value of the Attribute directly or use a random mode (for example, set a Color Attribute with a Random Gradient or Random Per-component Block)

See the documentation for a complete list of Attributes.

Note: A System only stores Attributes when it needs them. In order to save memory, it does not store any unnecessary data. If you read that the VFX Graph has not stored the simulation data from an Attribute, the Attribute passes its default constant value.

VFX の方法

イベントによるパーティクルのスポーンのコントロール。

Events

The various parts of a VFX Graph communicate with each other (and the rest of your scene) through Events. For example, each Spawn Context contains Start and Stop flow ports, which receive Events to control particle spawning.

When something needs to happen, external GameObjects can notify parts of your graph with the SendEvent method of the C# API. Visual Effect components will then pass the Event as a string name or property ID.

An Event Context identifies an Event by its Event string name or ID inside a graph. In the above example, external objects in your scene can raise an OnPlay Event to start a Spawn system or an OnStop Event to stop it.

VFX How to

An Output Event can send messages to the scene.

Output Events

You can combine an Output Event with an Output Event Handler. Output Events are useful if the initial spawning of the particles needs to drive something else in your scene. This is common for synchronizing lighting or gameplay with your visual effects.

The above example sends an OnReceivedEvent to a GameObject component outside of the graph. The C# script will then react accordingly to intensify a light or flame, activate a spark, etc. See the Interactivity section of the VFX Graph e-book for more information on Output Events.

At the same time, you can use GPU Events to spawn particles based on other particle behavior. This way, when a particle dies in one system, you can notify another system, which creates a useful chain reaction of effects, such as a projectile particle that spawns a dust effect upon death.

These Update Blocks can send GPU Event data in the following way:

  • Trigger Event On Die: Spawns particles on another system when a particle dies
  • Trigger Event Rate: Spawns particles per second (or based on their velocity)
  • Trigger Event Always: Spawns particles every frame

The Blocks’ outputs connect to a GPU Event Context, which can then notify an Initialize Context of a dependent system. Chaining different systems together in this fashion helps you create richly detailed and complex particle effects.

The Initialize Context of the GPU Event system can also inherit Attributes available in the parent system prior to the Trigger Event. So, for instance, by inheriting its position, a new particle will appear in the same place as the original particle that spawned it.

VFX の方法

出力イベント属性はスポーンコンテキストからの値を保持します。

マジックブックの動作

Unite Copenhagen のセッションのデモでは、マジックブックエフェクトを紹介しています。これは VFX のサンプルプロジェクトに含まれており、最近追加された機能を使用しています。

VFX How to

Individual Subgraph elements combine to form the Bonfire sample.

Exploring VFX sample content

A VFX Graph is more than the sum of its parts. It requires a solid understanding of how to apply nodes and Operators, along with the ways they can work together.

The VFX Graph Additions in the Package Manager demonstrate several simple graphs, making them a great starting point for learning how to manage particles.

The following sections introduce you to some of the common Blocks and Operators you’ll encounter as you explore the samples provided.

VFX の方法

Noise Operator と Random Operator

Noise and Operators

Procedural Noise helps reduce the “machine-like” look of your rendered imagery. The VFX Graph provides several Operators that you can use for one-, two-, and three-dimensional Noise and Randomness.

VFX How to

Randomness Blocks

Attribute Blocks

Attribute Blocks similarly include the option of applying Randomness in various modes. They can vary slightly per Attribute, so experiment with them to familiarize yourself with their behavior.

VFX How to

Flipbook Nodes

Flipbooks

An animated texture can do wonders to make your effects believable. Generate these from an external Digital Content Creation (DCC) tool or from within Unity. Use Operators to manage the Flipbook Block.

For more information on creating your own Flipbooks within Unity, check out the Image Sequencer in the VFXToolbox section of the VFX Graph e-book.

VFX How to

Physics Blocks

Physics

Forces, Collisions, and Drag are essential to making particles simulate natural phenomena. But don’t be afraid to push the boundaries of what’s real. As the artist, you get to decide what looks just right.

VFX How to

The Bonfire sample graph uses three Subgraphs.

Visual Effect Subgraphs

A Visual Effect Subgraph is an asset that contains a part of a Visual Effect Graph that can be used in another Visual Effect Graph or Subgraph. Subgraphs appear as a single node.

Subgraphs can be used in graphs in the following three ways:

  • System Subgraph: One or many Systems contained in one Graph
  • Block Subgraph: A set of Blocks and Operators packaged together and used as a Block
  • Operator Subgraph: A set of Operators packaged together and used as an Operator

Subgraphs enable you to factorize commonly used sets of nodes from graphs into reusable assets to add to the Library.

Get the free e-book

Our 120-page e-book, The definitive guide to creating advanced visual effects in Unity, guides artists, designers, and programmers using the Unity 2021 LTS version of VFX Graph. Written by experts, it is a reference to help you take on richly layered, real-time visual effects for your games.

VFX ebook

弊社のウェブサイトは最善のユーザー体験をお届けするためにクッキーを使用しています。詳細については、クッキーポリシーのページをご覧ください。

OK