Unreal Engine 5 - Create a Heat Haze on your Desert Landscape

hello unreal engine games developers a couple of my viewers asked me to create a heat ace effect to really sell the effect of being under the scorching sun so here we are let's get straight into it [Music] i'm going to show you two methods of creating this heat haze effect the first one is a post process effect in screen space but it does have a bit of an issue which i'll describe a bit later on and the second technique uses planar refraction and gets rid of the problem in the first technique so have a look at both and see which suits your needs you don't need to have created a desert for this but if you want to see my videos in my channel for how to do that before creating this effect before we get started i just want to increase the depth of field blur in my scene to help sell the heat haze effect so go to your post process volume uh find the section on depth of field and my settings here are a focal distance of 5000 and i'm going to increase the depth blur radius to 15 just to slightly blur the distant dunes a bit more that'll help with the heat haze effect so let's get straight into the first method of creating a heat haze so this is a post process effect that we're going to create so it'll be acting on the screen space of the uh the game uh rather than in the three-dimensional space and it's a pretty nice effect but it does have some issues which i will draw your attention to towards the end and that's why i've also provided a second method which you can skip to if you want and that gets rid of some of the problems or gets rid of all of the problems of the first one but with a slightly different quality and feel to the heat haze so first thing we need to do is create a material for our heat haze so open up your materials fold you haven't got one already just create a materials folder and then there right click and create a new material and we're going to call it m heat haze bp for post processing and if you open that up the first thing we need to do is set the material type so this is going to be as i said a screen space or post process effect so in the material domain change it to post process and all you have now as an attribute is the emissive color so that is going to be the the screen color there so what we want to do is we want to take our screen and distort the uvs of the screen space with a bit of uh sort of time-based uh noise distortion so let's work our way towards that the first thing we need to plug into the emissive color is the actual screen that has been rendered from our three-dimensional elements so in order to do that if you do scene texture and this scene texture has lots of different attributes but the one we want is called post process input zeros that's the first uh input after all the post process effects have been done or before they've been done i can never remember which but it's the it's the screen it's a screen layout and then we'll plug that into the emissive color now what we want to do is we want to modify the uvs of the screen space in order to create some movement in or distortion over time so to do that first thing we'll do is get the texture coordinates so do texture coordinate if you put that through a panna that's going to do some movement at a very speed let's do for the moment change the speed of the y um speed y to 0.05 you can change this later if you want and what we actually want to change is a texture so if you do texture and do texture sample you can pick there's quite a few different textures you can pick from for this let's just give it a bit more space but i'm going to use my old faithful the tiling noise you may need to check whether you can see uh the engine content so if you go into your content draw settings here just make sure you can uh show engine content show plugin content so we can see that you may not be able to see the textures that i've chosen otherwise so what i'm going to do is on my texture sample under texture i'm going to search for tiling and i'm going to use this tiling noise which i used in a previous video when i did the dust clouds so difference this time which we're going to use this to move the uvs around okay so we've now got some moving uvs via the panna but there will be they'll be moving far too fast for what we want to do at the moment so take the red channel out because the uvs are only going to be on one channel and we'll do a multiply and multiply by 0.01 so we're going to make this 100th of the size that it was before and the last thing we need to do if we plug this in just now we're going to have um a completely um ridiculous result we're not going to have the screen looking anything like it originally did so what we want to do is we want to take the original texture coordinates so i do texture coordinate again same as before here and what we'll do is we'll now add the smaller text coordinate distortion that we've created so it'll be mainly the original screen but with a little bit of distortion added in here as well and the last you want to do is plug this new set of uv into the screen space and then it will push out the screen with these distortions applied and you can see on the preview here we've got a little bit of distortion going on on the globe here so it gives you an idea of what it might look like so let's save that and we now need to apply this post-process material in the post-process volume so uh come back out to your screen if you haven't already got a post process volume in your scene uh go to add and find them in here and drag it onto the scene and also make sure that it is set to infinite extent unbound so it covers your whole scene otherwise you won't see the distortion over the whole of the landscape once you've done that what we need to do is search here for render and you'll see under rendering features we've got post process materials we haven't got anything in there at the moment so add a new element and under choose choose asset reference and the last thing you want to do is to select the one we've just created so start typing heat and there's our m heat haze pp and immediately even in the editor it will start to show so you can see we've got a little bit of shimmering going on the distance we might be able to might want to increase the strength of that in a minute let's go into play and you can see one of the issues also here even though it's quite a mild effect it's applying the heat haze everywhere including the foreground so even our mannequin has the heat haze applied and really we want it only to apply in the middle to distant elements although that's quite difficult to do with screen space effects so let's um let's change some of the parameters let's come out of here go back into a heat haze material and let's um let's change the speeds here let's make this point zero five this point one and maybe we'll make this point zero two and you can see now that it's got more of an effect uh in the preview yeah and now you can see there's more in fact i've probably gone too far the other way now but go into play mode yeah we've got uh more heat haze i mean it looks quite nice in the background maybe slightly too strong but again you can see the problem with the foreground objects mannequin we don't want them to um to distort so is there anything we can do about it well there is a little bit we can do about it but it's not going to be perfect we can create what's called a depth mask in order to mask out objects that are near the foreground so to do that we'll go back to our heat haze and we'll start to create a mask so again using this scene texture node that has various elements total various attributes we'll create a new one scene texture and this time in the attributes we're going to choose scene depth and from the scene depth we want to divide by the depth that we want to mask that's because the scene depth is measured in uh units and it'll be something let's say between 0 and 20 30 000 in our desert so we want to make it somewhere between zero and one for a mask so let's divide it by five thousand and then we will saturate it which is a way of clamping it between zero and one and just to see what it looks like let's plug it into the emissive color okay and go back to the main scene save it first okay you can see straight away we now have a mask so my mannequin is almost jet black because it's in the immediate foreground and then the desert that i'm on is uh graduating from dark to light if i get to the top of this dune you can see that it sort of as a gradient it uh sort of filters out as it gets further distance so let's try and use that as a mask to apply the effect and as i said it will get rid of some of the issues but it won't be perfect as you'll see in a second so come back to your heat haze and what we want to do now let's put the color from the scene texture back in so we now have a mask what we want to do is we want to have an unchanged texture coordinate so let's create another texture coordinate node so it's our good old friend lerp so i put lerp there and choose lunar interpolate so when the mask is completely black that's our foreground elements we want the texture coordinates unchanged and when they so that's going to be our mask so the alpha channel when the scene depth is completely white or seen depth mask is completely white we want the um altered heat haze texture coordinates here so let's now take this into our b channel and finally plug that in to our post processing and you can see in our preview nothing much has changed there except that we are now masking between foreground and background elements to apply the effect so let's save this and let's see how that has helped so okay it looks okay in the editor let's go to play and you can see now the issue yes the mannequin is masked the problem is is that the pixels that are behind or directly next to the mannequin are not being masked by the depth mask and they're causing the uvs of the mannequin this is in screen space to show so you've got this sort of weird jelly effect on the mannequin so it's not ideal so really this is um as an effect although it looks quite good it's something that you can't really use unless it's just for landscapes without too many foreground elements so it's kind of limited in its uh in its use now i mean there may be a way to salvage it but the problem is that um the next step in order to get this if you wanted to get this technique to work what you'd have to do is you'd have to take that mask and you'd have to grow it so that it covered the area where it's modulating the uvs outside of the mask and that technique is called morph morphological dilation but it involves some custom code and it starts to get a bit trickier to do that i'm not even sure that the performance impact on it is that great either so um this is as far as i'm going to go with this particular method what i'm going to do now is i'm going to show you a second method that uses refraction planar refraction in order to achieve a similar effect and this one gets rid of the problems of foreground elements not being included in the effect so let's move on to that okay for this second method we're going to use a translucent uh refraction material to achieve the distortion so first thing we need to do is if you follow the first example we need to switch off this post process effect we don't want two heat haze effects on top of each other so go to your post process volume find the post process materials and just delete the post process material we created in part one so we're starting from a blank canvas again so again first thing we need to do is create a material and so i'm going to create another new material so i'm going to go into my materials folder right click new material and i'm going to call this m underscore heat haze refract okay and open that one up and what type the type of material we want to create this time is a surface material yes but we want it to be a translucent material um no shadow casting the next thing we want to do is we want to make this completely transparent so press one on your keyboard board left mouse click and you'll have a scalar parameter of zero here which we're going to plug into the opacity and you should see the black orb disappear in the preview and the uh the attribute we want to change is the refraction so we want our refraction to distort in a similar way that we did the uvs before so if you still got your material open from the first the first method what we can do is we can take the um this section here the texture coordinates up to the multiply and just copy that and put that into this material so you end up with the same thing and i'll walk you through it just in case you skipped directly to this section and didn't do the first method we're taking the texture coordinates we're panning them we'll change this we'll make this point one on the x and zero on the y we can change these later we then run it through a noise sample so the noise sample is what's getting modified and then we're just going to multiply it before we put it into the refraction node so the multiplication here we want to make much bigger so we want to make multiplication 2 and let's plug that into the refraction and we won't see anything in the preview because what refraction does is just change the index of refraction at different elements along the plane that we're going to create so it's really effect distorting what we see think of it like a glass window and we're changing the sort of thickness and refractive qualities of different parts of that window so let's save that i'll leave it open though so we can come back to it so now what we're going to do is we're going to create a window to look through in order to see the distortion this is going to be a very similar technique to what i showed you in an earlier video when we created a plane for a dust cloud so we need to apply it to the character in our scene so if you haven't already uh make sure that you have a third-party character so to do that go into your browser do add add feature and add the third-party content pack or third-party feature and then you'll get the mannequin that you can control and run around so just make sure you do that first of all and then what we want to do is we want to find that third-party character so we can modify it a way to do that is to go into your world settings if you don't see world settings in your panel go to window and make sure all settings is checked here and then you'll see at the top here you'll have selected bp third person if you haven't select that in order that you can use the third person game mode and your default pawn class is this bp third person character so navigate there and open them up choose the viewport element and you'll see we have the camera and our character here what we want to do is we want to place a window with this distortion material in front of our character so in order to do that make sure you've got the camera selected because we want to make the window a child of the camera so wherever the camera is pointing this window is rigidly linked to it doesn't always stays in front of the camera so make sure the follow camera is selected click add and choose plane and it will create a small plane in front of the window what i want you to do next is press e give it a name first of all so f2 i'm going to call it heat haze plane then with it still selected if you press the e key select it and press the e key you'll get the rotation widget make sure you've got snap to 10 degree elements there and just drag it up 90 degrees so it's facing towards let's move over there a bit so it's facing to facing towards the camera you can see i've just uh rotated it nine degrees up here it should say 90 degrees on the y-axis here as well you cannot just type that in if you if it's easier for you and what we want to do now is move it in front of the character so i'll show you the dimensions i'm using if you go to this perspective mode and choose right so we can see things in um sort of orthographic view if you now go back to your selector with by pressing w on the keyboard you can now drag this along and i'm going to put it about two units in front of the character so you see you've got four four major units between the camera and the character and then i've just dragged another couple here and then i'm also going to scale it up so at the moment it's a scale of one by one but that won't fill the camera now in that distance so let's make it 15 by 15 and if i go back to perspective mode you can see now i've got this big panel in front of the character so that's fine at the moment but it's not doing our refraction and that's because we haven't applied our heat haze material to it so the next thing i'm going to do is with the heat haze plane still selected go to the materials search for heat and choose your m heat haze refract and you'll see now it goes transparent there might even be a little bit of flickering in here that's a little bit of refraction going on in the editor here okay and compile and save and go back to our desert level now you won't see anything in the editor because this is something that will only show when we're in play mode so let's go into play and you'll be distinctly underwhelmed and say well i can't see anything happening there and that's because our heat haze plate at the moment is exactly parallel to the camera and in order for some refraction to happen it has to be at some angle to the camera but not much of an angle so the next thing we're going to do is go back to our material sorry go back to our third person character make sure you've got the heat haze plane selected and instead of 90 degrees on the y-axis just make it 91. so you're literally tilting it very slightly towards the character compile and save go back to level go into play mode and now can you see there is a slight movement there and the nice thing about this is because it's the planes in front of the character the character doesn't get affected it's quite subtle at the moment so we'll um we'll up some of the parameters here just to see if we can get a stronger effect but you can you can see that it's uh definitely shimmering a bit in the background in fact let's do what we should do anyway and create a material instance so that we can change the parameters any time during in the editor so come back out here again go to your materials folder uh right click on the m he taste refract and create material instance i'm going to call it mi heat haze refract do a save go back to your third person character with the plane selected change the material to the to start type heat we're now going to the mi the material instance there shouldn't be any change okay let's compile and save and now what we'll do is we will open up the mi heat haze so double click to open it up let's just drag it out and let me just tile my windows a bit so i'm going to keep the material instance on the right here so i can change parameters and i haven't got i haven't got any parameters at the moment so i need to change the main material to parameterize these elements that we hard coded so open up your original material heat haze refract and what we'll do is we'll make the speed x and speed y parameters so to do that drag off here do append you'll get an error at the moment press s for scalar parameter and left mouse click then do it again and then we'll call the first one speed x plug that into a f2 to change these parameter names speed y put that in the second one and we'll make these parameters 0.5 on the x nothing zero on the y and this multiply as well let's make that a scalar parameter so s click and let's call this one heat intensity and plug that in here and save and you can see on our material instance we now have those three parameters that we can change while we're playing the game so go back to here go into the play mode if you press shift f1 it'll leave it playing but we can go and change these parameters so heat haze intensity at the moment is zero which is why we're not seeing anything so if we make that two you can see that's what we had before um we can change speed as well so we might want to make that one so that's that's a bit too fast so i would say keep the speed on the low side so i'll do a bit of um padding on the y axis as well and then you can just play around with the the the strength of the effect and you can see if we go back we've got much more distortion there now so this is an effect that doesn't have the foreground issues of the first one as always i hope you found this tutorial useful stay subscribed for the next one and i'll see you then bye for now

Channel: UnrealityBites

Views: 13,831

Keywords:

Id: vXEZNqVj15Y

Length: 29min 7sec (1747 seconds)

Published: Tue May 17 2022