Unity VFX Graph tutorial – Celebrating a random number

Hello! We recently reached 500 followers on twitter
and we thought this would justify some minor celebration! So, to not make it too wild, we posted a gif
with the animation you can see here. And because we like to do tutorial videos
about new unity stuff, we thought: Hey, maybe other people want to celebrate some random
numbers, too? Let’s make a tutorial on how to achieve this
effect in unity! Maybe you already guessed it: This is done
with the VFX graph. And this is how the graph will look in the
end. And this is how the graph will look in the
end. But let’s not go too fast. First, we need a little primer. The VFX graph works on your GPU and because
of that, has no direct access to the scene geometry while it is running. But there are ways to create interactions
between geometry and the VFX graph. Namely these options are vector and distance fields. Vector fields describe how something flows
in 3D space. This is great if you want your VFX particles
to follow a certain path. Distance fields on the other hand define how
far a point is away from the surface of an object. And since it is possible to create a distance
field right in unity, with the help of the Signed Distance Field baker by XRA on GitHub,
we will use this option. Let us start with a fresh Unity project. Do not forget so set it up as an HDRP Project! If you are using the Unity Hub this is as
easy as clicking this preset button here. Once the new project is loaded we can either
disable or remove the example objects which are under Example Assets in the Hierachy. Also disable or delete the directional light. Now we can copy over the contents of the Assets
folder from the SDF Baker we downloaded. Unity will need a few seconds to import everything. If you see a lot of these warnings and errors,
don’t panic. This can be fixed easily. Open up the file SDFVolume.cs in the SDFr
folder and comment out the line at the top. After unity has recompiled everything, the
errors should be gone. A few warnings are left, but those are not
a problem. The next step is to import the model we want
to use. In our case this is the number 500 as an FBX
file. You can create those files in a 3D Modelling
tool of your choice. Create an empty Gameobject in the scene and
give it a name. Then add the model as a child. If you want to know more about the features
of the SDF Baker, now would be a good time to look at the example scenes. Everything you need to know to proceed here
will be explained. First, add the SDF Baker script to the parent
object you just created. Next you can either specifiy the size of the
volume for which you want to create the distance field or click on encapsulate to shrinkwrap
the object. If you get a result that looks like this,
you need to set the model to be read/write enabled. To re-bake the field, enable the mesh renderer
on your model which was disabled by the baker and hit bake again. A rather coarse result is totally fine for
our example but if you want a better representation of your model, increase the Dimensions here
for a higher sample count. Keep in mind that a higher sample count will
increase the baking time exponentially. Keep in mind that a higher sample count will
increase the baking time exponentially When we are pleased with everything we can
switch off the preview mode. If your base model is still visible, simply
switch off the mesh renderer in the object. To create a VFX Graph object we need to add the package. Open up the package manager and search for
Visual Effects Graph, and install the current version. In this case its 5.16.1. Also, update the High Definition Render Pipeline
to version 5.16.1. If your version differs from this there is
a chance that the following process might not work for you. In that case, leave us a comment and we can
figure something out together. Now we can create a VFX Graph, give it a useful
name and drag it into the hierachy. A click on edit opens up the VFX Graph. In here you can see the default graph. We will build our effect from this. First let’s go over the existing parts. Spawn is where everything begins. In here, we define how and how many particles
will be created. In this case it is a constant rate of 10 particles
per second. If we change this, for example to 20, you
can see that particles will be generated faster. When a particle is created, the next step
is Initialization. This happens here. The first block is very important, as it gives
a limit on how many particles can exist at once. For really nice effects, set this to a high
number. After that, our particles get a random velocity
assigned and a definition on how long they can live, in this case between 1 and 3 seconds. In the default case, the update block is empty. This means that after creation and initialization,
the particles are not altered. The Output is another very important step,
without it we would not see anything at all. Similar to the initialization, we find a few
base parameters like the blend and uv mode, a toggle for soft particles and a texture
slot. The next few blocks define how the particles
are rendered. In general this is a quad output, so every
particle is rendered as a quad with a texture on it. The orientation block tells the quads where
they should face. Here they are facing the plane the camera
is on. To define how large the particles are rendered,
a size block is used. In this case we are defining the size over
the life of the particle. It starts out small and grows until it is
removed. In the next block a color is defined with
a gradient that is multiplied with the texture color over the life of the particle. In this case it is just white with a transparent
start and end to make the particles fade in and out nicely. Keep in mind that the graph needs to be recompiled
after each change. You can either leave this on the Auto Compile
setting or manually compile it whenever needed if you have a slower machine or a really complex
graph. let us start to modify this graph to achieve
the effect we showed at the beginning of this video. First, set the Constant spawn rate to 10000
and the capacity to 65000. We want a nice and dense effect! Set the velocity from -1 -1 -1 to 1 1 1 to
get particles flying in random directions. Add a Position AABox Block, to position the
particles in the volume of a box. Set the Size of the box to something matching
the proportions of your distance field. Delete the whole quad output, we will create
a new Lit Quad Output by dragging on this connector. To create new blocks, simply use the space
bar when your cursor is over the output group. Add the blocks Orient Along Velocity, Set
Size and Set Scale. Set the size to .5 for now. Change the channels from XYZ to X and the
scale to 0.1. Now we have long streaks instead of round
particles. next, add a scale over life and set it to
y. This will first stretch the particle when
its created and slowly go back and to zero on the y axis scale. Change the curve so it looks more like this. The max value here is .4 To give it some nice coloring add a Set Color
over Life and change the gradient to something you like. Now, change the texture to something more
suited for the effect, like the Default-Particle texture. You can be a lot more creative here! There are options to use flipbook textures
for example. Check out Unitys VFX Smoke Tutorial to see
how those work. By now the effect is still quite boring. So let us add the distance field we prepared
earlier. For this, we add a block to the update. It is called conform to signed distance field. This block adds a force to the particles so
they are attracted or repelled to or from the surface of the object described by the
distance field. Simply add the DF we created earlier in the
Distance Field slot and change the Transform to values that match the AABox Position. Now we can position the camera to a frontal
view of the effect and ad a rectangular light in front of it to illuminate the particles. Set the intensity to 200000. At this point the basic effect is done. All we need to add is some time constraints
to create the buildup and breakdown we have seen in the beginning of this tutorial. Start by using this Total Time block. We want to periodically repeat the effect
so we add a float parameter and call it Interval. Click on exposed to make it accessible from
the inspector. Drag it onto the canvas and use a modulo with
the TotalTime and the interval. This gives us a repeating counter from 0 to
interval. Now we remap the interval to 0 to 1. This way we can adjust the interval length
and always have a counter from 0 to 1 in this timeframe. The first thing we do with this value is add
a sample curve to adjust the particle size over time. Make the curve look like this. The highpoint is at 0.85. Keep this in mind to sync up all the sample
curve nodes. Directly plugged into the size, our particles
are way to big. Simply add a Multiply node and multiply it
by 0.4. Now we need to adjust the parameters of the
conform to signed distance field part of our graph. namely the stick force and the attraction
speed. The stickforce defines how much force is applied
to a particle to stay near the shape. Lets use another sample curve to define this. Like the size value we also have to multiply
this to get to a decent range. To achieve the last part, the particles flying
away from the distance field, we can use the same sample curve and feed it into another
remap node. As the new range we go from -2 to 1. This way particles will fly away twice as
fast than they were attracted. Like the other values before, we are using
a multiply node as well to scale it to the correct range. Now we can expose two more parameters for
the attraction speed and the stick force. And this completes the tutorial. You can add a few post effects and use a better
texture for the particles, but this is totally up to your taste! Thank you for watching! If you have any questions, feel free to post
in the comments. If you liked the video, leave us a thumbsup
and subscribe!

About the author


  1. Hi Thank you for the tutorial. I have a question about an error. "The type name 'VisualEffect' could not be found in VFXSDFSetup.cs" I am using HDRP 7.1.5 in Unity 2019.3.0f1. Was it because they change the type name of VFXgraph?

Leave a Reply

Your email address will not be published. Required fields are marked *