Create particle spawning positions with Visual Effect Graph

Trigger effects between particles with Visual Effect Graph

Challenge: Create a Firework Effect using a GPU Event

Integrate Shader Graph into Visual Effect Graph

Challenge: Use a GPU event to spawn the rocket trails

Creating Fireworks with VFX Graph and ShaderGraph - Recorded Learn Live Session

VFX_201_ProjectFiles.zip

In this project, you will learn how to apply and configure some of the key VFX properties in Unity’s Visual FX Graph tool. You will utilise GPU events to create realistic fireworks effects, and you will learn how to integrate Shader Graph with Visual Effects graph to enhance the look and feel of visual effects.

Suggested Skill Level & Prerequisite Knowledge - It is expected participants should already have some understanding of the following:

Unity Editor level: Beginner to Intermediate

Creating fireworks with VFX Graph and ShaderGraph

39ef9b9a-5fd6-578c-8b86-78e608c7352d:IJ50VM7ryBj2kIwUvpGfub

Introduction

Before you begin

Add GPU Events to an effect

Configure GPU Events

Next steps

With Unity’s Visual Effect Graph, you can trigger particles to spawn by using events. As an extension of this, you can trigger events using other systems. 

In this tutorial, you’ll learn what GPU Events are, explore their different blocks, and see an example of their use. 

Using a fireworks effect as an example, you will also learn how GPU Events can be applied in the systems of a fireworks effect.

Games

Film

Automotive

Visual Effect Graph’s event system communicates the starting and stopping of systems within an effect. As an extension of this, GPU Events in one system allow you to spawn particles from another system using triggers that are called inside an Update Context. GPU Events are blocks that communicate between two systems.

GPU Events can only be connected to one system, but they can be called through one of three ways: when a particle dies, always (every frame the update loop is called), and over time (setting a value over a certain timeframe). An advantage of GPU Events is being able to pass information from particles in one system to another. 

Passing information between systems allows you to trigger new events at certain times, which adds realism to effects. With the fireworks example, GPU events can trigger new explosions when the original fireworks die (Figure 01). 

Figure 01: The completed effect

Before you begin this tutorial, make sure you have the High Definition Render Pipeline installed in your Unity project. The Universal Render Pipeline is compatible with the Visual Effect Graph, but has limited features due to the performance limitations of mobile devices. 

When you install the HDRP, the Visual Effect Graph package is automatically installed. Make sure it’s installed in your project by opening the Package Manager, searching for and locating Visual Effect Graph.

You also need to have the Experimental Operators/Blocks option ticked in Edit > Preferences > Visual Effects on Windows or Unity > Preferences > Visual Effects on Mac.

For an introduction to Visual Effects Graph, see Introduction to the VFX Graph.

The guidance in this tutorial can be applied to your own uses of particles in Visual Effect Graph. You can follow the example in this tutorial by importing the Firework Sample Package into your project and using the tutorial fireworks effect. 

Particle effects in Visual Effect Graph have an Update Context (Figure 02).  

The Update Context is where GPU Event trigger blocks are added.

To add a GPU Event trigger to an Update Context, select the Update Context and press space to expose the search menu. Type trigger into the search box to show all of the available trigger event blocks. 

In the fireworks example, the effect is already using a Trigger Event Always block to trigger another system, which is spawning the trail on the fireworks. This block’s count is set to 4, so every time an update happens, the first system triggers the GPU Event system to spawn four particles.

The explosions in the fireworks example are already connected to GPU Events, but you need to link these to triggers in the main source particle system. Figure 03 shows what the fireworks effect looks like with the trails being spawned by the GPU Event system.

To add a GPU Event instead of a Spawn Context, drag the input pin upwards from your Initialize Context and press space to expose the search menu. Type GPU Event into the search box and the GPU Event node will appear in the list.

Figure 02: The Update Context without any additional triggers

Figure 03: How your effect should look before starting the tutorial 

To link GPU Events to the main source particle system:

Select the Update Context and press the space bar to expose the Search Menu. Type the word trigger to show all of the available trigger event blocks that you can choose from. 

Select Trigger Event on Die to apply this block to the Update Context. Using your mouse, drag the evt (Event) output connection to the GPU Event labeled Flower to create a flower-style particle effect. This system already has three other GPU events linked to it, so by making this connection, you are actually adding four outputs to your effect. When the effect is complete, there will be seven outputs (Figure 04).

At this stage, there is only one new instance of the explosion when the trigger is called, so the firework does not yet feature the flower-style effect. To achieve this effect,  increase the Count value on the trigger block. With a Count value of 64, each firework explosion has a flower effect (Figure 05). 

In the main firework Update Context, the systems being triggered by an Event has blocks labelled with Inherit in their Initialize contexts (Figure 6). This is the data that each system receives, or inherits, from the first firework. For example, the flower explosion is inheriting Position and Color from the first firework system. This means that the Graph will spawn the flower particles where the original firework particle dies and apply the same color. You can pass other types of data using Inherit blocks.

There are additional options available to enhance the effect further, such as adding a soft smoke background. To do this:

Add another Trigger Event on Die block in the same Update Context with a Count value of 1. 

Connect the new block’s event output to the systems titled Smoke on Explode and Base Impact Flash.

Each of the explosions will now feature a soft smoke background. This happens once for each explosion because there is a count value of 1 (Figure 07).

Figure 04: How your graph will look after completing the last steps (the whole graph is very big, so this only shows the initial system connections)

Figure 05: One of the fireworks explosions after increasing the event trigger count to 64

Figure 06: The Initialize Context for the flower particles triggered with a GPU Event

Figure 07: One of the fireworks explosions with a triggered smoke explosion 

In this tutorial, you have learned how to implement GPU Events and trigger those events between systems within the same visual effect. And within those events, you can now pass data for the new particles to inherit.

Although fireworks provide a useful example to demonstrate GPU Events, these events can be useful for a range of different effects, such as water droplets that create splashes or pieces of debris that emit sparks and smoke. GPU Events are an excellent tool for turning your basic systems into more detailed visual effects.

Trigger effects between particles with Visual Effect Graph

1. Introduction

2. Before you begin

3. Add GPU Events to an effect

4. Configure GPU Events

5. Next steps

Complete this tutorial