Unity VFX Graph - Lightning Shader Effect Tutorial

there's two ways of creating lightning for games one is by end you create a flipbook animation you basically draw frame by frame and you get awesome results no doubt about it it looks amazing but you obviously need the skill and the patience to draw so for those who don't want to draw there's a second option and it's precisely generated lightning you create an algorithm in this case a shader and then you insert a few numbers here and there and boom kadaboom you get lightning generated by your computer which is awesome it's great it's useful and it doesn't take that long so with that in mind i created a few pressly generated lightnings in unity which are all available on my patreon page in case you are interested there's a link in the description but i'm still going to share with you how to create this one which is a good starting point so let's jump right into it and let's see how to create lightning and by the way before we start i made this tutorial a while back about lighting and tender which still has relevant information we also created procedural lighting but with particle system with shuriken so yeah if it interests you i left a link in description now the difference is that today we are going to use shader graph and vfx graph which i have already installed in the package manager and i am using unity2020.1.10 in the universal render pipeline so theoretically speaking we could create an unlit graph and build the lightning shader into that graph and we could apply this to any mesh and that's it but we would need to use the particle system this unlit graph does not work in vfx graph instead we need to start with a vfx shader graph you can press right click and it is right here you can create one rename it and then you can double click to open in shadow graph oh and by the way everything we are going to create in this vfx shader graph also works in unlit graph in pvr graph you can copy and paste it's the same thing and essentially what we are going to do for this lightning shader is to distort a line basically and in shadow graph we have a rectangle where we control the white and the eighth so let's create two floats so we can control both respectively with these default numbers 0.1 and 2. now for the starting part we need the noise we need to control the scale of that noise so let's create another float for the noise scale and we have to add movement to the noise so let's create a time node a multiply node and then a vector 2 for the noise speed for this to work we need the tiling and offset node where we are going to connect the noise speed to the offset and then the tiling and offset node to the uv of the simple noise just like this as you can see it's starting to move if we increase the noise speed but if we connect this directly to our rectangle it gets way too distorted but there's a way to control the distortion amount which is with a lerp note this simple noise is going to be connected to the b option which is completely distorted and the a option is no distortion at all so let's create a uv node and then we just need the vector 1 to control the distortion amount we just push it up here and then connect it to the d of the larp and the larp goes to the uv of the rectangle and as soon as we do it if we start increasing the distortion amount we are starting to get something close to lightning now what we are missing is color so let's add a color property i'm going to push it up here to the beginning and set the mode to hdr and choose whatever color you want and then multiply it with a rectangle this goes to the color and then we can connect the rectangle directly to the alpha and that's it now how do we see this in action well first we need to create a vfx graph so with right click i'm going to go to visual effects right here and choose visual effect graph rename it and drag and drop it to the scene and if we press this edit button vfx graph will open up i'm gonna make some room i'm gonna rearrange these and then you can press f to focus on your particle system if you don't see it right so the first thing we need is to output a mesh we don't need this part cool quad let's remove it we need a particle mesh output particle mesh as you can see it is emitting capsules which is not quite what we need we actually need to change it to a plane now as you can see we have an input for the shader graph and if you click it you will have your lightning shader select it and as you can see we are starting to emit lightning now there's a few things that are not really helpful for example the names of our properties have the default name the way we change this is by going back to the shader and then match the name of the property with the reference the only difference is that i add an underscore in front of the name once you have done that don't forget to save your shader and you will have the correct names of the properties so for a lightning strike if we go up here we don't need the constant spawn rate what we need is a burst with only one in the count we also don't want this to move so delete the set velocity node and in this case we want lifetime to be always the same so let's turn off random in the inspector right here and set it to 0.5 for now now to control the weight grows the lightning to where it expands we need a set scale down here in the output particle mesh if we increase the y it gets taller so that's basically where you control how tall your lightning is going to be and if we open this up we get access to the x y and z and to animate this we need to sample a curve which requires the time for the time we can feed it the lifetime of the particle itself which is age over lifetime and now in the curve if we say that goes from 0 to 1 and connected to the y as you can see it gets smaller again but it's growing let me just increase the lifetime so we can see this in action so yeah it's growing but it's growing from the center in reality as we all know lightning comes from the sky to the ground right so we need to change the pivot of the particle let's use a set pivot and in y minus 1 will grow up so let's set it to 1 and as you can see now the lighting goes down perfect really nice but it is way too small and it takes a lot of time to grow so in our curve down here i'm going to push this key more or less to 0.20.3 off the lifetime it as and then with right click if we did key we can set the value to how high we want this to be in this case let's try 6. it still takes a lot of time to grow because the lifetime is 2 seconds if we decrease it to alpha second grows faster we got lightning we are starting to see something which is great and now we can use the same technique to control the thickness to control the white and i'm going to use this curve the maximum wide is going to be 0.2 and connect it to the white and as you can see near the end of the lifetime of the lightning it gets thinner and thinner until it disappears which is what happens in reality actually looks really nice you can play with these curves and adjust it to your own tastes great so we have lightning it looks nice and you have quite a few options that you can control so you can customize your lighting now i'm going to show you how to improve this so we can create a lightning strike so first let's actually group this and call it lightning and then with spacebar we can search for simple and choose the simple particle system this is going to be for flash so we don't need the constant spawn rate what we need is a burst with only one in the count we can also remove the set velocity it's not going to move and lifetime it's not going to be random let's turn it off and set it to 0.2 it's a quick bright flash and for the main texture we can choose the default particle that's fine and for the size of our lifetime we want to go from 1 to 0 from big to small like this we can also remove the set color lifetime but we need the set color only and now it's a good time to create two color properties one for the lightning color because we may want the lighting to be brighter than the other things so let's connect it right here to the lightning and then create another color we can call it color zero one this one is still going to be blue with an intensity of around 2 and the other one we can first connect it right here and choose a color that matches the previous one as you could see it is not bright we have this dark all around that's because the blend mode is set to alpha we can change it to additive we can also increase a little bit the intensity and that's it we have a flash but let's control the size with a set size for round 10. nothing changes because the set size of lifetime is overwriting any previous value we need to set it to multiply in the composition yeah 10 is way too much 7 seems like a good value it's really up to you as well we can group this and call it flash and then copy and paste it with ctrl c and ctrl v and this one is going to be for the glow it's going to leave longer so 0.6 should be fine and it's going to be smaller like 3 just so we don't see the beginning of the lightning you know okay that looks nice if you want you can decrease the intensity of the color by multiplying it with 0.5 for example right moving on now we want also to have a flash on the ground when the lightning hits the ground and then some particles flying so we can copy and paste the flash ctrl c ctrl v i'm going to call it impact flash but we need to offset this so it is in the same position of the lightning impact so we are going to use the set position end of set to y i'm going to set it to 1.2 okay as you can see it is right there at the end of the lightning which is great but it's firing at the same time as the lighting we want to add a little bit of delay and for that we can select the wall spawn module and in the inspect we have delay mode which we can set to before loop and it gives us this option where we can now say that the delay is going to be 0.2 for example if you want to work the timings really well you can set the play rate to something like 20 and it will play in slow motion and you can better understand what's happening and adjust the timings so yeah the delay should be something like 0.15 in my case of course right so we got the delay we got the flash the size is way too big i'm going to decrease it to 2 and that seems ok that seems nice maybe the set position is not correct okay that looks better actually let's create a float for the impact delay and another float for the impact offset which is going to be -1.2 and the impact delay is going to be 0.15 we are going to connect it right here and the impact of set we can open this and connect it to the y this way every particle system that is going to be part of the impact will have the same offset and will be in the same position with the same delay and for the particles let's create another simple particle system let's copy the set position of the impact flash by holding ctrl and then while holding left mouse button we can drag it like this and then connect the impact offset to the y and in the spawn we want a burst of something like 30 particles or more if you want more you need to increase the capacity let's select the spawn and set the delay mode to delay before loop and connect the impact delay right so it's at the same position and with the same delay now the lifetime it's going to be small something like 0.6 and 1.5 you can also say that the select velocity is going to have these values faster in the y it goes faster up yeah we can adjust these values later now let's change the texture to the default particle and the set size of a lifetime curve to this one goes from big to small and if we want the particles to stretch we need to set the orient mode to a long velocity let's also switch the blend mode to additive so they become brighter and now we need the set scale to be something like 0.1 and 0.5 let's make this random actually and now this value seems okay we are basically stretching in the y let's also add a set color module by the way and connect the color zero one oh and nothing happens because the set call of a lifetime is set to overwrite we need to change it to multiply and that's it here we go i believe the lifetime is a little bit too long i'm gonna shrink it to 0.3 0.8 maybe less you basically need to adjust these values until it feels right but that's basically it one last thing we can do is copy the glow and call it impact glow set the delay mode to delay before loop connect the impact delay copy the set position while holding control drag it right here and connect the impact offset and that's it we have a glow at the end of our lightning it looks really nice looks really punchy actually it really has a nice feeling and if you enjoyed this tutorial please smash the subscribe button and leave a like and if you want to get your hands on all of these lightning strikes and even more everything is available on my patreon page and on my website gabrieleguiapro.com these videos are made possible thanks to the amazing support of my patrons you guys are amazing and help me keep the channel running a big thank you goes to the top tier patrons which are aaron alexis lutron david crew donnie trona goblin plug imri spc hostile mars game josh mccormick kajopuni lars martin liu chang chang mirko siebert oetzke pandora toolbox rig nedu tk toodles victor nathan vr pal yong chin and yokyo kuroto i really do appreciate the support guys and thanks everyone for watching hope to see you in the next video you

Channel: Gabriel Aguiar Prod.

Views: 128,796

Keywords: unity, unity vfx, unity vfx graph, unity tutorial, tutorial, unity effects, unity special effects, unity magic effects, unity particle system, unity particle effects, unity particle tutorial, vfx graph, vfx, unity vfx graph tutorial, unity particles, graph, unity graph, fx, vfx graph tutorial, unity lightning, unity thunder, vfx graph lightning, lightning, thunder, shader graph lightning, lightning shader, unity lightning shader, shader graph tutorial, unity electricity, effect

Id: 40m_HUENh3E

Length: 16min 43sec (1003 seconds)

Published: Tue Nov 03 2020