Unreal Engine 5.4 - Texture Graph (New Feature)

in this video we'll take a look at a new experimental feature added in unreal 5.4 called the texture graph it will allow us to make textures and modify textures through a node-based interface we can use this to create our own customizable or adjustable textures such as a brick pattern we'll also go over how you can make your own custom notes as well for use within the texture graph we'll start off by going up here to edit plugins and make sure that we have the texture graph plug-in enabled and loaded once you're sure that's enabled we'll be able to create a text your graph by going to our content browser and right clicking and going to texture texture graph I'm going to create a texture graph and for now you can name it whatever you want but I'm going to call mine text graphcore test and once you've created your texture graph you can double click on it to open it up and the very first thing that you'll see is this interface where we can start creating or modifying our textures now the top left has nodes that are available to use there's not that many right now but I assume they'll end up adding more but by default they're kind of shown as these blocks here and I actually prefer to change this to a list view I think it looks a little bit cleaner and easier to find things but you can also find all these exact same noes when you rightclick and you can search for them as well now by default we'll have this output that's going to be what we end up with whatever we create we'll be outputting the texture through here and you can have multiple outputs but for now we just have one now we can start creating noes so if we want to create a brick or tile pattern maybe we'll start off with a node so I'll go down here and we could see there's a section called procedural and we can create a noise pattern a noise a pattern a shape a couple different things and we're going to drag in a pattern and by default it looks like this kind of tile and if we start changing the amount of tiling there we can start seeing this update so you also have options or details for each note that you create when you select a node it'll display some options in this details panel now whatever node you're selected on is what will be displayed here in the node preview if I select the output it will display that which is connected to nothing but if I connect the output to my pattern now it outputs that pattern and we even see it on this 3D preview in the bottom right so that's kind of how we'll be able to look at what we're producing or making if it's connected to the output it'll be displayed in the 3D preview but if you just select the node then it's going to show it in this 2D node preview you also have a histogram here uh that you can see for red green and blue and Alpha channels uh but for now I'm just going to look at the preview I find that a bit more useful so if we want this to look like a bunch of bricks and we want to have it where we can control the color and control the look of those bricks but do this all procedurally that's something we can start to build we have this pattern that kind of looks like bricks it's more like tiles but we just need to change the tiling or the ratio and sizing of these squares to look a little bit more rectangular to kind of look like bricks so maybe what I'll do is I'll select this pattern and we're going to change the repetition on X to something like five and repetitions on y to something like 16 now we have something that looks a little bit more like a brick pattern but we need some offset so if we go to the offset negative values we offset it to the right and positive values will offset it to the left if I put it to an offset of 0. five now we start to get something that looks a little bit more like bricks but it might be nice to have a little bit of a taper or fall off on the Ed edges of them so maybe I'll go to where it says bevel here and just add a tiny bit of a bevel like 0.1 and then from there we can also adjust this bevel curve maybe I want to be a bit sharper because bricks look a bit soft of a fallof and start to appear a bit lumpy so maybe I'll set the bevel curve to 0.5 and now we have something that kind of looks like a brick pattern now that we have the pattern figured out maybe we want to start to add some color to it so we're going to have to be able to find a way to mask out these dark values in between the bricks we could technically use this as a mask but since we have this bevel then it would fade off so we need a more controllable way to mask out only certain values and we can do this and I'm going to do this by creating a threshold node and I can find that very easily by just right clicking and searching threshold and using this node I can connect it to our pattern but what I'm going to do is be able to set this threshold so let's click on it and look at it and by default everything just looks kind of white the same color but I have this threshold here that I can change and threshold out different intensities or from those values so this is a very good way to be able to mask out edges and certain things so maybe I'll set this threshold amount to a different value and one thing that I kind of don't like here but is kind of important is if you look in this details panel here I have this threshold slider I don't have a number value that I can really enter very easily but if I go to the node and I click on the down arrow then I have that threshold that I could actually control with another input or image and I can also input a value here so I can just set it to something like 0.3 and now you'll be set to like a a number value instead of me having to drag this kind of dot along the slider and just guess where it is you also can access that image input over here but I find it a little bit easier in some cases to just look at the options underneath the image here and for our pattern we kind of have that but it doesn't really show all the options shows the pattern type but it doesn't show all those things like the repetition spacing and offset so keep that in mind there might be different ways of displaying the settings when you click on it through the details panel and then also when you click on these arrows to drop down a more advanced view but now I can threshold out these values much easier and I can use that as a math for colorizing this brick so to colorize it the next thing that I'm going to do is create another node called lurp or linear interpolation I'll do this by right clicking and searching for lurp and there's a lur node and you'll have your mask and then your input one and input two so I want to connect these up to Colors so I'll rightclick and create a new color node and I'll call this one grout color and I'll create another color node and I'll call this one brick color and maybe the brick color will be kind of like a brownish red and then maybe the grout color will just be kind of like a light gray so I have my two colors and I connect those up so grout into input one brick color into input two and the mask is going to be this threshold node and then I'll output the result from that and you can see a preview here already of what we have and that's starting to look a little bit more like bricks it's not too bad now if we look at our original pattern we had this fall off here at the very edge that we kind of lose with this mask we don't get that detail so what I'm going to try to do next is multiply this original pattern with my brick color to be able to get this fade going from dark to Bright to the center of the brick so to do that I'm going to kind of reorganize my noes here a little bit to give some room and what I'm going to do is create a multiply node not multiply add just multiply and I'll connect the B value to original pattern the a value to our bricks and if we look at that already now we get that taper kind of dark from the edges to brighter in the center and I'll use that instead and now what I end up with is maybe a little bit more details on our bricks so I'm just going to maybe realign this network to look a little bit cleaner if we look at our output okay now we get that tapered Darkness on the edges which I think looks a little bit better but now if I look at where the grout is it's such a hard cut off that it feels a little bit fake I know this isn't really realistic at all but having such a a sharp mask there for the edge doesn't really look that great so maybe what I'll do is I'll add a blur and I'll blur the threshold mask that we use and go in here and change the the radius of the blur let's try three and use that for my mask and kind of just reorganize this graph a little bit give a little bit more room and looking at that now we get a little bit of a blur at the edges maybe feels just a little bit better not as perfect pixel sharp and helps it out a little bit so already we started to make a more controllable texture through using these procedural nodes but we can take this one step further because if we were to apply this on some objects in our scene it'll look a little bit fake because it'll be lacking any sort of normals or bump map to fake some depth into those bricks so it'd be nice to feel like the bricks are popping out a little bit more than the grout so maybe what we'll end up doing is adding a normal map output so right now this output is just called output but we're going to give it a better name we're going to click on it and go over here and call it maybe something like uh instead of just output we'll first rename this and call it output color and that doesn't change anything in the details here is just the the name of the node but here in the details this is a file that going to be called when we export it and right now it just says output maybe instead what I'll do is change that to something like color map or diffuse map or whatever you want to call it and then you have settings for what quality it's going to export what bit depth and and uh what kind of M mapping or compression as well now same thing we want to do with our normal map we don't want to just output color we want to Output maybe normal roughness and other things but for normal map what I'll do is I'll right click and I'll create another output you can create more than one output so I'll create another output and I'll call this output normal and then what we can do is go over here and Export it as normal map when we export and then what we need to do is generate a normal map from what we have here so maybe what I'll do is I'll take um this blur here or take the the threshold here and we'll do a normal from height map and that will take a a black and white or a grayscale image and try to generate a normal map out of it so if I connect that up to our blur here and then output it let's see what it looks like that's the normal map that it's giving me so not too bad now the normal map won't preview down here this only really shows color and we can modify that but the reason why that is if you go to the 3D preview settings it has this default material that it uses on this Cube to display your texture or just display your preview so that default material doesn't have normals or anything else connected up um so you only have one option to Output one of your Maps here you can't it's not a material that has everything connected it's only just kind of your diffuse or your color and you could specify is that your output color is your output normal now it displays my normal because I switched it to Output normal so if you want to have something here that shows normals and your color and everything all connected you have to go make another material and pop it in here and have texture sample nodes that are converted to parameters and then you'll have more inputs here so that's something that you could do but for now this is totally fine um for what we need we already can see our normal map here and we've kind of already made our Network so at this point I can save my texture graph and we're going to take a look at how we can make some custom nodes because all these nodes are great that they have here but there's a lot of stuff missing from here that we we might actually want so we're going to take a look at how we can make our very own nodes but before we jump into that there's a few other things in here that are useful you also have some utility here like this new comment so you can actually grab comments and attach them to your graphs so if you want to kind of display a bit more information you have a bigger graph you want to put some reminders in there you can rightclick add a comment node and then uh you can move this around and encapsulate nodes in it and then they all move together so it's a nice uh tool for just organizing your networks very similar to the um shading networks that you can produce in unreal so not too much different from that so how do we create our very own custom nodes well the cool thing about unreal is you can use any material inside these texture graphs Let Me Show an example of this if I go down here and I just right click and I search material I can create a material input node and you can choose a material that already exists in your scene if I go down here and I search wood I can choose one of these wood textures and now it extracts the color value from that wood material and I could change what we're extracting by clicking here to render attribute and choose the base color or the roughness or the normal and then I can go mix those into my current existing graph so because we can do that because we can bring in other material that we have you can actually make custom nodes by creating materials so if I save my texture graph and I minimize it and I go into unreal and I go here to the content browser and we create something like a material function we'll be able to use that inside our texture graph so if I go here and rightclick material material function and I'm just going to call MF for material function underscore and we'll make something simple maybe we'll make some vertical lines that we can control so I'll call it MF vertical lines I'll open up our material function and in our material function I can do whatever Network or whatever shading or whatever text your inputs you want you put other textures that you've created and imported into unreal but we'll keep this procedural we'll keep it adjustable and I'm going to right click and create an input function input and I'm going to call this input maybe something like line amount how many lines we want to create so we'll have a control for this as well it'll be something that we can easily control and modify now what are we inputting we don't want to input three values for the line amount it should just be number so I'm going to change this to an input scaler so it makes it one single value now here's where it gets a little bit more complex in this case I'm going to use hlsl or Shader coding to create these lines now if this is something you're not familiar with that's totally fine I have a bunch of other videos on it on uh my channel so you can always take a look and learn more about it but it's going to be very simple I'm going to right click I'm going to create a custom node and now I have this custom node here I'll connect the input but first we have to name the input we're going to grab the line number how many lines you want to create that's what this will be so we have to input that into the code here so to do that I have to have some sort of variable name uh to reference to it so on my custom node I'm going to make the input not called none I'm going to make it called input and now this here is going to be referenced to as input it's our only input that we have right now and I'll connect it up to the line amount and then for our code here we're going to use that input amount to control the number of lines we're going to create so to do that I'm going to remove this code the default code and I'm going to type in very simple one line of code return float float a number with decimal places sign so sign wave and I'm going to use the UV coordinates of our texture in the X AIS so that's like left to right Y axis would be up and down so I'm going to use use I'm going to use the UV coordinate numbers in the xaxis and times it by input whatever number we put in here and then I'll close those brackets and had a semicolon and that's our output now the problem is if I connect this it's going to give me an error because it doesn't know what UV is what is uvx that's our UV coordinates but I have nothing referencing the UV coordinates so in our custom Noe I'm going to have to add one more input so I click on this plus here and the input's going to be called UV and I'm going to connect it up to a texture coordinate node so it can actually properly grab the UV coordinates and now I should see lines I don't because this line input value is zero by default maybe I should make it something like five or 10 or 50 and now you can see those lines being generated now when I type 50 it's not doing 50 lines um because it's just multiplying our coordinates and by default our coordinates go from0 to one so it's not really the line amount I'd have to add a little bit of other mouth to properly do that but you get the idea 20 it's less lines 100 it's more lines so now that we have our material function created and made and we have the ability to change the line amount what I'm going to do next is create a brand new texture graph just to test this out so right click in the content browser texture texture graph let's call it text graphcore custom and I'll go into it we have our output as we we talked about and I can rightclick search for material use material function load in our material function which would be the one we just created here the MF vertical lines I could just drop it in or search it there and there it is I can connect it to our output and now shown on this Cube and if you want to change the amount of lines we could see here that we have a line parameter because that's what we had for our input node in our material function we have this input line amount if you want more inputs you just create them function input you can have as many controls as you want and you can access those controls through a texture graph so I could have less lines or more lines and now it's very adjustable maybe I want to flip those lines great I can go here create a transform node take our input how do we want to transform it then our output you want to rotate it okay we can go in here we got our Zoom we got our rotation 90° 45° very easy now before we wrap up this video how do we actually export our textures from here we've created this brick text that I'm just jumping back to now but how do I actually export it so I can actually use it in materials CU right now it lives in this graph but I can't really get it out of this graph and you can't use these graphs within materials so the way that we're going to be able to export it is if you have these output noes like we've created here with the output color output normal when you go up here to export you'll get a window that pops up and it'll ask you what do you want to export what output notes do you actually want to save out and you'll just select the ones you want to save out you'll click export and once you do that you'll have them available in the content browser here as actual baked out and saved out texture map so now I have this color map which is our brick texture and I also have this normal map which is the normal map for it and you can go use those as any other sort of texture directly in your materials you want to export them you could rightclick and you know asset actions export and ort them to actual file on your computer uh bring to another unreal project or something so you have the ability to save it all out now it won't allow you to have changes I can't go back to my graph change the tiling of those bricks and have this texture auto update I'd have to reexport it and then it would write over it and pretty much replace it with that new adjusted texture so if you gave that a try texture graph pattern let's see how this goes let's make it 10 by 10 so now it's not so much a brick but more of a tile and that's what it looks like and if we were to update this export okay okay export it exports and now it overwrites it and we have our new textures exported if you enjoyed this video or you learned something new don't forget to like subscribe and if you join the patreon which you can find a link to down in the description below you'll also get access to the PDF of this video which goes over all the steps we went over in a little bit more detail

Channel: renderBucket

Views: 15,300

Keywords: Unreal Engine 5.4 Tutorials, Best Unreal Tutorials, Custom Materials In Unreal, Shading In Unreal, Game Design Tutorials, Unreal Procedural Textures, Substance Designer Unreal, New Features Unreal 5.4, Unreal 5.4 New Features, Texture Editor Unreal, Unreal Texture Painter, Image Processing, Image Manipulation In Unreal, Texture Graph Unreal, Texture Graph Tutorial, What is Texture Graph, Best New Features In Unreal, UE Texture Graph Tutorial, Texture Graph Nodes, Unreal Tips

Id: hzUmD3gXXKg

Length: 24min 30sec (1470 seconds)

Published: Mon Apr 29 2024