Direction Masks - Shader Graph Basics - Episode 27

today i'm going to show you how to make directional masks in unity and unreal let's get started [Music] last week we talked about position data and i showed you this example of how to use the world position node to project a texture onto a mesh but there's a problem with this projection because it's just coming from one direction and so it gets stretched and smeared down the sides so today i'm going to show you how to create a directional mask so we can hide the stretched areas and just apply this texture in the areas where it looks good so let's switch over to a new shader here and the first thing that we need in order to create a directional mask is the normal so i'm going to bring up the normal vector and in our case we're going to be using the vertex normal but it's also possible to use a pixel normal to make per pixel masks instead of masks per vertex okay so here's our normal and this is data that points in the direction that our model is facing so if our model is facing up you can see that it's green here on the top if our model is facing to the side you can see that it's red over here so our normal indicates the direction that our model is facing but there's a problem with this data and that is uh it goes both positive and negative so if i'm facing uh to the right you can see that it's positive but if it's facing to the left it's black over here which means uh it's negative data and i don't want negative data in my mask so in order to fix that i'm going to add an absolute node and what absolute does i think we've talked about this before but it turns negative numbers positive so you can see that here where it's red positive on this side it's also going red or positive on this side all right the next thing that we need to do is sharpen this up a little bit because it's extremely blurry right now the data goes very smoothly uh all the way from one side to the other but we need to increase the contrast of our mask and so i'm gonna add a power node to raise this data to a power and by default in unity our power is raised to a power of 2 here you can see and already it's starting to become a little bit more uh focused or sharp you can see that i have definite areas of green blue and red um but i'm going to raise this up a little bit more i'm going to raise it to a power of 8 instead and now you can see i've got nice focus let's go ahead and wire this into the fragment color and the emissive so that we can look at it in our main preview here now if we rotate this around well actually uh if i rotate it around it does nothing because i'm projecting it in in world space so let's switch our normal just temporarily to object space instead so this time now the normals will be more stuck to the surface instead of relative to the world so you can see i can now rotate around and see what the mask looks like from different angles so i've got a red mask coming from the left and right i've got the blue mask coming from the front and the back and i've got a green mask coming from the top and the bottom so if i wanted to i could stop here i can use this power node to make these masks sharper and just come specifically from uh the one direction that that they're pointing and if i add a split here at the end now i can isolate just the red mask and now i can project just from the sides or i could isolate just the green mask and this one will allow me to project just from the top or if i isolate just the blue mask it'll allow me to project just from the front and the back so pretty cool i've got i've got a mask that is coming from uh one specific direction and i can use this with my projected texture however what i want to do today is go just a little bit further than this and i want to show you how to make masks that fill in the space you can see here on the preview note of power i've got this empty black space that i'm not using and what i want to show you next is how to move these masks in so they fill in all of this empty space so let's go ahead and do that so i'm going to take my power node here and i'm going to do a dot product with the power node and i'm just going to give it a dot product of one one one and the results that's gonna give me are uh wherever my mask is solid as a solid color either red green or blue it's gonna be white and where it's a black color it's going to be black so now you can see i've kind of got the black and white version of this here now if i want the masks to come all the way to the edge what i can do is take the result of this power and divide it by the result of the dot product and so i'm going to wire this the result of this dot product here into the b socket of my divide and what that's allowed me to do is get a mask where each of the each of the directions of the mask come right to the edge of the directions of the other two masks so i've filled in the gaps and i'm able to create a mask that goes right to the edge and again i can use this power node here to control how sharp these edges are so if i want one that's maybe a little bit blurrier i can set uh my power node to five and now i've got a little bit more blending so let's let's connect this into um the base color and emissive so that we can see it on our main preview here so now you can see that i've got these these masks that are a little bit more square and they come right to the edges of each other and meet there and then they have these kind of blending zones and i'm able to control how blurry or sharp the masks are by using uh this power node here i can raise it to a power if i want them to be really sharp i could raise it to something like 64. and now my each of my masks comes right up and butts up against uh the other two masks so i've got these very defined and specific zones uh of of projection so now what i can do is i can take these masks so here i've got my result coming out of my divide node i'm going to wire that into my split and now i can use uh as i said before i can use green for projecting from the top blue for projecting from the front and back and red for projecting from the sides so now if we go back to uh this example that we are using from last week uh i'm projecting the texture in this case i'm projecting the texture from the top um because i'm using the x and z components of my position so i'm just going to copy these nodes and paste them into my my projection shader here so i'll open this up and let's wire our the result of our texture into our base color and emissive and now once again i've got the texture projected but it's smearing down the sides so like i said because i'm projecting from x and z i'm using a top projection so if i want to mask out that top projection i need to use green so here i'm going to take the result of my projected texture and i'm going to add a multiply node and then i'm going to multiply my projected texture by the green channel of my mask so uh wherever uh it's the top or bottom you're going to get white from this mask and everywhere else we're going to get black so if i then wire the result of this into my master stack now what we're going to see is i'm projecting the texture only from the top and the bottom and everywhere else i've masked it out so that it's black so i've got my projected texture showing up where it's not stretched but where it is stretched i've been able to mask out those areas so the stretching doesn't show these edges are kind of sharp for what i need and so i'm going to lower this down to something more like a power of eight now you can see that it has a nice uh a nice fade out here as it gets toward the edges okay so that's how you make a directional mask in unity let's switch over to unreal and i'll show you how to do it there all right so here we are in unreal and you can see that i'm doing something very similar and unreal than that i did in unity so here is my vertex normal coming in and you can see that it's the vertex normal in world space and once again i take the absolute value of the world normal so that i get rid of the the negative values of my normals then i have a power node and in this case i'm raising it to a power of 8 and again this is controlling the sharpness of my mask and then just like i did in unity i'm taking the dot product of uh this power node here uh and dotting the values with uh one one one so if we wire this into base color uh you can see once again i'm getting white where my mask is a solid and i'm getting black where it's not let's just wire this in temporarily to take a look so you can see here that i'm getting the the masks coming from the direction and i take the dot product of that and i divide my original mask value by the dot product of it so that i can make those directional masks come right to the edges of each other all right then i'm able to use the split component node here to break the masks into their individual directions so it's a little bit different in unreal because the directions are because unreal is z up and so you can see that the up and down directional masks are blue in this case and then the y direction is green and the x direction is red so here is the projection that i'm doing with my texture and let's take a look at that so you can see i'm projecting my texture from the top down just like i did in unity and i'm doing that because i'm using the x and y values of the absolute world position like we talked about last week but as i showed before we're getting this stretching and so we need to take uh the the blue channel here which in the case of unreal is the top and the bottom and multiply our mask multiply our texture by our top and bottom directional mask which is what i'm doing here so i'm going to wire the result of this multiply in and now you can see that i've masked it out and i'm only projecting the texture now in the top and the bottom and on the sides here where the stretching is happening we're masking it out so we're not getting at that stretching all right now the next thing that you might be asking is well what if i want to project from the top and i also want to project from the side and i also want to project from the front well that is called tri-planar projection where you're projecting your texture from the top and the side and the front and it's a fairly common technique that we do when we don't want to use the uv coordinates on our model to apply a texture we can just use the model's normals and position data to project a texture onto the model this is a really cool technique and we're not going to talk about it today i'm going to save the tri-planar projection explanation for next week when we can spend a little bit more time now that we've talked about how to project our texture and also how to mask the texture based on the direction of the projection we have these two elements in place and we're ready to talk now about how to project in three directions at once so you can see we're kind of building up our complexity we started out with just position and then we talked about masking based on the normal and then next week we're going to talk about how to project in all three directions and create tri-planar projection and also going to explain uh what kinds of things tri planar projection can be used for so i hope you come back next week and look forward to sharing that with you i just want to take a minute here at the end to thank you guys i really appreciate each week you coming back to watch my videos to make comments and support my channel it's really fun for me to make these videos for you and i appreciate i appreciate your interest in learning and your support and trust in me to teach you useful things for how to create shaders and materials in unreal and unity so thanks again and i look forward to talking to you again next week [Music]

Channel: Ben Cloward

Views: 1,062

Keywords: UE4, UE5, Unreal, Unreal Engine, Unity, shader, material, material editor, game development, real-time, tutorial, training, graphics, 3d, GPU, tech art, computer graphics, fundamentals, basics, beginning, learning, shader graph, getting started, vertex normals, local space, object space, world space, mask, directional mask, texture projection

Id: HKSIxFnsHuk

Length: 15min 38sec (938 seconds)

Published: Thu Dec 16 2021