Foliage Hiding Planes - UE4 Materials 101 - Episode 32

[Music] in today's tutorial we're gonna learn how to hide the fact that our foliage is made out of large planes instead of individual leaves in order to reduce our polygon count we've created our tree canopy out of large planes and then we've created the texture for the planes with dozens of leaves this gives us dozens of leaves on a single polygon instead of using dozens or hundreds of polygons on each leaf if we change our shader to remove the opacity mask you can see that our tree geometry is made up of these large planes with lots of leaves mapped to each one and this is great because it means we can make a tree with thousands of polygons instead of millions but this technique does have some artifacts even if I plug back in our opacity mask you can still see that we're using flat planes especially when the planes are facing are not facing us when they're at glancing angles and so a lot of the shader techniques that we use on foliage are to hide these planes and make it appear that we have a tree with millions of individual leaves instead of just hundreds of large flat planes and so today we're gonna focus on clipping out the planes when you see them at glancing angles however Before we jump into that there are two things that I want to fix in last week's shader the first thing is can you see how the tree has these branches that are just kind of sticking out in weird directions that's because the UV coordinates in our shader are different than the way that that leaves were mapped originally on this geometry and so what I'm going to do is just jump over here to our shader and I'm going to bring in our texture coordinates and what we need to do is invert the V coordinate so I'm gonna mask off my red and green channel and split them up so I have my red channel here and I have my green channel here and I'm gonna invert the green so I'm just gonna add a 1 minus to invert my V coordinate and then I'm gonna bring those back together with an append vector node and with these new UV coordinates I'm gonna plug those into my leaf wiggle mask and also over here to my diffuse and my normal and now you can see that I no longer have those weird branches sticking out at strange angles because I inverted the you coordinate and mapped the leaves correctly to the planes the other thing that I want to do is in last week's tutorial we multiplied our opacity mask by a multiplier of 4 and the reason that we did that is because the branch parts of the opacity mask were fairly dim so I wanted to boost those up but I think the value of 4 was a little bit too high so I'm just gonna change that to a value of 1.5 and with those changes we're ready to jump in now what we want to do is if we take a look at our tree again you can see that some of the leaves are it's really obvious that they're on planes especially when I'm looking at the planes when they're flat I have a little plane here down here that I want to use to illustrate this the leaves look pretty good when I'm looking straight on to the plane like this but as soon as I turn to the side and I can see the plane like this then it becomes really obvious that all of those planes live on one or all of those leaves live on one single plane instead of being individual leaves so I need to change my shader so that when I'm looking at the leaves like this they show up but when I'm looking at them at a glancing angle like this they disappeared that will hide the fact that the leaves are on a flat plane alright so in order to illustrate this principle a little bit better and keep it simple I'm gonna build a little test shader for this plane and we're gonna work on that together and I'm gonna make it fade out and then we'll transfer that same principle over to our tree so I'm just going to come over to our starter content materials and I'm gonna make a new material and I'm just gonna name this plane fade out and I'll select my paint plane and apply my material and then let's open this material and make it fade out when we're looking at it on glancing angles so the first thing that we need to do is change our blend mode from opaque to masked and that will expose our opacity mask pin so that we can make our material fade out okay so I'm gonna take the camera vector and I'm gonna do a dot product between my camera vector and my normal so here's my dot product node and I'm gonna bring in my vertex normal and so what this is gonna give me is when the camera vector and the normal are parallel I'll get a value of white and or a value of 1 and when they're perpendicular I'll get a value of 0 now when they're opposite I'll get a value of negative one but I don't really care about that for now so I'm just gonna value I'm just gonna wire this directly into our color just so you can see what it looks like and let's switch back to look at our plane and so you can see that when I'm looking straight at the plane here it's white but then as I rotate around to the side you can see that plane it begins to to get dark and so this is what our dot product is doing it's comparing it's measuring the angle between our surface normal and our camera vector and when those two are perpendicular I get a value of zero and when they're parallel I get a value of white so this is the basis for what we want to do with our plane so I said I didn't care about the value going negative but I actually do because I'm gonna change this so that my plane is double-sided and now I'll show you that when we come around here to the backside of the plane it's completely black and we don't want that we want it to be black when we're looking at it at a glancing angle but on either side no matter which side we're looking at we want it to be white when we're looking at it straight on and so in order to do that I need to add an absolute value node and so this is going to take any values that are negative and automatically make them positive and so now if we switch over you can see that we're going dark as we look at the side and then as we come around to the other side we go white again and that's great that's exactly what we're looking for so now if we take these values and instead of wiring them into color if we wire them into our opacity mask you can see that my plane is there when I'm looking at it straight on but then as I come to the side can you see how it's clipping out that's because my opacity is turning black as I get to the side and this is the technique that we want to use now this plane is clipping out a little bit early I think maybe I only want to lose it when I'm actually looking at it at a glancing angle instead of this early so I need to adjust my value just a little bit what I'm gonna do now is invert my value I'm gonna go one minus and then I'm gonna multiply the value by itself this is kind of like raising it to a power of two if I multiply the value by itself and then I'm gonna invert it again so I'll add another one - to bring it back to the white to black range that it was before and then wire that in and what this is gonna do is change where the plane actually fades out so I'll be able to rotate around a little bit farther now before the plane is gone okay so this is the technique that we want to use and apply to our tree leaves and so I can just take this portion of the shader and copy it and I'm gonna paste it into our tree leaf shader here and let's go ahead and plug this instead of plugging this into the opacity I'm just going to turn off opacity for now and let's plug this into the color so that we can take a look at the results that we're getting and if we zoom out here and come on up and take a look at our tree what we want to see is we want to see the tree leaves fading out when we look at them at glancing angles or we want the planes to be white when we're looking straight at them and then we want them to be black when we're looking away from them and I'm seeing some kind of weird results like can you see this this black line right here I don't think this is this is right so it should be white when we're looking at it straight on and then it should fade to black when we're looking at it like this but instead we're getting these weird lines and the reason that we're getting these results is that the surface normals of these planes are not pointing in the direction that the planes are actually facing and - in order to show you that I'm gonna select the tree and I'm just gonna bring up the tree model itself and we're gonna turn on the normals now I hope this is obvious it's actually pretty subtle but if we come over here to the ends of a brain and we look at the normals I want to show you that the normals are actually not pointing in the direction of the planes they're pointed outward can you see these little green lines here they're actually pointed out and away from the tree if we look here at the top these are pointed up and these normals here are pointed out to the left and so what's happened here is the normals of our vegetation have been adjusted so instead of pointing along the in the direction of the plane they're pointed out away from the centre of the tree this is something that we'll talk a little bit about in next week's tutorial but in order to actually get good results we need to to do something a little bit tricky to overcome the fact that our surface normals are no longer pointed in the direction that we need them to be so what we're looking at here are the vertex normals and like I said before these vertex normals have been tweaked and adjusted so that the lighting will look correct on this tree what we actually want to fade out the faces is the face normal and so what I'm going to show you now is how to compute the face normal of a polygon when you have a vertex normal that doesn't actually represent the direction that the face is facing so just to kind of explain what I'm gonna do beforehand there are two nodes in Unreal one is called DDX and the other one is called ddy and what these give you is the slope of the surface so DDX will give you the slope of a face going in the x direction relative to the screen and d dy will give you the slope of a face in the Y direction relative to the screen and so if we have the X slope and the Y slope and then we do a cross-product between those two what we'll end up with is the face normal so we have a vector going in this direction and a vector going in this direction and we do a cross-product between those two and we get the face normal that we're looking for so let's go ahead and implement that now we need to do this instead of our vertex normal here so the first thing that I'm going to do is add our absolute worldspace position and then I'm going to add our d dy and our d DX so this is going to give us the slope in the Y direction of the screen and this is going to give us the slope in the X direction of the screen and now like I said we need to take the cross product of these two and this is going to give us the face normal of the polygons and so we're gonna normalize this and I can use this as my normal instead of my vertex normal just to illustrate this I want to show you what this looks like so if I take my vertex normal world space and plug it into my color you can see that these normals are not they're not flat can you see how there's this gradient here that's because the normals have been bent but if I take my face normals that I just computed and plug them into color you can see that I'm getting a single normal for each individual face and the direction that it's facing so this is a fantastic trick when we've tweaked the normals so the lighting on the foliage what looks correct we can still derive the normals of the faces using this D DX and D dy trick so I'm just going to plug this into our dot product here instead of the vertex normal and then I'm going to take this bit of shader code that we've created and I'm going to multiply it by our opacity mask so opacity mask is currently at 1.5 and so I need to saturate the result of that and then I'm going to multiply that by the mask that we've created based on our face normal and then we'll wire wire the result of that into our opacity mask slot here on our root and then one last thing I'm gonna do is I'm just gonna take our color and plug it back into our base color node all right and now you can see that we're getting our final results now what I want to do is rotate the tree around a little bit and I want you to watch and see that the planes fade out as we get to glancing angles so as I look at the the planes at glancing angles they disappear so instead of showing off the fact that all of the leaves are mapped to a single plane they just go away and that's basically hiding the fact that the planes are flat and that the leaves are all on a single plane so I really like this trick it's something that we use to to make the leaves just look better and to kind of try to hide this trickery that we're using and make the leaves still feel like they're part of a volume even though they're each mapped on individual planes all right before I sign out today there is one more thing I want to address last week somebody asked in the comments if I could go over vegetation or foliage shaders for mobile and I just have a couple of comments that I wanted to make on that first of all I haven't created any mobile games myself so I'm not really qualified to do that but what I would say on that topic is pretty much all of the things that we're doing here are more for high-end platforms and if I were doing this for mobile I probably make a shader that was just the single leaf texture and maybe a normal map maybe not but just keep this as simple as possible so basically like I would get rid of the leaf wiggle I would get rid of this plane fade out thing that I'm doing here and just use like a single texture map to the base color and the opacity pretty much all the fancy stuff we're doing here is try to make to make our vegetation look as good as that as we can and if your main concern is performance you can get rid of all the fancy bells and whistles and just do something like as plain as possible so that's my advice for mobile like I said next week we're gonna focus on this this idea that I introduced today of the the vertex normals being worked and not actually representing the face normals at all but that the vertex normals are warped we'll talk about that more next week's tutorial and I hope you enjoyed the tutorial today and we'll see you next week [Music]

Channel: Ben Cloward

Views: 4,943

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, two-sided foliage, translucency, translucent, vegetation, leaves, foliage, subsurface scattering, ddx, ddy, face normals, fresnel, clipping

Id: U7Tg7uIeSeQ

Length: 18min 44sec (1124 seconds)

Published: Thu Jun 25 2020