Introduction to the Visual Effect Graph

If you have any experience with Unity, you’ve likely used its Particle System component to add particle effects to a project.

Particle effects are a great way to add polish to interactive experiences. Unity’s Particle System makes adding and customizing particle effects simple and straightforward.

Unfortunately, intricate particle effects can affect a game’s performance, limiting the types of simulations you can create.

This is where the Visual Effect Graph comes in. It allows for complex simulations using millions of particles. Yes, you read that right: millions of particles! Its feature-rich visual interface makes it easy to create and experiment with stunning particle effects.

In this tutorial, you’ll explore some of the endless possibilities offered by Unity’s Visual Effect graph.

Getting Started

This tutorial uses Unity version 2019.3. If you haven’t installed this version of Unity, you can use Unity Hub to install and manage multiple Unity versions across your projects.

Use the Download Materials button at the top or bottom of the tutorial to download the starter and final projects. Extract them, then open the IntroVFXGraph Starter project using the Unity Editor.

Take a look at Assets/RW. Here you’ll see your project folders. The main focus will be on:

• Prefabs: Find your pre-built GameObjects here.
• VFX: You’ll store the Visual Effect Graphs you create here.
• Scripts: Here, you’ll find custom scripts.
• Scenes: Contains the main game scene.

Double-click the scene file MainScene in RW/Scenes, to open it. Next, press Play to see the project in action.

You’ll see a castle with towers you can select. The UI has four Tower Upgrade buttons and three counters to track materials in the top-left corner.

Selecting a tower and clicking an upgrade triggers an animation that pools the necessary resources in the middle of the screen.

When the resources have finished pooling, they disappear and the selected upgrade appears on the tower. Once you’ve upgraded a few towers, stop the playback.

The goal of this tutorial is to spice up the upgrade process with some cool visual effects, making it more interesting and engaging.

The first step toward this goal is to understand the Visual Effect Graph, what it’s capable of and its workflow.

What Is the Visual Effect Graph?

The Visual Effect Graph is a specialized tool that allows you to create complex visual effects using an intuitive visual interface.

This tool, along with the Visual Effect object you’ll add to your scene, work much like the particle system.

You can configure properties over the lifetime of a particle, how the particle is rendered and which forces act on each particle.

The main difference between the two systems stems from the hardware used to simulate the effect. The particle system uses the CPU, while the Visual Effect Graph uses the GPU.

This difference is important because the GPU is designed to perform many small mathematical operations at the same time. You need this ability to render graphics. As it turns out, this also makes the GPU ideal for handling the mathematics behind complex visual effects.

However, even with the power of the GPU behind it, the VFX Graph is not always an effective substitute for the particle system.

Here are a few key differences to keep in mind when trying to decide which system is right for your project:

• VFX particles aren’t affected by the physics engine, only by physical forces specified in the graph. This means that VFX particles won’t collide with physics objects or respond to global settings like gravity.
• Controlling a visual effect with scripts is more difficult — but not impossible!
• The VFX graph runs on the High Definition Render Pipeline (or HDRP), which requires a higher-end GPU. It’s not ideal for low-end PCs or mobile devices.

Now, it’s time to take your first look at the Visual Effect Graph by creating one and exploring its features.

Exploring the VFX Graph

Create a Visual Effect Graph in the RW/VFX project folder by right-clicking and selecting Create ▸ Visual Effects ▸ Visual Effect Graph. Name the new Visual Effect Burst, because you’ll use this graph to create a burst effect later in the tutorial.
Double-click Burst to open the VFX Graph editor. It should look like this:

This interface uses a system of nodes and blocks to construct the order of operations of a visual effect and to perform calculations to manipulate particle properties.

There are currently four context nodes, or contexts for short.

Each context contains blocks, which define particle properties during specific steps in the simulation. The steps execute in the order they’re listed. Blocks are specific to their context. That means, for example, you can’t add a spawn rate block to an Update or Output context.

To the side of your graph, there’s an empty box called the Blackboard, which is labeled with the name of your Visual Effect, Burst. The Blackboard stores references to variables that you can use throughout a Visual Effect Graph. This is useful when building a complicated graph that uses a specific value in many different calculations.

You can also expose these variables to the editor and to C# scripts, which allows you to manipulate the Visual Effect during the game’s runtime.

With all this in mind, here’s a quick breakdown of what’s currently in the project:

• The Spawn Context: The first step of the simulation, which spawns the particles. It includes blocks such as Constant Spawn Rate, Periodic Burst and Single Burst.



• The Initialize Particle Context: Sets the initial state of the particles such as lifetime, initial position and initial velocity. Currently, the particles have a random upward velocity and a random lifetime between 1 and 3.



• The Update Particle Context: Handles updates to particles that occur over time including color, size and which physical forces act on each particle.



• The Output Particle Quad Context: Controls the rendering of the particles. In this case, the particles render as quads, which are flat, square sprites.

  

  The Output Particle Quad is one of many output contexts that allow you to render particles in many forms, even as primitive 3D objects. In this context, you orient the particles to face the main camera. Their color and size will change over the lifetime of each particle.

You may have noticed that there are no other nodes in the default VFX Graph template. For simple effects, extra nodes outside of the contexts aren’t always necessary. When you build your two visual effects, you’ll get a better idea of how you can use each approach.

Mouse and Keyboard Shortcuts

You can navigate much of the interface with the mouse, but here are some handy shortcuts:

Mouse:

• Left-click: Select.
• Left-click and drag: Select multiple objects.
• Shift-Left-click: Lasso selection.
• Right-click: Open the context menu for the hovered node.
• Middle-click and drag or Alt-Left-click: Move the graph.

Keyboard:

• Space: Opens the Node menu if hovering over an empty space or the Block menu if hovering over a context.
• A: Zooms out to show the entire graph.
• F: Focuses the view on the selected node.
• [ and ]: Switches to the next or previous block or context in the graph.
• Tab: Cycles through input fields.

Now that you have a basic understanding of the interface and its workflow, you’ll add a visual effect to your scene and configure its properties.

Creating a Simple Particle Burst Effect

Start by dragging Burst from RW/VFX into the Scene Hierarchy. This creates a new GameObject for your visual effect.

Now, set Burst’s transform to the scene’s origin: (X:0, Y:0, Z:0) then focus the scene view on it. You’ll see a default particle effect in the scene.

Next, open Burst’s VFX Graph pane and change its configuration to spawn particles only once instead of in a continuous stream.

Click the Spawn context and press Space to bring up the block menu. Select Spawn ▸ Single Burst (Spawn), then delete Constant Spawn Rate and set Single Burst‘s Count to 500.

As you may suspect, this means that 500 particles will simultaneously spawn at the start of the simulation. It should be quite a display!

Initializing the Particles

In Initialize Particle, set the capacity to the spawn count: 500 particles. This lets the main simulation loop accept the maximum number of particles.

The particles should fly out in all directions from the spawn point at the start of the effect. You don’t want the distribution to be too uniform, or the burst will look like a growing dome or sphere.

To create varied outward movement, use Set Velocity Random, which is already in Initialize Particle. You can also find this block by selecting the context, pressing Space and selecting Attribute ▸ Set ▸ Set Velocity Random. Don’t confuse Set Velocity Random with Set Angular Velocity Random!

You can also use the search bar to locate any block.

Now that you’ve found the right block, you’ll set it so the particles’ movement doesn’t look too uniform.

Setting Random Velocity

Set Velocity Random takes two Vector3 values, which define a range for the randomization. For your burst, the particles should fly outwards and upwards from the origin.

Set A to (X:-3, Y:0.1, Z:-3) and B to (X:3, Y:3, Z:3). This ensures that each particle will fly up and out from (X:0, Y:0, Z:0), but at different velocities, creating a scattered burst.

Testing your effect is a little difficult since it only triggers when certain values change. This isn’t ideal if you want to observe your effect immediately after a change. To trigger the burst at the press of a button, you’ll create an Event context.

Right-click the empty space in the graph and select Create Node ▸ Context ▸ Event. The event is labeled OnPlay by default. Connect it to the Start slot on Spawn. Now, you can trigger the effect by clicking the Send button on Event.

Adding More Variation With Turbulence

Burst looks good so far, but you can add even more variation to its behavior with a physical force, like turbulence. Select Update Particle, press Space, and select Force ▸ Turbulence (Force).

Set the Intensity to 5.78.

Now, when you trigger the effect, the particles fly out like before, but turbulence disrupts their trajectory. This makes for a much more interesting effect!

Now that your shape is correct, you’ll make some changes to the size and color of the particles.

Changing the Particles’ Size and Color

Your effect looks good, but you can make it even more interesting with just a few tweaks.

In Output Particle Quad, set the Main Texture to Default-Particle. Don’t confuse this with DefaultParticle. Next, click the line graph in Set Size Over Life to open it.

You want to reverse this graph, to make particles get smaller over their lifetime instead of larger. To do this, edit the first key to (X:0, Y:0.5) and the second key to (X:1, Y:0.08).

Next, you’ll give your particles a warm, fiery glow. In Set Color Over Life, set the first color in the gradient to a deep orange with an intensity of 2 and the last color to a bright yellow with an intensity of 1.2.

Your Gradient editor should look like this:

Your Color editor(s) should look like this:

Finally, your Output Particle Quad context should look like the following:

And your effect is complete!

Finally, drag Burst from the Hierarchy into RW/Prefabs/VFX, then delete it from the Hierarchy. You’ll use this later.

Save your changes, it’s time to work on a different effect.

Setting up the Complex Particle Effect

Your next particle effect is a stream of particles that move from a pool of resources to the top of the tower you’re upgrading.

In RW/VFX, create a new Visual Effect called MaterialStream and open its graph.

Start by creating two Event contexts called OnPlay and OnStop, then connect them to the start and stop slots on Spawn.

Next, in Spawn, delete Contant Spawn Rate and add Single Burst, then set the count to 10000.

In Initialize Particle, set the Capacity to 10000.

Now delete all blocks except Set Lifetime Random. Set the A value of Set Lifetime Random to 4 and the B value to 6.

Add a Set Size block and set its value to 1.

Here is what your graph should currently look like:

For your next step, delete the Output Particle Quad context and replace it with an Output Particle Lit Sphere context. This sets each particle to render as a 3D sphere.

Now, add a Set Color to this context and set it to an RGB value of (R: 255, G: 255, B: 255). Connect the output from the Update Particle context to the input of the Output Particle Lit Sphere context.

This is what you should now have:

Before moving on, take a look at this effect to better understand what needs to happen next.

• You want the particles to move from their respective resource icon to the tower.
• The particles should move in a non-uniform way, so they won’t use a straight line to get to their destination.
• When they arrive at the tower, the particles will take the shape of a sphere.
• While in the sphere formation, particles will shift momentarily, then dissipate.

Now that you’re clear about the effects you want to create, move on to building them.

Parameter Binders

You’ll use the Blackboard to expose variables to the Unity editor and to MonoBehaviour scripts. For this effect, you want to set two positions so your particles can travel between them: A Start Position, which is the resource icon location and a Tower Position, which is the tower you’re upgrading.

Start by clicking the + icon on the Blackboard to create a new variable and selecting Vector3 from the menu. In the Inspector, name this variable StartPosition. Then repeat the same steps, naming the next variable TowerPosition.

In the Inspector, check Exposed for each variable. This gives you access to the variables outside the graph.

To access these particles in a script, call one of the visual effect’s many Set methods. For example, to set the Vector3 value, you would use:

yourVisualEffect.SetVector3("VariableName", newVector3Value);

You’ve now defined your two positions. You just need to get your particles to move between them next!

Controlling Particle Movement

To move particles from the StartPosition to the TowerPosition, you’ll construct your first VFX operation using nodes. This operation will apply a Bézier curve to the movement of the particles, extending over the lifetime of each particle.

In a large, empty space to the left of the main graph, create an Age Over Lifetime node by right-clicking the empty space and selecting Create Node ▸ Operator ▸ Attribute ▸ Age over Lifetime. Drag StartPosition and TowerPosition onto the graph underneath it.

Next, create a Sample Curve node, an Add node and a Sample Bezier node. You can easily find these nodes by typing their names in the search field at the top of the Create Node window.

Once you have the nodes, set Add to Vector3 by clicking the gear in the top-right of the node and setting both values to Vector3.

Connect the nodes in the following way:

1. Connect Age Over Lifetime to the Time input of Sample Curve and connect the s output of the sample curve to the T input of Sample Bezier. This binds the the duration of the bezier curve to the lifetime of the particle.
2. Connect StartPosition to the B input of Sample Bezier. This sets the initial position of the curve to the resource pool in the center of the screen.
3. Connect TowerPosition to the B input of Add, and connect the output of Add to the C input of Sample Bezier. You will use this operation to create midpoint for the Bezier operation.
4. Finally, connect TowerPosition to the D input of Sample Bezier. This sets the final position of the curve.

When complete, the operation as a whole should look like this:

Set the Y value of Add to 6. This creates a point above the tower to make the arc skew upwards.

Click the graph in Sample Curve and configure it with just two points on the curve. (remove the middle node). The first node will sit at (X: 0, Y: 0) and the second node should sit at (X: 0.2, Y: 1.0).

This curve ensures that each particle will reach the end of the curve during the first quarter of their total lifetime. This is necessary because later operations of this VFX Graph will take place after the particles have reached the selected tower.

To use this operation to affect the movement of each particle, you’ll have to lerp each particle’s position between StartPosition and the value calculated by this operation.

Copy the Age Over Lifetime and Sample Curve nodes and move them to the empty space below the Bézier operation.

Create a Lerp node and configure it to accept Vector3s. Leave the S value as a float.

Drag a new reference to StartPosition onto the graph, position it to the left of Lerp and connect all of the nodes as follows:

• Start Position ▸ Lerp X value.
• Sample Curve S value ▸ Lerp S value.
• Age Over Lifetime t value ▸ Sample Curve Time value.

Create a Set Position block in Update Particle and connect the output of the Lerp node to its position field.

As a quick checkpoint, your graph should look like the following:

At the moment, you could attach the Bézier operation to this Lerp, which would move the particles in an interesting way. However, you can take things a step further by adding a noise operation, which adds chaos and makes the effect more interesting. You’ll do that in the next step.

Adding Noise

Noise, in the context of computer graphics, refers to applying randomization to create a unique and unpredictable effect. For this visual effect, you’ll apply noise to the particles so they appear to buzz around while they travel to the selected tower.

Create the following nodes in the space above the Bézier operation (you may want to reposition things first to make some room):

• Random Number
• AppendVector
• Lerp (Float)
• Multiply
• Age Over Lifetime
• Sample Curve

Set the Min of Random Number to -1 and the Max to 1.

Next, create two copies of Random Number. Set the seed of each Random Number to 1, 2 and 3, respectively.

Configure AppendVector to accept three floats. You can add a new float to its values with the + icon at the bottom of the node.

Now, configure Multiply to accept a Vector3 and two floats. Rename the first float, B, to Scale and set it to 2.

Set the Y value of Lerp to 3, then set the Sample Curve to a standard upward curve.

Connect the new nodes as follows:

• Connect the 3 x Random Number nodes to AppendVector‘s A, B, and C inputs.
• Connect AppendVector‘s output to the Multiply‘s A input.
• Connect Age Over Lifetime‘s output to the Sample Curve Time input.
• Connect the output of Sample Curve to the S input on Lerp.
• Connect the Lerp output to the Multiply C input.

For your next step, you need a way to use this noise operation with the Bézier operation. So create a new Add node and configure it to accept Vector3 inputs.

Connect the output from the Multiply node and the Position output from the Sample Bézier node to input slots from the new Add node. Then connect the output from the new Add node to the second input of the Lerp node that’s connected to the Set Position block in the Update Particle Context.

You should end up with a node configuration like this (click the image to open it up in a larger view if you want to see the detail):

That’s it! Save your progress. Your particles will now travel to their destination in a noisy, Bézier curve formation. :]

Understanding Point Caches

One useful tool for setting particle positions is the point cache. A point cache is a map of points based on the mesh of a 3D object. Setting the particle positions using a point cache allows them to take the shape of any 3D object, as shown in this VFX Graph sample scene from Unity:

For your complex particle effect, the particles will form a sphere when they reach the tower. To achieve this, you’ll need a custom point cache.

Creating a Point Cache

In RW/VFX, create a folder called pCache, which is where you’ll store the point cache you generate. Next, open the Point Cache Bake Tool from Window ▸ Visual Effects ▸ Utilities.

Open the Select Mesh window by clicking the Mesh field and selecting the Sphere mesh.

Click Save to pCache File and save it to RW/VFX/pCache.

That’s all it takes to create a custom point cache! Next, you’ll put your construction to good use.

Using Point Caches

In the Material Stream graph, add a Set Target Position from Map block to the Initialize Particle context.

Then, create a Point Cache node to the left of Initialize Particle. Set its Point Cache value to the Sphere point cache you created in the previous step. Next, connect AttributeMap: Position to Attribute Map on Set Target Position from Map.

Now, drag TowerPosition into the graph and connect it to the Value Bias field on Set Target Position from Map. This sets the tower’s position as an offset to the point cache position.

Now that you’ve set the target position, you can use this value in an operation that will move your particles to the point cache once they’ve reached the tower.

For this operation, you need five new nodes. Position these in new, empty area of the MaterialStream graph editing window.

• Age Over Lifetime
• Sample Curve
• Get Attribute: position
• Get Attribute: targetPosition
• Lerp

Configure Lerp to take two Vector3s and set the value of Sample Curve to look like this:

Set the first key to (X:0.25, Y:0) and the second key to (X:0.5, Y:1.0). Then, connect the nodes as follows:

• Age Over Lifetime output to Sample Curve Time input.
• Sample Curve s output to Lerp S input.
• Get Attribute: position output to Lerp X input.
• Get Attribute: targetPosition output to Lerp Y input.

Once you’ve connected the nodes, add a new Set Position block to Update Particle, underneath the first one. Then connect the output of Lerp to its Position slot.

This creates a transition between the current position of each particle and the point cache, which you set in Initialize Particle.

You’re almost done setting up your particles’ movement. There’s just one more step to make your effect look great.

Adding a Size Change to the Particles

For your final touch, you’ll make the particles disappear more realistically. To start, add a Multiply Size to Output Particle Lit Sphere.

Create an Age Over Lifetime and a Sample Curve. Connect them like so:

• Age Over Lifetime output to Sample Curve Time input.
• Sample Curve s output to Multiply Size ‘Size’ input.

This is a simple operation that causes the particle size to jump quickly, then slowly fade. This size change, along with the movement noise, will make the particles shift and dissipate as they reach the end of their lifetime.

Save your work. It’s time to add your new effects to the tower upgrades.

Triggering the Visual Effects in the Sample Project

You’re now ready to integrate your Visual Effects, Burst and MaterialStream into the tower upgrade process.

First, drag MaterialStream into the Hierarchy to create a GameObject. Next, drag that object into RW/Prefabs/VFX to create a prefab of it, then delete the object from the Hierarchy.

Adding the Burst Effect

Open UpgradableTower from RW/Scripts and change the code as follows:

public class UpgradableTower : MonoBehaviour
{
    public Material defaultMaterial;
    public Material highlightMaterial;
    public Material selectedMaterial;
    public Transform upgradeContainer;
    public GameObject burstEffect;           // 1

1. Here, you declare a public GameObject called burstEffect.

In SetUpgrade, at the bottom of the method, add a line:

public void SetUpgrade(UpgradeType newUpgrade)
{
    /* ... */

    upgradeContainer.Find(upgrade.ToString()).gameObject.SetActive(true);
    burstEffect.SetActive(true);            // 1
}

1. In this line, you set burstEffect to Active.

Save your changes and return to the editor. Then double-click RW/Prefabs/Castle Parts/UpgradableTower to edit it.

Drag Burst from RW/Prefabs/VFX into the ParticlePoint container.

Then, drag the Burst you just added onto the Burst Effect field of the prefab’s Upgradeable Tower.

Deactivate Burst by deselecting the box next to its name in the Inspector.

Click Play and give it a try!

Adding the Material Stream Effect

Now, it’s time to put your MaterialStream effect in place.

Open ResourcePool from RW/Scripts and change the code as follows:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.VFX;     // 1

public class ResourcePool : MonoBehaviour
{
    [Header("Values")]
    public float moveRate;
    public float moveSpeed;
    public float baseScaleMultiplier;
    public float scaleMultiplierIncreasePerUnit;
    public int unitsPerIcon;
    public float iconSpawnRate;
    public ResourceType type;

    [Header("Prefabs")]
    public GameObject resourceIconPrefab;
    public GameObject materialPoolEffectObjectPrefab;      // 2

    private VisualEffect materialPoolEffect;      // 3

Here are the changes you made:

1. Added a reference to the VFX name space.
2. Declared a public GameObject called materialPoolEffectObjectPrefab.
3. Declared a private VisualEffect variable called materialPoolEffect.

Now, replace all of ShowVisualEffect with the following:

private void ShowVisualEffect()
{
    shouldSpawnIcons = false;
    StopAllCoroutines();

    poolIcon.SetActive(false);

    // 1
    Transform towerUpgradePosition =
        UpgradeCastle.GetSelectedTower().transform.Find("ParticlePoint"); 

    // 2
    GameObject materialPoolEffectObject =
        Instantiate(materialPoolEffectObjectPrefab); 

    materialPoolEffect = materialPoolEffectObject.GetComponent<VisualEffect>();

    // 3
    materialPoolEffect.SetVector3("StartPosition", poolIcon.transform.position); 

    // 4
    materialPoolEffect.SetVector3("TowerPosition", towerUpgradePosition.position);

    // 5
    materialPoolEffect.SendEvent("OnPlay"); 

    // 6
    Invoke("DeactivatePool", 3.0F); 
}

Here’s what the code above does:

1. Gets the transform you’ll use to set TowerPosition.
2. Instantiates a new MaterialStream.
3. Sets StartPosition.
4. Sets TowerPosition.
5. Triggers the OnPlay event.
6. Uses Invoke to deactivate the pool after three seconds, to wait for the particle effect to finish.

Save your changes to the script and return to the editor, then double-click RW/Prefabs/UI/Pool to edit it.

Drag MaterialStream from RW/Prefabs/VFX onto the Material Pool Effect Object Prefab field of the prefab’s Resource Pool.

That’s it! Click Play and admire your hard work! It looks wonderful. :]

Where to Go From Here?

Great job completing this tutorial! If your results aren’t the same, use the Download Materials button at the top or bottom of this tutorial to download the final project files and compare your results.

Now that you’re familiar with the Visual Effects Graph, check out Unity’s VFX Graph Sample Project. It’s full of interesting and complex visual effects that are sure to inspire your next project!

If you’d like to learn more about creating impressive visuals with Unity, check out our Shader Graph in Unity for Beginners. This covers the ins and outs of Unity’s Shader graph, which functions in a similar way to the Visual Effects Graph.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!