Integrate Shader Graph into Visual Effect Graph

1. Introduction

This tutorial was verified using Unity 2019.4.9f1 LTS and Visual Effect Graph 7.3.1.

With Unity’s Visual Effect Graph, you can add a Shader Graph file to any of the Output Contexts, provided that the active master node in the Shader Graph is a Visual Effects node.

When you set properties to be exposed in Shader Graph, you can access and change the values per particle inside of your Visual Effect Graph. This opens up a lot of opportunities for complex visual effects with lots of customization.

This tutorial uses a simple Shader from Shader Graph that generates the smoke from fireworks created in Visual Effects Graph and masks the particles using an image inside the Visual Effect Graph (Figure 01).

Figure 01: Fireworks effect with smoke particles masked from within a Shader Graph

2. Before you begin

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

Before you begin this tutorial, install the High Definition Render Pipeline (HDRP) 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. To make sure it’s in your project, open the Package Manager, search for and locate 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.

Figure 02: Preferences window with Experimental Operators/Blocks enabled

The guidance in this tutorial can be applied to your own uses of particles in Visual Effect Graph. To follow the example used in this tutorial, import the Firework Sample Package into your project.

3. Integrate Shader Graph into a Visual Effect

As the focus of this tutorial is on the implementation of Shader Graphs within a Visual Effect, we will not cover the Shader Graph details or creation.

To integrate Shader Graph:

1. First, create a new VFX Shader in Shader Graph, or with an existing Shader Graph, ensure that the master node is the Visual Effects Master. Right-click on the node and ensure that it’s set to active. Figure 03 shows a shader graph output with an unlit shader set as active:

Figure 03: The output master node for the Shader Graph

Note: With an unlit Shader, you have two parameters to hook into, Color and Alpha. Selecting Lit in the node’s settings gives you access to more parameters. Access to more parameters allows for more complex Shaders, though this will benefit you only if your output is also using a Lit particle.

2. For the parameter values you want to have access to inside of your visual effect, create properties for them and make sure the exposed option is enabled.

In the fireworks example, Vector1, Color, and the mask Texture (Texture 2D) are exposed (Figure 04).

Figure 04: The Shader Graph we will use inside of our visual effect, with exposed values on the left

3. In your Visual Effect Graph, locate the Output Context that you want to use with the Shader Graph.

The Output Context has a Shader Graph parameter into which you can drag and drop your Shader Graph file. Once you’ve done this, your exposed parameters will appear inside your Output Context (Figure 05):

Figure 05: The Output Context of smoke with the new Shader Graph parameters

4. Modify the Shader Graph parameters to add functionality.

For the fireworks example, there is an animation curve over the lifetime of the particle to control the opacity of the smoke. For the color, the example uses a source that’s been passed through a GPU event. The mask image is a black and white Unity logo. These parameters illustrate some of the possibilities with Shader Graph integration (Figure 06).

Figure 06: The smoke Output Context with the new Shader Graph parameters connected to values

Here is the resulting fireworks effect with the Unity logo being used as a mask on the smoke (Figure 07):

Figure 07: The completed firework effect

4. Next steps

In this tutorial, you have learned how to implement Shader Graph into your visual effects. You have seen how to expose and modify different parameter values inside a visual effect. More complex Shaders provide a platform for exploiting the creative applications of the integration as you experiment with ways of controlling Shader Graph parameters in your visual effects.

An example of how to use this integration is dissolving spheres to create a toon explosion or even using the same geometry and Shader to dissolve bubbles in a thick liquid. Another example of this is burning/dissolving paper, using the Visual Effect Graph to control the spawning of the pages and other functionalities (Figure 08).

Figure 08: Magic book example using Shader effects inside the Visual Effects Graph