Rustling Leaves Shader - UE4 Materials 101 - Episode 12

[Music] this video does a really good job of illustrating a frustration that we often run into as video game developers we go out into the world to collect reference who are the effects we're trying to achieve and what we often find is infinite complexity this video is looking up into the canopy of an aspen grove and what we can see here thousands of leaves rippling in the wind it's an effect that makes us sound that I really love but it's also kind of discouraging to look at as a developer there's so much complexity here each little leaf and there are thousands of them is pivoting it on its own little stem and being blown by the wind and the wind is being weakened as it collides with each leaf and each stem and each branch and there's just so much going on here the trees are swaying the leaves are wiggling and somehow I have to achieve this in 30 frames a second or more so what we need to do as developers is figure out what can I take here that will give the impression that this is happening without the infinite complexity that actually exists one of the things that we do is we take leaves where it might take you know a hundred or a thousand polygons per leaf and we map several of these leaves to a single polygon let's take a look at this image here so here's an image of a texture that we might create and this has you know maybe 75 or 100 leaves on it and we put this on a single polygon and that reduces our complexity significantly but now we've introduced a new problem the polygon itself if we want to animate it will move as a solid unit so all of the leaves will move together as if they're one in this tutorial video we're going to go over a technique for animating the individual leaves on this polygon to approximate the complexity that we got in that reference video and so let's jump right into unreal and take a look at how this works all right so here we are in the unreal material editor and you can see that we have our leaf texture here and we can just take a look at that texture this is what it looks like it's a 1024 texture with a nice alpha channel cutting out the leaves and we have our texture coordinates plugged into it and right now the branch is just static so what we want to animate this and we've learned from previous tutorial videos that we can animate something like this by using time so I'm gonna bring in a time node and plop that down and if we add time to our texture coordinates we'll get some animation so I'm gonna plug my time into the B socket of my add node and plug my texture coordinates into the a socket and then I'm gonna plug that into the UVs in my branch now this is gonna be a little bit nuts but we're gonna build this up step-by-step okay so you can see that my branch is now moving there's animation there but it doesn't feel like wiggling leaves at all so the first thing that we need to do is add a couple of controls to control how much movement there is so I'm gonna add a multiply node and we're gonna multiply time by kind of a small value I'm gonna add a constant here and let's multiply time by let's just slow it down a little bit let's save 1.4 for now we'll multiply time by that now the other thing that we need to do is slow down how much is actually moving Oh first before we do that you can see that it's just growing constantly right now and here I'll plug this in it'll actually speed it up a little bit because I have a 1.4 multiplier it's scrolling constantly and what we want it to do is wiggle or we want it to go back and forth and the way that we achieve that is with a sine wave so I'm gonna add a sine node here and what this does is as my time value increases sine will go back and forth between negative 1 and 1 given an ever increasing value so I'm just gonna plug this right into sine and then I'm gonna plug that into my ad and what we're gonna see now is that my texture coordinates are gonna shift back and forth and it's going extremely fast so it's kind of hard to tell what's going on right now but let's see if we slow down time a little bit maybe multiply this by 0.1 and so now you'll be able to see a little bit better what's actually happening here so my whole branch is shifting between negative 1 and 1 and this is significantly more movement than I actually want so what we need to do now after we've done this sine wave is add another multiply node and we need to multiply this sine value by something really small I'm gonna copy my constant node here and plug it in and then we're going to set this to zero point zero zero six I'm just gonna tone this down a lot let's see what we get all right so you can see it's been toned down significantly I don't know if you can even see it moving anymore I'm gonna set my time value back to my original one point four so you can see it moving let's see what we get here all right so my whole branch is moving now it's wiggling just a little bit but you can see that with these multiply nodes we've kind of got it under control now so that the branch is moving within a reasonable amount for how much wiggle needs to take place what I need to do next is find a way to isolate individual leaves on this branch so that I can make individual leaves wiggle in different amounts from the others in order to do that what I need to do is paint a mask that looks like this this is my leaf texture and I took it into Photoshop and I painted green blue and red to isolate individual leaves and you can see that these splotches are really low resolution and chunky you don't need a high res texture for this mask all you need are just enough to to isolate individual leaves and you can go outside the boundaries of them as long as you're able to designate individual leaves as belonging to the red group the green group or the blue group in this texture that I'm creating I'm not actually representing color with these masks I'm just using the individual red green and blue channels to represent different groups of leaves so let's switch back to unreal and I want to show you what this mask looks like here's my mask texture in unreal and you can see that I have red green and blue and if I turn off these other channels here's my red channel my green Channel and my blue Channel and you can see that I've been able to separate these leaf groups out by using this mask so let's go back to our shader and incorporate the masks in so here's my mask texture let's take these time controls that I've created and move them over just a little bit to create room for my mask texture and I'm also gonna bring up these other values because these are these are numbers that I've I've tweaked before and instead of my individual 1.4 value for time I'm gonna wire this constant 3 in and it has one point for one point six six and negative one point three three what I'm doing here is instead of a single time value I now have three time values and all three of them are going through this sine wave and instead of a single size value here I'm gonna multiply this by 0.006 negative 0.0065 and zero point zero zero five five so what this is doing is instead of just a single channel now I have three channels and I'm just gonna compact these a little bit so that I can fit them in just kind of clean up my nodes a little bit then I'm gonna take these time values and multiply them by my mask okay and then once I've got that plugged in I'm gonna split those out and then add them together so I have my red mask my green mask and my blue mask and I've added all of those together now I'm gonna bring these guys down and add this to my UV coordinate let's take a look at what we get okay so you can see here I've got individual leaves and they're wiggling according to which group they're in based on the mask that I painted so I have some leaves that are in my red mask group some leaves that are in my green mask group and some leaves that are in my blue mask group and I'm doing all of that together here where I set up my time my distance multiplier and then multiply that by my mask and add these values all together pretty cool so this is basically the effect that I'm going for and up until now I've been showing this preview in unlit mode but I'm gonna switch over to lit mode so that we can take a look at the last little piece of what I'm gonna do I have a couple of more nodes down here and what I'm gonna do is control the normals of my leaves with my animation just like I've been controlling the wiggle of the leaves so here I have a multiplier 0.9 and I'm gonna wire the result of my sine wave into that and then here I have my mask and I'm gonna multiply my mask here and then I'm gonna add that to my vertex normal so I have the vertex normal of the polygon and if I add this animated value to my vertex normal then I can use that as my final normal map and normal purists are gonna look at this and go yuck what are you doing to your normal but if I take this and I plug this into my normal I'll show you what this is gonna do it's just gonna wiggle the leaves a little bit so that it looks like instead of just moving back and forth they're actually kind of wiggling a bit and this is a pretty cool effect that makes the leaves feel a little bit more 3d than just being mapped directly onto a flat polygon and so this is imitating the wiggling that we saw in that reference video at the beginning now one thing that's important to know is that we're trying to make this effect as cheap as possible because generally in video games vegetation is fairly expensive to draw and so there are a lot of things that we've left out for one thing you can notice that all of the leaves are wiggling in one single diagonal direction now if I wanted to I could add a lot more complexity to this shader and make the red green and blue groups wiggle in different directions but in this case I've chosen to just make them wiggle in one direction but move in different distances and different time offsets so that's a detail I chose to leave out intentionally to make this shader cheaper if you wanted to you could go back in and add that if you'd like but one of the things that we face as shader artists is we have to create an effect that achieves the look that we're going for but make it as cheap as possible so that we can keep the frame rate up for the player and that's what I'm trying to do here so let's take a look at a couple of examples of before and after of what this effect can look like on a tree all right here's a tree and you can see that we have vertex animation applied here it's kind of moving around in the wind but as I said at the beginning the entire polygon is moving and you can tell that the individual leaves are not really animated it's just kind of moving the whole polygon instead of looking like the the reference video that we looked at at the beginning so we need to be able to move these leaves around if we actually want this to feel like a realistic tree so let's take a look at what it looks like with our shader applied and so here's what our tree looks like with the wiggling leaf shader applied to it you can see that there's a lot more life and it's a lot more similar to the original reference footage that we looked at and it doesn't look any longer like the polygons are moving around as a single unit but all of the leaves feel like they're rustling independently even though there's only actually three groups the red green and blue group it feels a lot more alive and there's a lot more going on in this tree alright I hope you enjoyed this video be sure to give it a like and subscribe to my channel if you'd like to see more videos like this in the future [Music] [Music]

Channel: Ben Cloward

Views: 12,475

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, animated, leaves, leaf, rustle, moving, canopy, tree, foliage, vegetation

Id: 5FxaVC5w97w

Length: 15min 54sec (954 seconds)

Published: Wed Feb 05 2020