Unity VFX Graph - Heat Distortion Effect Tutorial

so heat distortion is used many times in games to convey the feeling of something so hot that it starts the hair around it and i've been asked many times to create a tutorial about it so that's exactly what we are going to see today first we will see how to do it in the high definition run a pipeline and then we will see in the universal render pipeline just want to say that these tutorials are possible thanks my patrons and by becoming a patron you get awesome rewards such as access to a tremendous amount of visual effects that you can use in your games so with that being said let's jump right into it as you can see i'm using unity 2020.2 and in a new empty project with the hdrp template selected and the first thing we need is to make sure that in the package manager we go up here in unity registry and check if visual effect graph is installed as well as shadow graph then it's very important that you go to the preference in the edit and in visual effects turn on experimental operator slash blocks to get access to the hidden features of visual effect graph that's right and guess what in hdrp we only need the visual effect graph to create the heat distortion effect that's how awesome it is so with right click let's create a visual effect graph in a folder inside our project rename it to something like heat distortion and then let's go ahead and drag and drop it to the scene let me just place it around here to open this up we simply need to press this edit button and we get this window then i'm gonna dock around here and make some room okay so everything happens down here in the output we don't want the output particle quad we want to drag a new line from here and as you can see we have this output particle distortion quad and distortion mesh for this tutorial let's use the quad one delete this output block and let's just increase the size of these particles so we can see something with the set size block one is enough okay so yeah nothing much is happening right now and there are two distortion modes one is in screen space and the other in normal based mode let's start with the screen space the first thing we want to do is select the map a blur map and we got this default particle that comes in all of unity projects that we can use and as soon as we do it as you can see we get some distortion we can decrease the blur scale and we have a nice distortion going on it's not that bad looks pretty good out of the box but if you want you can use a flip book as well like for example this dust texture that comes with unity where we can say that the uv mode is flipbook blend and the size is 2x2 and that we only need an index over life to animate this erase this key click down here in this graph and now for the last key we want it to be 3 in the value because it's a 2x2 texture so it's 4 frames but this starts counting at 0. and we are starting to see something interesting now what else we can do well we can make sure that this fades out with a set color over life now as you can see instead of disappearing it fades out cool and if you want you can also come up here and add a set angle channel set to only z and the first thing we need make it random in inspector uniform between 360 and minus 360 and we got a nice thing going on if you want you can make it rotate over time with a multiply angle one in z the only thing we need is to decrease the blur scale to something like 0.16 and we got a nice distortion going on one thing that is worth mentioning is this scale by distance it will adapt to the camera distance in relation to this vfx graph as you can see if you turn it off and get away from the heat distortion effect it still has the same power if you turn it on it will adapt depending on the position of the camera another thing worth mentioning is the destruction scale if you increase it you also increase the distortion influence that's pretty cool for the screen space distortion mode right now let's drag this to the left copy with ctrl c and paste it with ctrl v connect the update particle disconnect the other one because now for the normal base distortion mode we don't want to use a flip book we can make it default and we want to remove this normal map as well we don't need this one what we can actually do now is go to google just to demonstrate how this works and quickly google something like normal map circle i'm gonna choose this one i'm gonna save it to the project and then i'm gonna assign it to the smoothness map it may seem like nothing happened but if you increase the distortion scale you get a sweet distortion going on right the only problem is that you got these hard edges the way we solve it is super simple we got this alpha mask and if you click it we can assign the default part that comes with unity and it will become super smooth this heat distortion either way both of these distortions are looking very neat and super simple to set up in hdrp as you can see you only need visual effects graph now let's see how we can do it in the universal render pipeline as you can see i have a new project here empty with the universal render pipeline template selected in the same version of unity 2020.2 and in this new project once again let's make sure that in package manager we have visual effect install it which i don't have out of the box and shadow graph installed as well and the difference in the universal random pipeline is that we don't have an output particle distortion quad in vfx graph so what we are going to do is start with a shader a blank shader graph to create the distortion let's rename it can open up we double click and let me make some room okay so we got this graph inspector up here if you don't see it you can click on this button and active targets for now let's make it universal we want this material to be unlit the surface to be transparent and i want this to be two-sided so we can see it from the front and from the back as well and it all comes down to one note the sim color node which gives us access to whatever the camber is seeing to put it simply if you connect this to the base color save this asset create a material out of the shader and then create a quad and assign the material let me just place this squat somewhere nice drag and drop the heat distortion material and as you can see we get this gray panel that means that we need to turn on the depth and the opac textures the way you can do it is going to edit project settings go to graphics so you can locate your universal render pipeline asset mine it's in the settings folder i'm going to select it and in general i'm going to turn on depth texture and opac text and as you can see this becomes transparent because this is feeding what the camera sees but with discrete position coordinates now it all comes down to distorting this scene color for example this scene color node if you connect the screen position if we save it nothing changes because it's exactly the same thing by default it's the screen position being fitted to the scene color by the way you can turn off shadows on this quad probes and dynamic occlusion as well so now what we are going to do is use a larp node alert node is very simple we got this t input that will blend between a and b this case between black and white as you can see once we get closer to one it gets whiter and once we get closer to zero it gets darker so what we are going to fit to the a option is no distortion at all and to the b we are going to feed the totally distorted for the t we are going to create a float called heat distortion that we can select and now in the graph inspector in the node settings we can say it's a slider between 0 and 1. great let's connect it to the t input now for the b option it's very simple all we got to do is add noise to this screen position a simple noise node will do with around 50 for the scale connect to the b option save this now let me make some room so i can show you both things at the same time if we increase the heat distortion of the quad material as you can see we get a really nice distortion going on crazy distortion right pretty cool the only thing we are missing is some motion and every time we need motion we need a time node at least in a shader workspace let's create a vector2 for the distortion speed multiply it with the time node and create a tiling and offset node the offset option is the one we want connect this to the simple noise save it and now in this spectre if you increase the y option of the distortion speed to minus 0.2 we get a scrolling distortion effect going on right we just need to fix these hard edges so let's create a mask a texture 2d let's drag it down here sample it and for the default text we are going to once again use the default particle that comes with duty which is always super useful let's multiply the mask with the simple noise and replace the connection to the add and that's it we can save it and in inspector now we only need to assign the default particle texture to the heat distortion material once we do it you get this amazing distortion going on there's only one downside this technique does not distort transparent materials it also works well with a particle system as you can see i'm going to delete this particle system and show you how to make it work with the vfx graph so i'm going to create the vfx graph drag it to the scene let me frame it and i'm going to press edit to open up the effect graph once again and if we go to this output particle quad to this shadow graph option we have nothing in here and that's correct because the shadow we created the target it's only for universal random pipeline we need to say that the target is also visual effect in the graph inspector and nothing really changes at least at first glance what we can do now is go back to the vfx graph and now in the shadow graph we have the heat distortion shader we created and if we assign it it's almost perfect we just need to increase a little bit this vector one with this very strange name because the reference is not properly named and then assign the mask which is the default particle and chana we get a very nice distortion going on with visual effects graph in universal render pipeline they're just a slight problem as you can see if you look closely you can notice the squares we just need to go back to the shader and drag from the mask texture from the alpha drag a connection to the alpha input of our shade just like this save it and now we get a really nice distortion going on and from now on you can do a couple things for example if you want to name properly these vectors in this text all you got to do is select the property and in the graph inspector in the node settings you can copy the name to the reference and add an underscore for example once you save it if you go back to vfx graph now you have some proper names in your properties of the shader cool to animate the heat distortion amount for example now you could use an attribute from the particle the age attribute from the part connected to a sample curve and now the curve will animate the heat distortion amount where the maximum is 0.05 for example and connect to the heat distortion and now in the beginning and in the end of the lifetime of the particle it will fade in and then fade out actually this set color of a life isn't doing anything you can remove it and then you can do stuff like we did in the hdrp you can use the set size to create a more uniform distortion and then you can come up here to the initialize particle and use a set angle with the channel set to z just like we did before random between 360 and minus 360. so each particle has a different rotation and if you want to add a little bit of rotation to all of the particles you can use a multiply angle multiply it into z something like one and many more things that you can do if you want to find out more about visual effect graph check out my channel there's plenty of tutorials there i'm sure you will learn a lot and if you want to see more of this content please subscribe if you enjoyed this video leave a like and if you really want to show your appreciation for my work you can always go to my patreon page and support me there to all my patrons a big thank you goes to you to which one of you and as usual here's a quick shout out for the top tire patrons which are elac frost bradford irent cash kids ck vfx curtis henry david crew goblin plug emirates pc all style mars game josh mccormick jules klein mariano di giulia jr matt hook mikhail novo rkv itsk swearing3 and tirita a big thank you goes to all of you your's part is very much appreciated to everyone who watched this video thanks for watching i hope to see you in the next one you

Channel: Gabriel Aguiar Prod.

Views: 67,121

Keywords: Unity tutorial, unity effects, game effect tutorial, unity particle effects, unity particle tutorial, unity vfx, unity vfx graph, vfx graph, tutorial, unity vfx graph tutorial, unity particles, graph, unity, unity graph, shader graph, unity heat distortion, unity shader, shader, unity shader graph, distortion, heat distortion, heat haze, unity heat shader, vfx graph distortion, shader graph distortion, heat distortion shader, heat, air distortion, hot, heat wave, wave, heatwave, fx

Id: CXCyVDEplyM

Length: 16min 32sec (992 seconds)

Published: Tue Feb 09 2021