Unreal Engine 5.3 - Texture Bombing / Randomization / Splatting (HLSL)

in this video we'll take a look at how you can reduce the amount of repetition seen when tiling or repeating textures so you can go from something like this where we can see the tiling pattern slightly to something like this where it may seem not as noticeable in addition to that we'll also take a look at how you can make your own custom note in unreal using hlsl to Splat or place a texture a number of times and randomly rotate scale offset and tint that texture as well so I have the star texture defined here and it's placing it and I can rotate it within a random range maybe 360 degrees and then choose how many times I want to place this texture randomly on the surface so I could do like five times and there we go so take a look at how we can also create our own custom node to do these types of things in unreal so to begin I'll start with a brand new scene just a flat plane on the ground here and I created a new material I am using substrate but I'm not using anything substrate specific so if I open up this material it will be technically substrate if I add a substrate slab or something but I'm just using the default unreal kind of shading without the substrate features that get added so I can just use this node here or you can create that by typing substrate substrate ue4 default shading and I'm using Unreal 5.3 in this video but everything we're doing here can be pretty much used in older versions of unreal as well so normally if you have a text here that you're going to put on the ground or something like this concrete I have here if I add that into my base color or your diffuse color or whatever you want to call it and you tile it a number of times I add a texture coordinate and I tile it maybe four by four times you'll notice that you get sometimes this repetition that you start to see because the texture is being repeated and you start to see these patterns that show up again and again so one way you can solve that and this is one way that you can do it very easily and unreal of course if you have a complex scene you could use decal as a place on puddles and cracks in the ground and all kinds of things to cover that repetition up but even to help out with that unreal does have a node called texture bombing and this node if you connect it to your color or whatever you want to use it for you can use it for color and normals or anything really but what it will do is it will take a texture it'll be a text or object so I would have to take my texture here and convert it to a texture object and it will give me an option to tile it so I could tile it here same tiling four by four tiles and you'll tile that text here and I can't just actually plug in this texture chord it says s here it takes a single value you can see in Brackets it takes a default value there so I don't want to connect it to a text or chords node I just want to connect it to a constant otherwise you're going to end up with problems so four times the tile four by four and now it tiles it and it looks a little bit different and you have an offset as well so I can offset the texture randomly each time it gets placed so I can offset it by 0.1 and now maybe my tiling doesn't seem as noticeable anymore so that may help now what is this actually doing well I'm going to replace this concrete texture with this little Checker XY texture so we can see what it's actually doing and you can actually see what it's doing is placing the texture again and again but rotating it and flopping it around each time and also changing the intensity or opacity that's overlaying on top of itself so if I set it to be zero offset and just four tiling you can see how it's being flopped it's pointing sideways here then it's overlapping itself with a bit of opacity so it kind of just flops it around and rotates it and uh adds a bit of overlap to make it not as noticeable and you can adjust that overlap with this offset so I could do like one offset and now it's really offset and something else you can also do is add an optional height map to break up the pattern even more so I can go in here and enable this height alert with a static rule node and set it to true and then I can connect an addition an optional height map so I'll throw in this vertical lines because it'll be very noticeable to see and I'll convert that to a texture object and use that as my optional height map and now we'll use that pattern to do like a blend of where you can see it places this y here but every second line there it's placing a different text here or a different offset of the text here so I can use this as a pattern and that can be helpful to break things up even more so if I change this now to be that concrete again or that that asphalt um you kind of don't really see much repetition or tiling if you go super close you can probably see those lines a little bit so you might want to use a more organic pattern but this can really help make tiled surfaces be more broken up and you can change the offset value as well sometimes certain offset values do give you noticeable repetition you can't perfectly fix it but it can help reduce the look of tiling so this is fairly useful to use when you run into those issues it can also be used for other things as well you can get creative with it you can also add like time to the offset as well this is something that's kind of interesting if I go back to this X and Y Checker a lot of people don't realize that I could take this offset connect it to a side node connect that to a time value and get I'll turn off this uh blending there we go offset time and if I put this in my scene it's going to minimize this you can get a very interesting pattern of almost like different layers being offset and moved so it can be useful for some effects possibly certain effects but that's more up to you it's more up to whatever you need creatively to achieve the look that you're wanting to so just something interesting that you can do now to take this the next step further this node doesn't really give us much options here if I go back to this texture bombing node we have a couple options here but we don't really have that much control I can't control how much it rotates this texture by I can't control the scale of it each time it places that text here so you're kind of limited in certain ways so we're going to take a look at how we can write our own node in hlsl and do a similar thing to this like texture splatting or Texture bombing but we'll have more control to be able to tint each time it places the texture to give it some random scale random rotation random offset and just have a lot more control over what it's doing so to start with creating our own custom node I'm just going to first create a brand new material I'm going to call it m underscore texture splatting and I'll open this up material editor and what we're going to start off with is a custom node I'm going to maybe rename it to custom text here splatting whatever I want to call it and I'll connect that to our base color just as a test and right now it's not doing anything so we're gonna have to add some code to it here but before I do that there's a couple things that we know that we're going to need we're going to need access to the UVS we're also going to need access to a texture that we're going to provide for this node for it to place and rotate and scale and do whatever it's doing so we're going to make two inputs for this we're going to make a UV input and we're also going to make another input called input texture or input text and there we go and once we've done that now we can start jumping into a bit of code since we have the the very basics of this defined so I'm just going to open up visual studio code and use that to type my code in so it's a little bit easier to see than that tiny little window and what we're going to start off with is just blocking in our Shader blocking in our hlsl Shader so I'm going to start off with a float4 so that would be red green blue Alpha four values called result and here it is float4 red green blue alpha alpha could be zero one doesn't matter at this point and that's it and then what we're going to do is start defining other things will will need that we know we're going to need so we're going to also have to Define how many times it's going to place this texture that we're going to provide so let's add a variable for that I'm going to do a float single value called Splats and maybe just make it three by by default it'll place the texture three times on the UV space around the surface so we'll start off with that now I'm going to block in the rest of the code to place that texture it's going to have to do a loop it's going to have to place it and then repeat it place it again repeat a loop again replace it again so I'm going to do a for Loop for placing these textures so I'm going to do a 4 and then say like int I Define a variable make it equal zero if I is less than that number of Splats that we defined three then I plus plus that it will do whatever's in this set of brackets again so that's our Loop and this will be how many times we go through that Loop and at the very end we're going to return the result but we need to write into the result we've defined it here we return it at the End by inside our Loop we'll have to write that texture that we're placing into it so we should have something like result plus equals so it adds to the the result each time it goes through this Loop and we'll call it sampled color because we'll be taking a a texture and sampling from it and we'll Define that as well so we'll do a float for sample color that's our texture that we're going to be plugging in so we have to load a texture 2D sample so text your 2D sample and what did we call we call the input text yeah input text so input text and then input text sampler and then our UV space of course our UVS there and that's it so that's kind of our our base structure for this Shader code at this point I'm going to copy that place that in here into my custom node and just make sure that works before you go any further let's get this connected up we'll put a texture coordinates node there and we'll put our texture into here and what are we going to use I was going to use these vertical bands for now as a example convert that to a text here object place it in there hey look at that it works so we got something working great now we need to do all the work of placing that texture more times it's placing it right now top of itself but it's not doing any random rotation or scale or anything so we have to start adding that in so we don't need to over complicate this I'm going to go back into our code here what other things can we add to this that we know we're going to need well we're going to need a random scale within a range so I'll just Define a float too I'll call it scale range and I'll give it a range so give it a range between maybe one and three for scaling it's original size or up to three times bigger uh than it was or three times more tiled than it was and then we'll do another float too float two because the first range is the minimum the second value is the maximum and we'll call it rotation range so what's our minimum rotation going to be well maybe it's zero degrees at our maximum rotation will be 360 degrees now what else can we do well now that we have those ranges defined how can we go about adding those things into our Loop to manipulate that texture when it places it well we want it to be random as well so we have to kind of create a random number or just some sort of number that's going to change constantly every time it goes through this Loop so to do that I'm just going to make a seed value so I'll Define one more thing up here float2 called seed and I'll make it have a it could be really any number all we're looking for is getting some randomly changing numbers every time it runs through that Loop so I'll just do one two three Dot four five six and then 789 Dot 10 11 12 or 0 1 2. sometimes I do those numbers backwards sometimes that's type in random numbers it doesn't really matter too much it's not going to really affect the outcome that much it'll give you a random outcome that's slightly different but there's no specific to what you're doing there you just try to add in some random numbers so after doing that I'm going to use that seed as a way of changing our offset value changing our rotation values every single time it places this text here and we're doing this a really cheap way and the way we're going to do that is take that seed value and we're going to make it equal Frac seed times and again one two three four five six or something like that and now each time it iterates through here it's going to make seed equal Frac seed times one two three point four five six and I'll just totally give it some new value each time it runs through this this Loop so now how can we use that seed value within something like our random scale or random rotate well I can do my random scale here so I'm going to define a new variable called float random scale or round scale and I'll make it equal there a blend a blend between one value and another value based on a mask and those values will be scale range X so the first value of our scale range is the minimum scale and the maximum scale so X is going to be this number y will be that next number so it will choose a random range between our minimum and our maximum scale range why based on our seed value here we have 2 X and Y when we do this seed equals Frac seed it's dealing with those two values so we can just use something like seed value X and that way every time it runs through this Loop it will choose a value between the minimum here and the maximum of our scale range and to blend between that minimum and maximum or to choose a value in between that range you'll be using a mask which will just be a completely new and different value each time this runs through from our our randomization on the seed number here it's not really randomization but this is changing due to this multiplication of random numbers each time it runs through this Loop so that's a very cheap way we can generate like a fake random number it's not truly random but it will appear random enough for what we're having to do and that's really the bulk of the work and now we just do the exact same thing for rotate so float random rotation equals now this time it's going to be the same thing but we're defining our rotation in degrees but we'll have to make it radians for when we're doing our Loop here and placing the texture so I'll convert the result to radians then do my blend my lerp and do my rotation range dot X rotation range dot Y and then our seed y will use so it's slightly different it's not going to use the same one as the the other one and there we go so now we have our random scale our random rotation values how do we use those to actually scale and rotate our texture that we're placing our sampled color here our sample texture well first we have to do and we've done this before we have to set up our rotation so do this we're just going to create a float 2x2 like a pretty much a rotation Matrix I'll call it and we'll do cosine Rand rotation and then negative sign round rotation and then on the next line sign there we go side random rotation and then finally cosine random rotation we've done this before so if you're not sure kind of why we're doing this you can watch the video previously to this and and we go over this and how this is actually going to rotate it clockwise but you can also change this this negative and flop these and also make it rotate counterclockwise but this will pretty much just reorient the numbers of the UVS to rotate this text here based on the amount that we have in here now that we have all that set up that gives us our rotation value that we can use and then scale is just super easy we just multiply it so we'll create another variable here called float2 UV result and I'll make that I have to multiply so I'm using multiply and I'm going to multiply my rotation Matrix buy our UVs and that would rotate our UVs but I also need to scale the UV so I'll do UV multiplied by our random scale so that will scale the UV and then it's going to rotate that scaled UV with our rotation here and then now that we have that UV result we can technically use that here instead of just using the unaltered UV this is our new altered UV where it's rotating it's scaling it so it's placing the texture differently on that UV space so we'll use EV result and we'll test this out so I'll copy this throw this into our unreal code here what do we get we got some errors return result okay let's just go back to the code for a second and and tie up these Loose Ends so it gives me a little bit of an air on the result here and the reason for that is we're taking a result we're giving it that sampled color let's see what the air is too many elements okay so I made some very basic mistakes here I'm defining two values here I put flow to here I didn't put the flow to there there we go so that's gonna that's gonna solve that error so I'll copy that paste that back in here okay there we go and look at our result it's definitely rotating those uh lines and placing them differently now the problem is if we add a lot of these Splats or placements of this texture it's going to get brighter and brighter and brighter now you might not see it too much here but the reason why it's going to get brighter brighter and brighter is because we're just taking the result now we're adding that color again and again and again and each time it overlaps itself if it's a value of one and you're plusing another value of one it becomes two three four and it's becoming brighter and brighter each time we might not want that it might make things look overly bright so one thing we can also do at the very end here to deal with that is take the result or before we output the result make it equal so we can take our result here and make it equal or divide divide by the number of splats that way what it's going to do is every time it runs this is running it three times right now placing three textures they'll get Plus on top of each other and accumulate and at the very end we'll divide it by three so that the highest value ends up being 1 or so it doesn't end up being stacked too bright so that can kind of be almost like a brightness control and then if we want to adjust contrast there's many ways you can do this we can also do something like result equals pow and that's power so we can times this result by itself so we'll take the result our resulting image and times it by itself a number of times to increase its intensity as like a contrast control and that number of times I'll just use a variable that will Define called contrast like that and if we do that and copy this over here and paste it add that new variable called contrast make sure I Define it this is one at first that's what we get you know not as bright because now it's dividing so areas that would have maybe got blown out or become brighter than one are now being kind of clamped down and if we want we can adjust the contrast I can send this to two now multiply by itself get brighter and darker in areas so we have a contrast control now so now we have a contrast control and we're not getting overly bright values and we have something that kind of works you know I can place this text here maybe eight times and it's placing eight times overlapping itself we get this interesting pattern so already this is pretty cool now how can we take this a step further well I'm going to change this image here to maybe that star text here now that's actually kind of cool what it's doing but one thing you'll notice is if we set the amount to be like and this would be a bit excessive but maybe 50 times it's placing we start to see a little bit of uh a pattern here where the star is being placed right now we're scaling it what happens if we don't scale it we just leave it at the default scale one and one creates like a circle so it might be nice right now it's giving the illusion of the star being offset because we're tiling it differently each time it gets placed but if the star stays the same size we can see that's kind of getting placed at the same spot it's rotating but getting placed at the same spot so maybe we want that to offset a bit so how can we introduce that and how can we tint these stars to be a different color each time they get placed that might be a cool feature so how can we add that stuff in here well what we're going to do is go back to the code that is take a look at what what are we wanting to add here we're going to add custom color tinting and we're wanting to also add a random offset so let's add that random offset first so we're going to go up here and Define a new float to called offset range make that equal float two Define our range maybe negative 1 and positive one and that's it and then we'll work that into here so how can we add an offset well first we need to give it a random each time it runs through here so we'll do float to random offset float two because it's offset in x add y the two values we defined so we're going to do random offset in both directions so float two it'll equal the same value but that's that's okay for now we're just gonna make them blurp offset range dot X offset range dot y so make each of these uh just a range between negative one and one and then we'll use our seed as our random value and you can see I'm not defining seed X or seed y just C because it's float two so we're treating X and Y separately so it's going to blend from negative one to one and produce two numbers and one of those is going to use the seed value the other one's going to use this seed value of course it runs through here first to randomize it even more or give it a different value but that's what it will be using so that's kind of why we're not defining X and Y because we've defined a float two here it's going to produce two numbers and how do we add this offset into our texture well on our UV result down here we keep everything the same we're going to put this UV multiplied by its scale inside a bracket and we're just going to add that random offset at the very end so I'll just nudge that UV at its current scale off a bit and then rotate it um so that that should work and you can customize this totally and probably make it a lot better but this will this will work for now final thing how do we tint our color well easy to tint something that's grayscale or black and white you just need to multiply it so I'm going to take our sample color our result sampled color here that we end up writing out to a result or adding on to our result and I'm going to tint it so I'm going to multiply it and equal so like us that multiplies it and assigns it to a new value and we're going to define a list of tints or kind of like uh I guess our array of tint values so we're going to do something like float4 and we're going to call it palette and I'll give three values for now I'll just make them really simple float4 red and setting the alpha to one so it's not see-through red green and blue so we'll change these so red green and blue there we go and that's it so now I can use this here this like array and I can make it every time it runs through this Loop you'll take the resulting placed star text or whatever texture that is and multiply an equal so multiply and assign it this color so what would that color B it's going to have to be one of these randomly now how do we do that we can use that pellet if we do something like this we're going to run to a problem we could use that the I amount here the amount of times is running through this Loop but this is only three values so when it gets to run the loop the fourth time it's going to be an out of range index which we don't want it'll be out of range because there's only three things here but you might be splatting the texture more than three times if you splat it like six times or ten times or something so that would produce maybe a little bit of a problem so what we'll do instead is we'll do I plus one so it's offsetting it every time and then modulus three so doing something modulus by any number just divides it by that number and outputs one or zero if there's a remainder or not this way what we're going to be doing is adding one each time so we'll end up just looping through here like two three one or three one two or whatever it'll just Loop through all these values again and again so that that will work and you could change this up if you want different types of randomizations but I'm just going to do that because I'll keep it simple and maybe at the very end we want also a control over the brightness of the result I kind of have that here where it's dividing by the the number of times it's splatting or placing the text here but if I want a bit more control over that maybe what I'll do is divide it by brightness and I'll make a value in our our custom node for brightness and I'll just give us a little bit more control over the result so we'll take all this hopefully there's no errors paste it in here see what we got we got errors we do have errors and brightness because I need to create that that variable so I'll add it here and call get brightness and I'll Define it as a constant just one for now okay so there's our stars now if we tile them a ton of times like 50 yay they're not in that weird circular line anymore and they're scaling so let's turn off that scale and just keep it the same there we go they're not they're not producing that Circle anymore and this looks too dark so maybe we want to hop our brightness we got a brightness here let's up that to like five all right now the stars are brighter want more contrast but our contrast to five all right now it's more contrasty so maybe the scale's too big we go in here we scale everything maybe twice or five times just a random oh there we go we got tons of stars now all placed so really cool we can make this node super flexible super useful quite easy to make and you can extend this way further you could use this to even have animations you know you could use some of the things we've done in our previous videos using sine and time and other things to make these move a certain way but it's a pretty robust and flexible node now that you can reuse you can modify and you know you can choose how many times you want to place this text here three times five times probably don't want to do this but 250 times there we go so try it out see what you can create and if you like this video or you learned something new don't forget to like subscribe and check out the patreon in the description below to get access to this PDF that goes over all these steps that we covered in a little bit more detail as well and you'll also get access to the hlsl code as well if you're part of the patreon so check that out if you're interested and see what you can create

Channel: renderBucket

Views: 10,059

Keywords: Unreal Engine 5.3, Unreal Engine Tutorials, Best Unreal Engine Tutorials, Beginner Unreal Engine Tutorials, Unreal Texture Bombing Node, Unreal Texture Splatting, HLSL Shading Tutorial, Unreal Engine Texture Blending, Tiling Textures, Splat Mapping, Custom Nodes Unreal, HLSL Tutorial, HLSL Shader Coding, HLSL Shader Effects, UE5 Shader Development, Advanced Texturing, Decals, Game Development Tutorials, Unity HLSL Tutorials, Seamless Tileables, Seamless Texturing, Tech Art

Id: 11cBd89gZPE

Length: 33min 48sec (2028 seconds)

Published: Sun Aug 27 2023