Rain Puddle Shader - UE4 Materials 101 - Episode 17

[Music] in today's tutorial we're gonna create a puddle shader for the last several weeks we've been creating shaders that simulate the appearance of weather of rain we've created a raindrops shader rain drips shader and then last week we created a rain ripples shader and this week we're going to use those rain ripples to create a puddle as you can see in this reference footage after it's been raining for a little while water accumulates on surfaces and you can see the rain ripples as the raindrops hit the puddle and that's the effect that we're gonna create today we're gonna create puddles that are able to grow as it continues to rain and then shrink as the rain stops and the Sun comes up out and things dry up so in order to create our puddles the first thing that we're gonna do is we're gonna start out with a texture sample and this is some cloudy noise that I created a while back when we did our distortion shader so this texture I've called Distortion and if we take a look at the individual channels what I want to show you here is the green Channel you can see that there's just a lot of cloudy nose here and what we're gonna be able to do is make puddles that grow using this cloudy noise so the puddle will start out at the very darkest spot and then grow as it continues to take up lighter and lighter pixels so let's go ahead and do that we're gonna switch back here to our weather puddle demo and the first thing that I need to do is create some texture coordinates for my sample now our puddles are going to be projected in world space from the top down and so I need to bring in the world position and we're only going to be using the red and the green channels of world position so I need a component mask so we're going to use a component mask the red and the green and this is basically an XY projection XY because Z is the up vector I'm going to multiply this by a small number to get the correct size units so we're going to multiply it by 0.01 all right so now we have world space 0.01 and let's see what happens I'm just gonna take this my UV coordinates and I'm gonna be using the green channel here so I'm gonna wire the green channel into color and let's take a look at we get what we get so you can see that it's really streaky and the reason for that is that we're looking at the sides of a cube if I switch over to a sphere you'll see that this noise pattern is projected from the top down so let's rotate our scene and you can see that it's projected here to the top of the sphere I'm going to switch this back to a cube okay so we've got our noise pattern projected into our scene and now we need to adjust the pattern a little bit so that we get puddles only where it's the darkest so the first thing that I'm gonna do is I'm gonna create a constant value and this constant is for how big the puddle should be so I'm gonna give it a default value of 1 and then we're gonna create a lerp node a linear interpolate and I'm gonna use the puddle size here as my alpha value now I'm going to add two constant values and these are going to be constant vectors these are going to contain the measurements for the brightness values for where I want the puddles to go when the puddles are the smallest and when they're the largest so I'm going to add two of these and for the first one I'm gonna give it a value of zero point zero zero zero one and then the second value is going to be zero actually I need one more zero in here and then for the second value I'm gonna use a value of zero point one and zero point two five so these are gonna control my minimums and my maximums for how large my puddle is when it's at its maximum size and when it's at its minimum size all right now I'm gonna take I'm gonna use a component mask again and this is gonna be my red and the second one's gonna be my green so this value is going to be lurking between a very small point zero zero zero zero one and point one and this value is going to be lurking between zero and 0.25 so the second values here are my maximums and the first values here are my minimums so now I'm gonna take my texture and I'm gonna subtract it from the second value and then I'm gonna divide it by the first value and let's take a look at what we get from that all right so we've got something that looks like a puddle this white area is the area where there are no puddles and then the black area is the area where there are puddles so this is the maximum puddle size right now but if I were to shrink this let's say 0.5 you can see that the puddles are smaller and the smaller my number gets the smaller might puddles will get and if I give it a value of zero I should have no puddles at all and that's exactly what I'm looking for so I can use this value to control the size of my puddles if I want larger puddles I could increase this 0.25 maximum to something like let's see what we get we give this a value of one and then we give this 0.25 let's give it a value of 0.5 and now we're gonna get like almost all black the puddles are actually running into each other this is too much we don't actually want anything to be this flooded and so we're gonna give it a maximum value of 0.25 okay so we have our mask and we have a value that controls the size of our puddles now we're gonna just saturate our value here to make sure that it stays between 0 & 1 and then we're gonna invert it so that the areas where the puddles are are white and the areas where they're not are black and that is done with a 1 - all right so there we go we've got our puddles in white and our non puddles in black we want to make our puddles slightly smaller 0.5 kind of scale the puddles down a little bit all right so we've got a couple of puddles here and the next thing that we want to do is if i zoom out a little bit you can see that when a puddle reaches the edge it kind of smears itself down the side and that's bad because our puddles are being projected in the z-axis or from the top down and we don't want puddles to show up on the sides of things or when surfaces are not flat so I need to create a mask to get rid of the puddles in areas where surfaces are not flat so I'm going to bring this bit of our shader down here and then here I'm gonna create a mask for only showing the puffs puddles in flat areas and so I'm gonna add a world space vertex normal and I only want the Z component so I need a component mask I'm going to mask out the Z component of my worldspace normal and now I'm gonna saturate it so that I don't get negative values and then I'm gonna raise it to a power of 30 and that just increases the contrast of my mask and just to show you what this mask is doing let's wire this mask directly and I'm gonna change this to a sphere and we'll wire this directly into our base color just so we can take a look at it so you can see that it's white on the top and then there's kind of a short fall off and then the rest of it is black so this is gonna make it so our puddles only show up on up facing surfaces so I'm gonna take this mask and multiply it by our color mask and now we're gonna get puddles that only show up on the top and there's no more ugly streaking down the side that's exactly what we're going for all right there's one more thing that we want to do eventually we're gonna want to create some normals but before I do that there's one more thing that I want to do with these puddles and I just want to multiply it by 1.1 and what this is gonna do is that it's gonna ensure that our puddles go all the way from black to white so I'm going to multiply this by 1.1 and then I'm gonna saturate it great so that's the puddle mass that we're going for all right the next thing that we want to do like I said is we want to bring in our normals now in order to bring in the normals we need to use some of the shader functions that we created in previous tutorials I'm going to bring in this weather wind ripples function and this one I haven't shown you yet I'm going to show you that in a minute and we also want this weather ripples function and this is the one that we created last week so we're just gonna bring it right in there and drop it down and now before we go on what I want to show you is this weather wind ripples function the purpose of this is to create ripples on the surface of the puddle as if the wind were blowing the water so I'm gonna wire this over here into base color just temporarily so that you can see what it looks like and it takes a wind value so we need to create a constant here and I'm gonna pass in a one telling it that the wind is at full strength so let's take a look at what we get from this all right so you can see that I have these normals that are scrolling across the surface actually you know what this might look nicer if I wire this into the normal socket yeah there you go so it makes it look like the surface of water so I haven't shown you what's inside here yet so let's go ahead and take a look at our weather wind ripples function so I have it open here here's our weather wind ripples so you can see I have two texture samples that are sampling the same texture it's the tea water in and this is a texture that just ships with unreal so everybody can use it I have two of them and I'm using different sets of UV coordinates to scroll them and then I'm using this method here to add them together let's walk this walk through this just a little bit at a time so just like I'm doing with the puddle mask I'm taking my world position to project the texture down onto the surface and I'm using the red and green channels of world position again and I'm putting red and green into the red and green channel here and also the blue and alpha channel here so now I have two sets of my UV coordinates appended together so I have red and green and then red and green again then I multiply those by this value here and what this does is it scales our world position so that the ripples are the correct size that I want so my first set are multiplied by point zero one eight and point zero one three and then my second set are multiplied by point zero zero seven zero point zero one seven so that will scale my coordinates then I've got time here and I'm multiplying time by 0.4 point zero two negative zero point one and zero point four and this is controlling the way that the coordinates are scrolling so it controls the speed and the direction of scrolling so I add my time and then I here I combined the red and the green and here I'm splitting them up again so I take the red and the green as my coordinates for my first texture sample and I take the blue and the Alpha of my coordinates for my second texture sample then once I've sampled I use this append node to put the red and the green channels together into a single unit and the same thing down here the red and the green channels into a single unit and then I add those together now here I'm multiplying the added together red and green channels by wind so this is the wind speed so I saturate it so it isn't allowed to go below zero or above one and then I adjust the range so that it goes between point two and point five and then I use this value to multiply my normal so what this is doing is its controlling the height of the normals so when the wind is not blowing my little ripples are at point two and when it is blowing they're at point five if I wanted ripples to be stronger I could increase this point five value or if I wanted them to be like non-existent when the wind wasn't blowing I could set this to zero if I wanted to so that is my control that controls the strength of the normal based on how hard the wind is blowing and then so I've multiplied to my X and my Y coordinates by the scalar value here and then I'm appending the Z component of the normal which is here I'm adding or multiplying the blue channels of the normal map together and using an append so the result of this whole function is that I have these normals that are scrolling across each other and making it look like the wind is blowing the surface of the puddle so that's pretty cool now the next thing that I need to do is take my weather ripples normal and this is what we worked on last week here you can see that this function that we created takes in an intensity the intensity of the ripples and it also needs UV coordinates so for the intensity just for now I'm gonna wire in this one and for the UV coordinates we actually want the UVs that we've created over here we're gonna project the ripples in world space from the top down using this multiple so I'm gonna wire this worldspace UV coordinate into the UV socket of my weather ripples function and then let's take a look at what these ripples look like if I wire them in as the normal all right so you can see this rain ripples pattern that created last that we created last week and it's pretty cool so let's take the normal result from the wind ripples and the normal result from the weather ripples and add them together so we're gonna add these two normals together and then we're gonna just mask out with a component mask again and then we're gonna create a normal by appending a 1 and if I wanted to here I could take the blue channel of these and add and multiply them and use that as the Z component of the normal but in this case I'm gonna save just a little bit of math and just use it a value of 1 all right and so let's see what happens when we use this as our normal nice so you can see I have the ripples scrolling across the wind ripples and their combined correctly with the rain ripples but this still isn't quite right because right now I've just got like the whole world is a puddle and that's not exactly what I want so I need to incorporate the puddle mask that I created so in order to do that what we're creating here we've created a material but what we're really creating is a function and so I need to be able to combine this puddle with whatever the normal is on the surface eventually I'm going to be adding these functions to any other kind of materials so if I have a rock material or a wood material or whatever kind of material I have I want to be able to apply this function to it so that it can look like it's being affected by the weather and I want to be able to take this Puddle and blend it with whatever the normal of the surface already is so in order to do that what I'm gonna do temporarily is I'm gonna create a constant vector e that and this vector is gonna int is gonna represent the normal of the surface as it is now so I'm just gonna make it zero zero one which is a flat normal and then I'm gonna alert that with my puddle normal so these are the normals of my puddle this is the normal of my object and then I'm gonna use my mask to blend between the normal of my object and the normal of my puddle so let's use this as our normal now and you can see that I'm only getting my animated normals in the area where my puddle mask is now remember if I if I wire this in as my base color again you can see that the puddle mask only shows in these specific areas now it's pretty evident now that we've got our normals blending in here that our puddles are kind of the wrong size and so what I need to do is go back and adjust the size of my puddle texture projection here so that I'm getting puddles that are larger because when we take a look at the way the normals look the normals are the correct size but the puddles are teeny-tiny and that's just not what we want so I'm gonna add another multiply here and I'm gonna multiply my world space position by a value of 0.03 and we can use this for now but you can adjust this value to whatever you want depending on how big you want your puddles to be all right so now you can see that I've only got a puddle that's here on the surface but it's it's more of a realistic size so super cool we created a shader that generates puddles and I can control the size of the puddles with this value here so I can shrink them and grow them and I can control the intensity of the rain ripples with this value here and I can control the intensity of the wind if I actually have a different value there we go so wind control rain ripple control and puddle size control and now what I need to do is take all of this and create a function out of it and I already have so let's take a look at that function now alright and by the magic of editing I instantly have a function that's a copy of the shader that we just created so you can see how I've created an input for wind an input for rain controller and input for the puddle size controller and an input for our normal so let's go ahead and take this function and apply it to a material and see what we get all right here you can see I have a wood material M wood oak and I just duplicated this material that comes with unreal and I added that the puddles name at the end of it and I've brought in my weather puddles function that we've been creating you can see I have inputs for wind rain puddles and normal and so what I want to do is go ahead and hook this up so here's the normal from the wood planks and I'm gonna wire these into my normal socket and then I'm gonna wire this normal out to this bass normal now it's giving me an error because I don't have wind rain and puddle values here so I'm just going to go ahead and create a constant of one and wire that into my wind rain and puddles value and let's take a look at what we get cool it's kind of subtle but if you look at just the right angle you can see that there's there's a bit of a puddle happening here now the reason that it's subtle is because I'm not using the puddle mask correctly this is our mask here and what we're gonna want to do is use this mask to blend between the standard wood values and the values that I want to give it so you can see here we've got a base color a roughness and a normal so let's just go ahead and add a linear interpolate and we'll use our puddle mask so where there are puddles we're gonna want it to look wet and where they're not puddles we're gonna want it to stay looking the way that they've got it so this is going to be our roughness well wire wire the roughness in here and then we'll just give it a constant value of zero for roughness for when the puddle is in that position we're gonna use this as a roughness and that should give us a pretty nice-looking puddle yeah there we go so we've got a smooth looking puddle and then a dry area over here so that's working pretty well nice so you can see that the puddles have wind ripples and they have rain ripples and I can control all these features independently so if i duplicate this value i can tell it well actually I don't want it to be raining but I still want the puddles on the surface so I'll give this a value of zero wire that into rain and now I'm not gonna get the circular rain ripples but I'm still gonna get the puddles and the wind ripples that's pretty cool now if I want to tone down the wind a little bit I can wire 0 into that that's gonna make the wind ripples a little bit softer and then I can use this value here to control the size of the puddles so if I want a really small little puddle I can maybe give it a value of 0.2 I don't know if you can even be able to see these yeah they're already gone so yeah here we've created a function that allows you to add puddles to things now if you'll remember in previous weeks we added drops and drips and wetness so now we have puddles and we have all the elements that we need to create a really cool weather system so in next week's video we're gonna take our puddle function our drops function our drips function and our wetness function and we're going to combine them all together to create the complete weather or rain function that I know that you've all been waiting for so be sure to subscribe to the channel and tune in next Thursday and we'll go over this really cool combining of all the weather effects thanks for watching we'll see you next week [Music]

Channel: Ben Cloward

Views: 19,341

Keywords: UE4, Unreal, Unreal Engine, shader, material, material editor, game development, real-time, tutorial, training, Unity, graphics, 3d, GPU, tech art, computer graphics, fundamentals, basics, beginning, learning, rain, water, ripples, puddle

Id: 7COoNjAGmAk

Length: 26min 17sec (1577 seconds)

Published: Thu Mar 12 2020