Image courtesy of Sakura Rabbit
Hi everyone,
In this article, we’ll cover a thorough introduction to the VFX Graph.
This is based on our latest 160-page technical e-book, The definitive guide to creating advanced visual effects in Unity (Unity 6 edition), which guides artists, technical artists, and programmers using the Unity 6 version of VFX Graph. Leverage it as a reference for producing richly layered, real-time visual effects for your games.
Let’s dive in!
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.
Getting started with real-time VFX in Unity
For complex, AAA-level visual effects on high-end platforms, use the VFX Graph to create GPU-accelerated particles in an intuitive, node-based interface.
More specifically, leverage the VFX Graph to:
- Create one or multiple particle systems
- Add static meshes and control shader properties
- Create events via C# or Timeline to turn parts of your effects on and off
- Extend the library of features by creating subgraphs of commonly used node combinations
- Use a VFX Graph inside of another VFX Graph (e.g., smaller explosions as part of another, larger effect)
- Preview changes at various rates and/or perform step-by-step simulation
The VFX Graph works with the Universal Render Pipeline (URP) and the High Definition Render Pipeline (HDRP). It also adds support for the Lit outputs and 2D Renderer available with URP. Check the VFX Graph feature comparison for all render pipelines here.
The VFX Graph requires compute shader support to maintain compatibility with your device. Supported devices include:
- macOS and iOS platforms using Metal graphics API
- Linux and Windows platforms with Vulkan or GLES3 APIs
- Android for a subset of high-end compute capable devices (only with URP)
Core graphics packages
When you install the latest release of Unity, the most recent packages for URP, HDRP, Shader Graph, VFX Graph, and more, are included. Core graphics packages are now embedded within the main Unity installer to ensure that your project is always running on the latest, verified graphics code.
Install sample content from the Package Manager
Additional sample content
If you’re new to the VFX Graph, consider installing the Samples in the Package Manager.
These contain some basic examples for you to explore:
— The new Learning Templates: The Learning Templates sample is a collection of VFX assets designed to help you learn about VFX Graph concepts and features. It’s compatible with both URP and HDRP render pipelines.
The new Learning Templates sample showcases different VFX Graph features.
— The Visual Effect Graph Additions: This includes example prefabs of fire, smoke, sparks, and electricity. Each sample shows a stripped down effect to illustrate fundamental graph logic and construction. Just drag and drop one of the sample Prefabs into the Hierarchy to see them in action.
Samples from the Visual Effect Graph Additions package
Introduction to the VFX Graph
Any visual effect in the VFX Graph is made up of these two parts:
- Visual Effect (VFX) component attached to a GameObject in the scene
- Visual Effect (VFX) Graph Asset that lives at the project level
As Unity stores each VFX Graph in the Assets folder, you must connect each asset to a Visual Effect component in your scene. Keep in mind that different GameObjects can refer to the same graph at runtime.
The VFX Graph Asset and Visual Effect component
The VFX Graph Asset and component
To create a new visual effect, right-click in the Project window and navigate to Create > Visual Effects > Visual Effects Graph.
This opens a creation wizard that allows you to select a starting template. You can begin with one of the default VFX Graphs or choose one of the Learning Templates from the Samples.
Note that the Learning Templates won’t appear in the window unless the additional packages are installed in the Package Manager.
Select a template to create a new VFX Graph.
Choose Create to generate a VFX Graph Asset in the project.
To add the effect to the scene, attach a Visual Effect component to a GameObject and then connect the VFX Graph Asset. There are few ways to do this:
-
Drag the resulting asset into the Scene view or Hierarchy. A new default GameObject will appear in the Hierarchy window.
-
Assign the asset to an existing Visual Effect component in the Inspector. You can create an empty GameObject by right-clicking in the Hierarchy (Visual Effects > Visual Effect) or create a GameObject and then manually add the Visual Effect component.
-
With a GameObject selected, drag and drop the asset into the Inspector window. This creates the Visual Effect component and assigns the asset in one quick action.
The VFX Graph Asset contains all the logic. Select one of the following ways to edit its behavior:
-
Double-click the VFX Graph Asset in the Project window.
-
Select the VFX Graph Asset in the Project window and click the Open button in the header.
-
Click the Edit button next to the Asset Template property in the Visual Effect component.
Three ways to open a VFX Graph
The asset opens in the VFX Graph window, available under Window > Visual Effects > Visual Effect Graph.
The VFX Graph window
Familiarize yourself with this window’s layout, including its:
- Toolbar: To access Global settings, as well as toggles for several panels
- Node workspace: To compose and edit the VFX Graph
- Blackboard: To manage attributes and properties that are reusable throughout the graph
- VFX Control panel: To modify playback on the attached GameObject
The VFX Graph window
Make sure you leave some space in the Editor layout for the Inspector. Selecting part of the graph can expose certain parameters, such as partition options and render states.
Use the Inspector to change certain parameters.
Graph logic
You must build your visual effect from a network of nodes inside the window’s workspace. The VFX Graph uses an interface similar to other node-based tools, such as Shader Graph.
Press the spacebar or right-click to create a new graph element. With the mouse over the empty workspace, select Create Node to create a graph’s Context, Operator, or Property. If you hover the mouse above an existing Context, use Create Block.
A VFX Graph can consist of a complex network.
Opening up a complex VFX Graph can be daunting at first. Fortunately though, while a production-level graph can include hundreds of nodes, every graph follows the same set of rules – no matter its size.
Let’s examine each part of the VFX Graph to learn how they work together.
Systems, Contexts, and Blocks
A VFX Graph includes one or more vertical stacks called Systems. Systems define standalone portions of the graph and encompass several Contexts. A System is denoted by the dotted line that frames the Contexts it consists of.
Each Context is composed of individual Blocks, which can set Attributes (size, color, velocity, etc.) for its particles and meshes. Multiple Systems can work together within one graph to create the final visual effect.
The vertical logic in a graph flows downward.
Select Insert template from the menu dropdown to add a sample System from the existing templates to the current VFX Graph. This can help you get started with some pre-built graph logic. Select one of the Default VFX Graph Templates for a simple System, or choose one of the Learning Templates if it’s similar to your intended effect.
Insert a template from the menu.
If you select the Minimal System template from the Default VFX Graph Templates, you’ll see a barebones System, which includes four parts like this:
A Minimal System from the default templates
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. This example shows more than one Output Context rendering within the same System.
More than one Output Context within the same System
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.
Examples of different 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.
See the Node Library for a complete list of Contexts and Blocks.
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.
Horizontal logic
Operators flow 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. You can also drag an Edge Connection from a property slot and release it in an empty space, which will open the same menu with only the compatible Operators displayed.
Create an Operator Node from the menu.
These Operators from the Bonfire sample, for instance, compute a random wind direction.
How wind direction is determined in the Bonfire sample
Properties are editable fields that connect to graph elements using the property workflow. Properties can be:
- Any Type, including integers, floats, and booleans
- Made from Compound components, such as Vectors and Colors
- Cast and converted (e.g., an integer to a float)
- Local or World space; click the L or W to switch between them
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.
A Force Property in a Block
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.
The Blackboard
The Blackboard utility panel manages Properties and Attributes. To open it, click the Blackboard button in the window Toolbar or use the default Shift-1 shortcut.
To view Properties and Attributes together, select the All tab at the top of the Blackboard. To filter by type, select the respective Properties or Attributes tab.
Properties you define in the Blackboard act as global variables that you can reuse throughout the graph as Property Nodes. For example, you can define a bounding box property once and then apply it across multiple particle systems within the same graph.
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 set to 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.
The Blackboard and its available properties
The Blackboard also manages both built-in and custom Attributes, which you can drag and drop into the graph or create directly from the interface. Each Attribute includes a short description. Hover over an attribute to highlight where it appears in the graph.
See Blackboard Attributes below for more details.
The Sample Skinned Mesh template includes a custom Attribute.
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. You can also use the new default shortcut, Shift + G.
You can also drag and drop a node into an existing Group Node. Hover the node over the Group and release it once the Group highlights. To remove a node from a Group, hold the Shift key while dragging it out.
By deleting a Group Node, either with the Delete key or from the right-click 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.
Each Sticky Note has a title and a body. Right-click in the graph view to create a Sticky Note. Double-click on a text area to edit its content. Set the Theme color (dark/light) and Text Size from the right click menu to organize your notes.
Work with Group Nodes and add Sticky Notes.
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.
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.
Custom HLSL in Unity 6 allows you to implement complex or unique particle behaviors that aren’t easily achievable using the standard VFX Graph nodes. For example, you could create custom physics simulations, particle interactions, or flocking behaviors.
Custom HLSL can create custom behaviors or interactions
Attributes
An Attribute is a piece of data you might use within a System, such as the color of a particle, its position and size, or how many of them you should spawn. Attributes can be read or modified during the simulation to create dynamic effects.
Attributes can be of type float (single-precision floating-point), Vector2, Vector3, Vector4 (2D, 3D, 4D vectors), bool (true/false), or int/uint (integer/unsigned integer).
Attributes are essential for managing the fundamental aspects of your VFX Graph particles. See the Standard Attributes documentation page for a complete list.
Most Attributes are stored per particle, which can increase the memory footprint as the number of particles and Attributes grows. For instance, if you have 10,000 particles and each particle stores multiple Attributes like position, velocity, color, and size, the memory required to maintain this data can become significant.
Monitor and optimize your Attributes by using the System Attribute Summary and Current Attribute Layout displayed in the Inspector when you select a Context:
-
System Attribute Summary: This section provides an overview of all system-level Attributes being used within the current System.
-
Current Attribute Layout: This section shows the Attributes used in the selected Context.
-
Source Attribute Layout: This section shows Attributes used in the source Context (the Context that provides the initial data or input), e.g. Attributes initialized in the Initialize Context that are then used in the Update Context.
For example, in the Trigger Event on Collide template, if you select a Context within the Dart_Spawn System, the Inspector shows:
Use the Inspector to see Attribute usage in the Context.
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.
Events control particle spawning.
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.
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.
An Output Event can send messages to the scene
Event attributes
Use Event Attribute Payloads to pass data like 3D position or color along with the Event. These Payloads carry Attributes that implicitly travel through the graph where you can “catch” the data in an Operator or Block.
You can also read Attributes passed with Spawn Events or Timeline Events. The Set SpawnEvent Attribute Block modifies the Event Attribute in a Spawn Context.
To catch a Payload in an Initialize Context, use Get Source Attribute Operators or Inherit Attribute Blocks.
However, it’s important to keep these caveats in mind when using Event Attributes:
-
Regular Event Attributes can only be read in the Initialize Context. You cannot inherit them in Update or Output. To use the Attribute in a later Context, you must inherit and set it in Initialize.
-
Output Event Attributes only carry the initial values set in the Spawn Context. They do not catch any changes that occur later in the graph.
See Sending Events in the Visual Effect component API for more details.
Output Event Attributes carry values from the Spawn Context
UI improvements in Unity 6
Unity 6 includes several quality of life improvements and updates to the VFX Graph UI.
Node search
Creating nodes or blocks now uses a hierarchical tree view, making it easier to browse the node library. Enhancements include custom colors and a favorites folder for a more efficient and personalized search experience. Use the advanced search filtering to select from the available nodes.
The new side detail panels also display any node sub-variants (e.g., Output Particle Unlit Octagon and Output Particle Unlit Triangle are sub-variants of Output Particle Unlit Quad). You can toggle the button to show sub-variants to control their visibility. Disable it to see only the most common nodes, or enable it to access all available variants.
Creating nodes or blocks adds a side panel and search filtering.
Activation ports
A Block has a special activation port, located on the top left next to its name, which is linked to a boolean property. This port allows you to control whether a Block is active.
You can manually toggle the Block on or off, or connect graph logic to the port to control when the Block should be active. This allows you to implement different behaviors or states per particle within the same system.
Note that statically inactive Blocks are grayed out and automatically removed during compilation, resulting in zero runtime cost.
Each block includes an Activation port.
New VFX Toolbar
The VFX toolbar has been simplified and now includes new options for quick access to documentation and samples.
The VFX Toolbar has been simplified
Keyboard shortcuts
The Shortcut Manager now has a VFX Graph category that lets you modify the shortcut command available in the Visual Effect Graph window. New shortcut commands have been added to speed up the VFX artist’s workflow.
The Shortcut Manager now has a VFX Graph category.
Exploring VFX sample content
A VFX Graph is more than the sum of its parts. It requires a solid understanding of how to apply each Node and Operator, along with the ways they can work together.
Two samples, available in the Package Manager, can help show these features in context: The VFX Graph Learning Templates and the VFX Graph Additions.
Install the sample content from the Package Manager.
The VFX Graph Learning Templates showcase a number of techniques. This collection of education samples can help you explore a specific aspect or feature set of VFX Graph.
The sample content is compatible with both URP and HDRP projects, for VFX Graph versions 17.0 (Unity 6) and later.
Get started using the VFX Graph Learning Templates.
Use the Scene view to move around freely or the Game view to focus on each effect. The Sample Showcase Window in the Inspector displays the corresponding information, with quick-access links to the documentation or to navigate between effects. Each VFX asset includes embedded notes and explanations to guide you.
Navigate each VFX Graph using the Sample Showcase Window.
The VFX Graph Additions in the Package Manager demonstrate several simple graphs, making them a starting point for learning how to manage particles.
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.
Noise and Random Operators
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.
Randomness Blocks
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.
Flipbook Nodes
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.
Physics Blocks
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.
The Bonfire sample graph uses three Subgraphs.
VFX Graph Learning Templates
If you’re still new to VFX Graph, this collection of VFX Graphs is the best place to start. The Learning Templates are composed of various real-time effects, each here to teach one or more aspects of VFX Graph.
The graphs are small and focused, making them ideal learning samples. Dive into each template to master a new technique or use it as a starting point for your own effect. Each graph comes with detailed notes to help you understand their construction.
The Learning Templates are available from the wizard when creating a new VFX Graph, or you can import them via the Package Manager as a complete sample scene for either URP or HDRP.
Use the VFX Samples Showcase window to navigate the samples.
The Samples Showcase window.
If you want to take a tour of the VFX Learning Templates, make sure to check out the VFX Graph Learning Templates tutorial or the VFX Learning Templates chapter in the Introduction to advanced visual effects for advanced creators (Unity 6 edition) e-book.
More resources
- E-book: The definitive guide to creating advanced visual effects in Unity (Unity 6 edition)
- Video tutorial: Create advanced visual effects in VFX Graph: Decals | Unity
- Video tutorial: Create advanced visual effects in VFX Graph: A portal effect | Tutorial
- Documentation: Learning Templates Sample Content
Thanks for reading! We hope you find this article useful.
As usual, let us know if you have any feedback on the updated version of the VFX e-book or the VFX Graph Learning Templates video tutorial.