Unity VFX Graph - Fire Tornado Effect Tutorial

what's up guys welcome back to gabriel again proud and today we got something hot we got a fire tornado i brought back surveys my patreon page and this was what the patrons voted the most and i'm gonna try my best to explain you how you can achieve something like this it's a little bit hard but i hope you enjoy it and if you wanna get your hands on this project and many other assets that you can use in your games it's all available in my patreon page links below alright so let's see how we can do this and by the way i'm using udt2020.3.19 with the universal red pipeline but later on i'm going to show you a nice trick with the unity 2021.2 just make sure you have in the package manager shadowgraph and visual effect graph install it and in edits in preference you have experimental operator slash blocks turned on in visual effects right so this is what we are going to do as you can see we need a mesh so i use this blender and i'm going to show you how you can do it i'm using blender 2.93 and the idea is to erase everything select with a delete and with shift a we want to start with a cylinder down here in this add center panel you can control the vertices i'm going to leave it at 32 right so you can press space bar and search for shade smooth so we don't see the faces and i'm already going to take care of the uvs i'm going to drag a new window and select the uv editor and press tab to enter in edit mode we have these two faces that we want to remove with control type i'm going to select face select them and delete them now to fix the uvis it's very simple we go up here to uv and turn on constraint to image bounds now you can select this bottom vertices with b press g and lock it in y and push it all the way down the uvs are done i'm going to press 1 and numpad to go to the front view and push all of these up with g lock it into z 1 units with ctrl tab i'm going to switch to vertex press z to see true and select the top vertice and push all of these 9 units up lock it in z again and from there with ctrl r i'm gonna add three edge loops i'm gonna select the bottom verts scale it to more or less the size as well as the top vertices but not so much verts from the center i'm gonna scale it down and now i'm going to add with ctrl r a few more edge loops and make it smoother this obviously depends on how heavy you want your mesh to be i'm going to add a few edge loops yeah so so we can have this nice shape it's really up to you guys to make it however you like it this is the part where you take care of the shape of your tornado let's rename it to tornado body0102 and let's add another mesh a sander 32 the procedure is the same delete the faces but this time we only need one edge loop in the middle scale it down in the z we are basically creating a ring scale it all the way up until it has more or less the same size as of the tornado add two more edge loops with ctrl r you cannot need to create this shape once you are done you can smooth this out with shade smooth what matters is that you rename it to tornadoring02 and you take care of the uv maps it's very important as well uvs must be like this once you got it right you can save this with ctrl s directly to your unity project no problem if you are using blender it will import as an fpx and now and now we can drag our tornado model to the scene right i'm just gonna add the ring down here and we can start working on the shader it's a very important part for this effect to work out you can start with a blank shadow graph rename it double click to open it up first thing we can do is add universal as the target and visual effect as well in later versions you don't need to add visual effect you can simply turn on support vfx graph make sure it's unlit we don't need lights for this turn on alpha clip for universal and visual effect targets and first thing we need out of the box is a color to control the wall color of the tornado we also need a float for the dissolve but it's going to be a slider from zero and one oh and by the way rename the reference dissolve dissolving the scar color and the score choose white and change the mode to hdr now we can start so this all will work in the following way we can connect it to the alpha and then if we search with space bar for simple noise well first we can control the scale so let's create a property for that float noise scale rename the reference 20 for the default value and this we can connect to the alpha clip threshold and to the base color if you save this shader create a material out of it and drag the material to alternate the mesh you don't see nothing because dissolve is at zero we need to invert it but it's dissolving away and that's also very important for our stylized tornado let's invert the dissolve with a remap node basically the zeros that come in will be ones and the ones that come in will be zeros we are inverting this connected to alpha now do a very important part we need to animate this and instead of simply scrolling let's use a radial share creates a very interesting effect especially for a tornado you can control the strength right here i'm going to leave it at 5. but to animate this we need the time variable multiply it with a vector 2 which is going to be called the noise speed rename the reference default value of 0.5 and y and connect multiply to the offset and here we go we got a very interesting effect going on if you save it you kind of start seeing something interesting we are going to adjust those values in vfx graph this mesh is just to see the shader in action but as you can see it's very static still it's predictable so we need another noise we can copy the simple noise say the scale is 20 but instead of a radial share we are going to use something crazy which is a twirl love it create some very interesting effects and we have a few parameters that we want to control first is a vector 2 for the twirl center then a float for the twirl amount and then another vector 2 for the 12 speed let's rename the reference of the trail speed 0.5 for the y trail center must have a default value of zero five and zero five for now and the twirl amount let's add it to so we can see something in action let's connect it to the respective inputs of the twirl total amount goes to the strength twirl speed well first we need to multiply it with the time and then we can connect to the offset and draw center to the center and as you can see we have two noises being very well animated in an interesting way we need to put them together we do it by multiplying with each other and then we can connect this to a power node to control how much we want this to be visible so it's important to create the property for that we can call it the noise power i'm gonna push it up here a float by the way yeah don't forget to rename the noise power default value of one should be enough all right lastly all of this is going to be multiplied with the color property we created in the beginning connect it to the base color and to the alpha clip threshold save it the interesting part now is the twirl amount if we set it to 8 and then set the 12 center to y value to minus 0.5 here we go we have the tornado effect but there is a problem mistake that i made if we change the color increase the intensity it dissolves away and that's because we cannot connect the color to the alpha clip threshold we must connect the power simply otherwise it will also dissolve and here we go we can play with the intensity and with all of these values it doesn't really matter because we are going to play with them in vfx graph so let's move on to that part with right click in a folder let's create a vfx graph we are going to see how to animate this and how to use this in a much more interesting way rename the vfx graph and drag and drop it to your scene open with edit button rearrange your workspace however you like it now let's get funky with this so down here we don't want a quad we want a mesh for the tornado car which is going to have a dual collar we want a single burst to appear of only one particle we don't want this to move delete the set velocity set lifetime random off this is an important property to control in the inspector let's create a float and call it duration i'm going to leave it at five now down here we can go ahead and increase the size of this with the set size set it to one and yeah let's switch it to the tornado mesh as you can see it's sideways an easy fix up here initialized particle with a set angle in the x we can set it to minus 90. looking good and this is the part where we combine shader graph with vfx graph to create astonishing effects by assigning the shader we created let's make sure the blend mode is a pack by the way all right so we want to increase the dissolve to around 0.6 and a nice scale to 20 nice power at 1 for a little bit more darkness and let's twist this with the twirl amount to 8. now it's important to control the twirl center so it gives a proper twist to this 0.5 for the x and minus 0.5 for the y and we get this nice twisted motion twirl speed you can also fix it minus 1 and x and minus 0.5 in the y and would you look at that it has already the motion in action now we can play with the color so let's create a tornado car color connect to the collar and we don't want this to be very strong this is the center of the tornado because this tornado effect is composed of several layers and this is the first one the car we want an orange not too bright we still want to see some dark values in it right personally i think it's too stretched in the y so i'm going to use the set scale 0.75 for z i'm going to control this in the inspector later on so i'm going to create a vector3 and call it scale connect down here but what's important now is that we animate the motion of this tornado so down here we are going to use the set scale and now if you want three animation curves to have more control over how you animate it one it's going to be for the scale over life x the other for the y and the other for z connect them respectively oh let's set this to multiply the set scale by the way otherwise it will overwrite any previous value and for the curve we want to add a key more or less around 0.2 push the first one all the way down make this one a little bit flatter and then we can animate this however we want i'm going to make it bounce in the beginning a little bit like this i'm going to save this curve in this cog create a new curve so i can assign this curve to the y and to the z the same curve and here we go it grows up and then it bounces a little bit it's an interesting motion you can play with this i suggest that you play with this it's very interesting but let's move on because this is a big tutorial so as you can see towards the end it simply disappears and we don't want that we can simply dissolve it away so let's first create a float for the tornado car dissolve with the same dissolve amount 0.61 but we are going to use the curve to control this and it's done thanks to the sample curve where we can create an animation curve control it in the inspector for the dissolve curve which is going to control a lot of layers push it up here to curve it's very simple it's first one and towards the end around 0.8 we create the key so we can push the last key above 1.5 just make sure it's flat connect it to the sample curve and for the time we have the edge of the particle which goes from 0 to 1 and it's perfect to animate this curve now we simply need to multiply this without a tornado card dissolve amount and then connect it to the dissolve and towards the end this happens it dissolves away which is awesome right so our first layer is done which is the car let's create a group of this select everything right click so we can duplicate it for the tornado layer one let's create another color for the tornado layer 1 color and another float for the tornado layer 1 dissolve amount the dissolve can be 0.84 and for the color i'm going to select pretty much the same color but a little bit more reddish and a little bit more intense so it becomes brighter replace the color and replace the dissolve float let me just rename this we simply need now to increase the size of this one by opening the scale multiplying the x with 1.15 for example as well as the y and z we can leave it as it is and here we go as you can see we have an outer layer the layer one which is brighter than the car and it's a matter of adding more layers which i'm going to leave it to you so i can show you how you can do the top and the bottom rings by the way make sure in blender you select this mesh and you press ctrl a to apply the scale and then press ctrl s to save this if you have your blender file in unity it will apply automatically and now we simply need to copy the tornado layer one particle system up here for the tornado top ring zero one and it consists of changing the mesh to the ring we created and as you can see it's on the ground and it also has a lot of subdivisions and that's because of the twirl we can decrease it to 0.5 the total amount and it will look much better now to set this to the right position which is at the top of the tornado we can use the set position node for example we can offset the y to 8 basically until it covers the top part of our tornado and it's also a little bit too big so in the set scale we don't need to multiply it we can simply connect it directly to the set scale like this and that's it looking pretty good but the top ring needs to follow the tornado as it grows so what we can do is go get the scale over life y animation curve sample this curve animate it throughout the edge of the particle and multiply these with a vector3 which we are going to create and we are going to call it the top ring position with the same values that we have here which is zero eight zero then multiply this with the sample curve when connected to set position what will happen is that the top ring now will follow the tornado and that's awesome because from here now you can add a few more layers like one that is brighter you can add black layers it adds a really nice touch and the same thing happens when you want to do the bottom rings you don't even need to offset them with the set position you simply need to add layers until you arrive to something that you like and that's how you create a stylized tornado in unity so with unity 2021.2 the nice trick is related to the vertex offset which is now possible in vfx graph as you can see our tornado is wobbling around and this is possible thanks to the vertex offset that i created in the shader there's a link somewhere so you can learn more about it and then in vfx graph i simply control the parameters of the wobble and in the end we get this nice motion of the tornado it adds a really nice touch and it's totally worth it but it's only possible in 2021.2 because before that the effects graph cannot handle vertex offset i hope you have enjoyed this video if you want to support me it will be super appreciated and you can get access to a lot of assets really a lot that you can use in your games links in description and a big thank you goes to each patrons that supports me each month and a mega thank you to the top tier patrons which are elac frost bradford airman david cruz david my lars derek benson donald thompson edward shy goblin plug josh mccarbick jules klein karsten mikulka la kim fung little tsai maxim mograph tech nat sims oitzke ov sans player mont space radioactive bullfrog revenant games roger powers ryan stefan stefan zarkov unknown enigma very soother vivek sharma zaret redding and ingudas really really appreciate your support guys it really helps me keep going and to everyone watch this i hope you have enjoyed thanks for watching and i also hope to see you in the next video thanks bye

Channel: Gabriel Aguiar Prod.

Views: 72,591

Keywords: Unity tutorial, vfx, vfx graph, vfx graph tutorial, unity, visual effect graph, unity visual effect graph, unity vfx graph, unity vfx graph tutorial, visual effect graph tutorial, unity visual effect, tutorial, shader graph tutorial, shader, unity tornado, unity fire, unity fire tornado, tornado, unity tornado tutorial, tornado effect, tornado shader, shader graph tornado, fire tornado, vfx graph tornado, unity fire shader, unity storm, tornado tutorial, shader graph, wind

Id: gLWe_Wzc8Xc

Length: 19min 43sec (1183 seconds)

Published: Tue Nov 02 2021