Rain Drops Shader - UE4 Materials 101 - Episode 14

[Music] in this tutorial video we're gonna create a raindrop effect if you'll remember last week we went over the effect of how to make a surface look wet this week we're gonna create some raindrops and then in the following weeks we're gonna create several other wetness and rain effects and then finally we're gonna string them all together to show you how to create a complete rain wetness system alright so let's go ahead and get started we're gonna start out today using this texture this is our raindrop texture and you can see that I've got right now the red and green channels displayed this is for our drops this is what's going to create the normal of our drops and then in the blue channel I have this mask which is a temporal offset and this this mask makes each of the drops appear at a slightly different time and then finally in the Alpha Channel I have this mask the small black dots represent drops that I want to be static and the larger white dots represent drops that I want to be animated on the surface if we look at our reference again you can see that some of these drops are static and when a drop hits it's a little bit animated there's some movement to it so that's the effect that we're gonna be going for so this is the texture that we're gonna use let's switch over here to our shader and the first thing that we need is some UV coordinates for this so I'm gonna type UV there we go texture coordinate and I'm gonna multiply these by 3 just so we get something that's a little bit larger so I'm gonna multiply the UV coordinates by 3 and then I'm gonna plug something in and ice it a little bit larger but what I really meant was so that the texture will tile a little bit more okay if I just plug this into the base color of the shader we're gonna get something that's really weird and so what I need to do is unpack this texture create a normal and use the other masks in the correct way the first thing that I'm going to do is create my normal so I'm gonna put down an append vector node and I'm going to put together my red channel and my green Channel and this is eventually going to be my normal but not quite yet the first thing I need to do is multiply by two and subtract one when my normal is in the texture it's from a range in a range of zero to one but a normal is actually in a range of negative one to one so when I multiply by two and then subtract 1 what that's doing is expanding out the data that's been compressed into the texture and converting it from the texture into a normal so I'm going to multiply by 2 and subtract one alright so that's a pretty good normal except for one last thing this is just a red and a green and I need a three channel so I'm going to put down another append and in this case I'm just going to append a constant vector of one all right let's see what I get if I pass this into my normal so I'm just gonna break off this base color here and I should get ya so you can see they've got these nice drops on the surface now that's already starting to come together really cool alright the next thing I'm going to do is pull out my masks and my masks are stored in the Alpha Channel just like I did up here where I unpacked my normal I also need to unpack my masks so I'm gonna add a multiply I'm going to multiply by 2 and subtract 1 again [Music] and then I'm going to saturate this which means clamp it between zero and one and this is going to be my animated mask so in order to do the animation I'm gonna need a time node and I'm gonna multiply time by a constant value of 0.7 just so I can get the right speed for my drops so I'm going to add a value here of 0.7 and there's my time and then I'm going to take this blue channel and I'm gonna subtract my time and I'll show you what the result of this is gonna look like so here's my blue channel remember I said that was my temporal offset mask and I'm gonna subtract my time here and then I'm gonna do a frac which gives me just the the decimal portion what happens here is here's my time and if I subtract time from this value it's just gonna keep on getting lower and lower and lower so as time increases I'm gonna be subtracting more and more and more and more but if I put a frac on here what this is gonna do is throw away the part of the number that's on the right side of the decimal and just keep what's less than one and this is gonna basically do a continuous loop between zero and one so let's plug this into the base color and I'm going to disconnect the normal here just so we can see what's going on all right you can see here that I've got this mask here that's kind of speckle II because my blue channel has all these values that are just slightly different grayscale values I'm getting this the result is this mask that like slowly animates and flashes the various values and I'm going to use this to animate the the larger drops alright so I'm gonna take my time mask here I'm just gonna move it up into place and then I'm going to multiply it by my animated drop mask that I've got here and then let's take a look what I get as a result I'm just gonna plug this into base color okay so you can see that my larger drops now have a mask and the mask is animated yeah that's pretty cool and if I take this and I multiply it by my normal so remember these nodes up here at the top are my normal and I'm multiplying that by my animated mask and then appending my one vector I'll just disconnect this base color here and wire this into my normal again now let's see what we get all right so now I've got some nice animated raindrops you can see how they start out big and then they kind of soak into the surface which is exactly the effect that I'm going for so pretty cool all right now the next thing that I want to do is add in my static raindrops so I'm gonna add a multiply node and I'm gonna multiply so if you'll remember my static raindrops are these little black spots here and what I want to do is invert this so everything that's gray and everything that's white becomes black and everything that's black becomes white so I'm going to come up here and I'm going to multiply it by a constant value of negative one and let's see what I get from this I'm gonna disconnect my normal again and plug this into the base color just so you can see what the result of this mask is now I want to give you the opportunity to help me troubleshoot this a little bit there's something here that I don't understand if I have these these smaller drops in my mask that are black and I multiply two and subtract one these smaller drops that are black should become white the gray should become black and the black areas should become negative one so doing this should make these drops white and everything else black but the result that I get is as if my range is from 0 to 1 instead of negative 1 and I don't really understand why that's happening I can get around the eye the the issue if I add a power node and just raise it to a power of like 10 and so that's what I'm gonna do in this case but if you can see what I'm doing wrong here and you can tell me I'd really appreciate if you could post that in the comments down below because it would be nice if we could make this a little bit more a little bit more efficient and not have to use this power node alright so finally I'm just gonna saturate this and then I'm gonna take this mask and I'm gonna add it so this is my static drops mask and this is my animated drops mask and I'm just gonna add the two of those together and then this is going to give me my final my final mask previously I just had the result of my animated mask plugged into my normal but now I'm gonna take the result of my animated mask and my static mask and I'm gonna plug that into my normal and let's see what that gives us all right so now you can see I have some animated drops and I also have some static drops and that looks pretty cool I'm liking what I've got so far almost done there's just a couple of more little touches that I want to add so let's clean this up just a little bit I'm gonna move my normal nodes over here my static masks here or rather my animated masks here I'm gonna move my static masks over here okay so we're adding those two together and the last thing that I want to do is create one more mask that has to do with the direction that the object is facing right now you can see that this thing has these raindrops all over it but honestly that doesn't really make sense because raindrops come from the sky and so why would raindrops be showing up on the bottom of this thing well they shouldn't be and so what I'm gonna do is I'm gonna add a vertex normal and you'll notice that this is vertex normal WS which means it's in world space and then I'm gonna add a component mask because I just want the Z component of this thing because if you'll remember unreal is Z up which means the Z part of the world space vertex normal is the up direction and I'm gonna saturate this guy and then for one more control I'm gonna add another multiply and this control here is gonna be the the control that I can use for if it's raining or not so here I've got a value of 0 I'm just gonna change this to 1 and when I multiply this guy in here this this can control you know is it raining or is it not raining and then I'm gonna wire this here and I'm gonna take my masks and multiply them by that and then finally I'm gonna wire that into my normal and so what you're gonna see here in a minute is I'm gonna get raindrops on the top and not on the bottom which is really cool now you can see with all these masks I've kind of toned down the strength of my normals and if I want to kind of beef up how big these drops are you can see how they're looking kind of flat so what I'm gonna do is instead of multiplying by two and subtracting one I'm gonna multiply by four and subtract two and that should give me like a little bit beefier normals so that's kind of a cool effect and then last week we talked about making things look wet by increasing the smoothness and so the very last thing that I'm going to do in this effect is just create a little bit of roughness here so I'm gonna take the mask that I created Oh before I do that let's just take a look at this final mask so I'm gonna pass my mask into the drops so you can see I've got my static drops my animated drops and they're on the top but not on the bottom that's pretty cool well what I can do is I can add a a 1 minus node to invert this mask and I can pass that in as my roughness [Music] so now I've got drops that are a little bit more smooth they start a little looking a little bit more like water and if I want to I can adjust these a little bit with a power node so I'm gonna add a power and I'm gonna raise this to a power of 0.1 actually reverse that I'm gonna raise it to a power and then do the 1 minus and that's gonna be our roughness value all right pretty cool so now we've got some drops that look like water nice so I've got static drops I've got animated drops and my drops are looking kind of wet so you can see if I took this and I combined this with what we did in last week's tutorial video I could get raindrops and I could get surfaces that looked wet and I can start combining these things to create a really cool looking system and so in a future video or I'm gonna show you how to do that but not today right now we're gonna just call that good with our animated raindrops and yeah so that's gonna be it I hope you enjoy the video if you did be sure to LIKE and if you have any questions leave a comment down below and to be sure that you get to see the next one appreciate it if you could subscribe to my channel thanks a lot [Music]

Channel: Ben Cloward

Views: 18,020

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, drops, drips

Id: 5eyq2FJ6lig

Length: 16min 41sec (1001 seconds)

Published: Thu Feb 20 2020