Unity VFX Graph - Electric Arc Tutorial

so today we are going to see how to create an electric arc [Music] it doesn't necessarily need to be an electricity arc but it's an awesome technique to create an arc of some kind and since my previous tutorial was about procedural electricity i think this one comes at the right time and as usual this whole project is available patreon page as well as many other projects links below in case you are interested so without further ado let's jump right into this [Music] so as a good rule of thumb let's start by creating an empty game object we can rename it to vfx underscore electric arc just make sure to reset transform and in my case i'm going to push it a little bit above the ground and now we can create a visual effect graph with right click we can also rename it to vfx graph and score electric arc and then we are going to parent this by dragging and dropping to the empty we just created and to open vfx graph we simply need to press the edit button let me just make some room okay so for this particular case you may think that we need a constant spawn rate of particles while in fact we just need a fixed amount of particles let's just set the bounce mode to manual instead of recorded if this box is not visible you will not see the particles by the way so if we don't want a constant spawn rate we can use a single burst we are going to need a fixed amount of particles let's start with 100. every time we press play we see 100 particles in fact we only see 32 because of the capacity let's increase it to 150 for example and the motion of the electric arc is not going to come from the set velocity and in this very particular case we don't need lifetime if we remove this vfx graph will consider the particle to leave forever what we really need is a custom attribute each particle has a lot of attributes we are going to create a new one in the inspector we just need to rename it it's going to be for the progress let's imagine we need something that goes from zero to one or from zero to one hundred percent each particle is going to represent a little bit of that progress and the way we do it is by accessing the spawn index of the particle and dividing these by the total amount of particles which is 100 which means for example if it is the fifth particle being spawn it has an index of 5 and if we divide this by 100 this 0.05 represents 5 percent and why we want this percentage that goes from 0 to 100 or from 0 to 1 because that's what we are going to use for the busy curve so it knows where each particle is going to be for example down here in the set position now we can get the custom attribute we have created we just need to use the same name which is progress it is string based and case sensitive by the way if we were to connect this directly to the set position we would see something very funny which is each particle next to each one in a diagonal because we are connecting this to the to all the axis the x y and z hence the diagonal but we have a better use for this if we sample a bezier curve as you can see this t value goes from 0 to 1 which represents a b c d let's connect it like this and connect the position to the set position and if you look closely as you can see we already have an arc because this simple bezier curve the abcd points represent an arc in space we could for example say that the x is 0 1 2 and 3 while the rest is 0 and we would have a straight line don't forget to set it to world space this l represents local and the w represents world space which means that it's going to be in the origin of the world which is 0 0 0 and then 1 0 0 and then 2 and then 3 and so on as you can see that's why we have a line in the origin of the world and we are going to create vectors for that in a moment this is actually a very big step and a very important one for example now we can say that instead of using a particle we want actually a particle strip which is basically a line and it converts everything to a particle strip except the output so we need to change it to an output particle strip quad we can remove this one and as you can see we have a line each particle now each particle now is part of this line which is awesome because because this allows us to create a very smooth line as you can see if i turn on the shaded wireframe we can control this amount by increasing the count of the single burst for example 200 for example to 200 which is the double we also need to increase the particle per strip count and then we need to divide this by 200 and it's still not perfect because now since it's a particle strip instead of a spawn index we can search for a spawn index in strip because each particle now represents a part of this line and we can access that part specifically as you can see now we have a much smoother line maybe with too much definition you could as well set it to 10 for example and it will become very low poly okay let me set it back to 200 because now we are going to take care of the aspect down here we have a default particle you can use the other default part called this one or create a texture similar to one of these even a square sometimes is better than the default part and the cool thing now is that down here we can control the thickness with the set size and control the color as well with the set color so let's create a property for that and a float to control the thickness default value of 0.1 connected to the set size and the color to the set color and now we can choose for example a blue color or a yellow something like this and increase the intensity that's why it becomes so bright as a matter of fact it becomes so bright because i have a global volume in my scene with the bloom if you want one you can create it with right click for example so now that we have control over the color and thickness now we can create four vectors so we can control the bezier curve and we can rename them to pause 1 pause 2 pause 3 and pause 4. it's very important that you remember these names let's connect to the a b c and d values they are all at zero and the line is going to disappear that's normal but the awesome thing is that now in the inspector when we select this vfx graph we can add a component down here which is a vfx property binder and it will bind in this case a transform a position to a particular object a target the property we want to bind is the position one the pause one and the target we can create an empty rename it to pause one as well as a matter of fact let's create four empties for the pause two post three and pause four you can select an icon so it's more visible in our in your scene by the way let me turn on gizmos and now for example the cool thing i'm just gonna push them to more or less around here the cool thing now is that the target we can say is the pause one we can then add another property binding and i'll transform another position for the pause two and so on for the pause three and pause 4 and now these points in the scene control the bezier curve directly that's how you can have control over an arc we are still missing the electric part but for now you have control over the aspect which is awesome for the electricity part we need to add the position to this in the updated particle strip we need to add something and that something is going to be a 3d noise you can search for a 3d noise we have a few i'm going to pick the value noise 3d because i think that's the one that looks closer to electricity and we have a few options here but these ones represent the noise and then we have this coordinate which simply wants to know the position of the particle and we have that each particle contains an attribute for the position if you connect to the coordinates and then connect this to the at position as you can see we already have a lot of distortion and if you play with the frequency you can have even more distortion until it looks like electricity as well as with the octaves the roughness and so on but if we want to animate this we need the time variable we need to add it to the position before connecting to the coordinates of the volume noise 3d you can search for total time we want the game one and as soon as we connect to the b option this becomes animated and the cool thing is that if we multiply this with a float for example a noise speed well we can have control over exactly that the noise speed and it will look much more electrified it's kind of crazy because at this moment the range is way too high if we set it to 0.1 and minus 0.1 it looks better let's create a float for that a noise power we can open this connect to the x and for the y we can negate this value and it will become minus 0.1 assuming the default value of the noise power is 0.1 by the way we can for example create more properties for the noise frequency the octaves the roughness and so on once you save this in your inspector you will have the possibility to adjust the electric arc however you want i'm going to set the thickness to 0.05 and change the texture to another one because the beginning and the end of this electric arc looks a little bit weird yeah with this texture we get a better result and basically if you have the gizmos on this is how easy you can control the arc now what if we wanted to add some sparks in the beginning or in the end well that would be very simple for example we could start by searching with spacebar for a simple particle system let me just switch the bounce mode to to manual and if you want to tell it to be in the beginning or in the end of the arc or in the middle we need a set position there are several set positions we are going to use the sphere 1 arc sphere because in here we can also if we open this in the transform we have the position and we can tell it where to go i'm gonna assign the position one but for this workout we need to switch this from local to worlds and for example say the radius is 0.1 and for the velocity we are not going to use this block because we have a better one which is set velocity and direction from a sphere as well we want this to be random between something like 5 and 18 more or less this is just an example now you can create some quick sparks to this and then decrease the direction blend all the way to zero so it goes all around 360 as you can see the particles are leaving way too much so let's decrease the lifetime to be between 0.05 and 0.2 or 0.3 increase the capacity to 1000 for example and the rate to 50. and now if we want to take care of the aspect down here we can use a set size random between 0.05 and 0.2 we just need to say the size of our lifetime instead of overwrite this multiply and with this curve so it goes from big to small and then we simply need to stretch this with a set scale random as well between 0.3 and 0.8 in the x and 1 and 2 in the y they are stretched as you can see but they don't look good so all we got to do is orient this particles along their velocity and now all we gotta do is switch the texture to the default particle for example add a little bit of color with a set color we can even use the color for the electric arc we simply need to multiply it for example by three and then down here in the set color of our life we can switch this to multiply so it doesn't overwrite the set color and here we go we have some quick sparks as you can see you can do the same to apply sparks at the end or even in in the middle of the electric arc and besides sparks just like i did you can add a few more things as well with this technique but now you know how to create an electric arc which doesn't necessarily need to be an electricity arc you can use it for different type of things and that's basically it i hope you have enjoyed this tutorial if you want to get access to this project it's a level on my patreons page i want to say a big thank you to each patron for supporting me each month or only one month and a big shout out goes to the top tier patrons which are 3d sorcery adrian biadriski elsandra carvalho austin schneider aviya tobali paonyan krubi dubidu jag marks donald thompson dewitt trump edward chai thanks striker jill's walter goblin plug guillerme trinidad jeffrey wood john nicks casey miller cannon anselm little tai maxim mark annum mograph tech nut sims nail coolant oitsk radioactive bullfrog ramez altaba revnet games toasted butter very soother water bridge will jose will paolian and ingredients your sport is very much appreciated you guys rock and you keep the channel going i hope you have enjoyed this video to anyone watch this i hope to see you in the next video thanks bye [Music]

Channel: Gabriel Aguiar Prod.

Views: 47,455

Keywords: Unity tutorial, unity special effects, unity shader graph, shader graph, unity shader tutorial, electric effect, unity electric effect, shader graph electricity, electricity shader unity, unity electricity tutorial, electricity tutorial, unity electricity, unity electricity particle effect, electricity, vfx, vfx graph, vfx graph tutorial, unity, visual effect graph, procedural electricity, electric, electric arc, unity arc, arc effect, electricity arc, unity lightning, arc

Id: 8NWqTKYEIlU

Length: 16min 4sec (964 seconds)

Published: Tue May 17 2022