Unreal Engine 5 Tutorial - Technical Shading - HLSL Basics / Simple Shapes

in this video we'll take a more technical Approach at drawing shapes like circles with hlsl and unreal and how we can create our own nodes that can produce customizable animated patterns like this so to begin let's see how we can start drawing a circle in unreal with hlsl and this is a very simple task but it's something that we might not know how to do with hlsl now math is going to help you out here if you're big into math and you're strong at math you're going to have a bit of an advantage but if you're not that doesn't mean you're not going to be able to produce anything you'll still be able to make things as long as you understand the theory and the logic of it so let's take a look at the math behind graphing a circle so if you want to graph a circle there is this formula which will draw a circle at its origin or zero zero which is X to the power of 2 plus y to the power of 2 equals R to the power of two now that will pretty much draw us a circle if you graph that out you can graph out a circle shape so how can we do that with unreal let's not even worry about hlsl at this moment or coding it let's see if we can do that through the node Network so we have to turn this equation into nodes and that's the first thing that we really have to be able to understand and be able to do before we really get into the details of it so let's think about this x to the power of 2 plus y to the power of 2 equals R to the power of 2. so I'm just going to make a comment node here and just write that up here as a reminder of what we're trying to create so x to the power of 2 plus y to the power of 2 equals R to the power of 2. so let's try making that through nodes so the first thing that I'm going to do is I'm going to create a text here coordinates node or text or coordinate node because that's going to give us some texture coordinates and when we preview that we see that 0 0 is in the very top left here that's why it's it's dark or completely black it has no values in X or Y and at the bottom right we have one and one one and one values and that's why it goes to to Yellow a mix of the the two colors here so that's kind of our origin that top left corner there and if we take this text or coordinate and we start making this equation how can we really do that well we have to break out these coordinates X and Y or u and v to their own kind of numbers that we can then kind of put to the power of two so what we're going to do is use a break float two components that's going to break my text records to R and G or X and Y or u and v whatever you want to call these two different kind of directions here and then we can start using the power of two so we have like X here and we have y so we'll do X and we'll do that to Power of Two by default a power node is to the power of two if you want to change it you can click on it and change its exponent but we'll do that for both these notes so now we have that done x to the power of 2 and Y to the power of 2. but now we need to plus these both together so we're going to add a add node add them both together now let's preview the result and what we get doesn't really look like a circle but kind of it looks like a segment of a circle and this kind of is right it is drawing a circle but the origin is 0 0 which is this top left corner so what we're seeing here is correct if we go back and just take a look at what we're seeing this is what we're seeing a segment of that Circle so that's great so now we need to do is just move that Circle to be the center of our UVS so how do we do that how do we get the zero zero point to the center of our text here instead of in the very corner so a way that we can do this I'm just going to remove all this these networks here where it's going to go back to our our texture coordinate and focus on this if we want to get that zero zero point to the center here we're going to have to minus some values so if I take a subtract node and I minus 0.5 that should put us right in the middle because we're going to subtract half of each axis so if I preview that well there we go now the zero zero point starts right in the center and then it goes to negative values out towards this top left corner so that seems to work good but that last equation that we just used is not going to work with this subtract because the problem with the power node if I create it and I just hover over it it says Returns the base value raised to the power of the exponent but the base value must be positive values less than zero will be clamped so it would actually cause a problem if we were trying to now use that same equation that we have up here with that power node to do x to the power of 2 and Y to the power of two it would not produce a result that we'd expected clap it and that Circle would stretch in each Direction so instead what we're going to do is bypass using the power node we're not going to use it and we'll just use a plain old multiply node so let's give this a try and technically since we're doing this now since we're adding the subtract here to make the origin point or the zero zero point at the center of this text here our equation is kind of changing it's no longer x to the power of 2 plus y to the power of 2. it's more something like x minus you know our value our subtract 0.5 so I'll just do H as an example and then y minus K so another variable to the power of 2 equals R to the power of 2. this is another popular formula for creating a Circle at a specific position and that position is kind of the H and K values here now in this case we're treating the H and K value as just as just to subtract 0.5 but technically that's the formula that we're we're kind of replicating here and we're going to try the same thing so we're going to make the exact same thing here we're going to break this out to float two components so now we have our X and Y uh we have to make them to the power of two we're not going to use the power node because that will break with values lower than zero so we're just going to use a multiply node and multiply it by itself and that gives us the X and Y to the power of two just multiplied by themselves and then we add these both together so add add let's preview this and we got ourselves a circle so there we go we've drawn a circle the simplest thing we can really do but this is not all if we want to make that Circle bigger or have control over it well what if we want to do that or what if we want to change its position right now we don't really have that control I could change the subtract amount here and that will make it more near the top left corner or more near the bottom right corner but I don't have control specifically where its position is origin is and I don't have control over the size of it so there's easier ways to draw circles as well so I'm just going to remove this here and we're going to try something different and this is another simple way we can draw circles we can take our texture coordinates we'll subtract a position so I'm going to create a new control for our positions I'm just going to create a constant two Vector two values X and Y position I'm going to then subtract my text record I'm then going to get the vector length and not 3 but Vector length 2 because we're using two values X and Y and then take that thing and put it to the power of two and a vector length won't give us numbers below zero so that's not going to give us a problem with our power node and if we try this now we set this position here to the center so 0.5.5 and we preview this we got ourselves a circle with a little bit easier of a network here and if we change exponent amount of our power we can make this circle bigger or smaller so now we have a control for its size and then position of it if we go here and change these two values to X and Y value we can make that Circle at a different spot on this texture so now we can make a movable Circle and also control its size but what if we want this to have a bit more of a fun animation to it make it kind of grow and Shrink make that Circle change size well we could take the exponent amount which controls how big it is and we can connect that to time but time is going to be a value that continuously goes up or continuously increases so maybe what we'll do is we'll plug that time node into a sine node and that way it will produce it as more of like a a curve a side note will kind of make it so that it reaches a maximum of one and it goes back down to zero and then back up to one and back down to zero so it won't continuously increase it'll kind of just go up and down and up and down and I'll make the size of the the circle shrink and expand shrink and expand so let's try that time plugged into a sine node into our exponent value and now we see it's shrinking and expanding so now we have like a a moving or pulsating Circle and that's pretty cool we could even use the same approach the time and the sine node also to drive the position if we really wanted to and now it's going to move you know from one corner to the other corner as well as growing and shrinking in size so we can start doing this stuff which is pretty cool but let's start changing the stuff into hlsl code so I'm going to remove all this stuff again and what we're going to do is create a custom node so we can type type some high level shading language and we're going to go in here to the code and we're just going to do things very simply so what we have here is is good enough to code in but what I'm going to type out here is pretty much the same thing we're going to want to get a circle produced through HL SL code so the first thing that we're going to need to do is have a wave inputting our texture coordinates and our position so I'm going to create two inputs there's already one input by default I'm going to call that UV for UV so we'll connect that to a texture coordinate and then I'll create one more input for position of that center point of the circle and I'll connect that to a constant two vector and I'll put that at 0.5 and 0.5 so it's the center now in this custom node we'll type some code we have those UV variable and position variable that we created and the code that we're going to do we're going to produce a circle by doing we're going to create a variable called float and we'll just call it maybe D for diameter or whatever we want to call it and this float D will equal length and then position minus UV and then we're going to return that variable and see what it gives us and I'll preview this custom node you can already see it here but there we go we got a circle so we pretty much now drew a circle using hlsl Code or just some basic math so we're using a length and then position minus UV very easy to make a circle now what if we want more control over this circle so the next thing that we're going to do is start maybe making it so this circle is Not So Soft right now it has a very gradual fall off from the center what if we want to be like a very sharp cutout well there's a bit of a trick that we can do we could technically take this and do something like a step node and then say anything larger than 0.5 as I clipped away and we get something like that now how can we do that through hlsl code right now we're adding another node to do that well it's actually really easy with hlsl code all we need to do is instead of return D or that Circle we could return D but only return the pixels that are less or equal to 0.5 and by doing that we get a sharp kind of circle here and we can change that we could say only return values that are less or equal to 0.2 or zero point one so very easily we can clip it to only show a certain range so very simple code for the most part now what if we want to again add more control over this maybe we don't only want to control its position we want to control its size well we already have that clamp control here that less or equal to whatever I'm out we want to kind of clamp it to or clip away from so we could turn that into a variable we could add another variable here let's add another input to our custom node and we can call it radius or maybe just size or whatever we want to call it we call it size now that size variable or maybe a radius suits the circle so radius we'll use that radius variable and we have to connect it to something so I'll connect it to a constant just a single value and maybe we'll set it at 0.5 by default but we need to introduce that radius variable into the code so instead of return D is less or equal to 0.5 we'll do return D is less or equal to radius and it will grab that radius value that we enter here so now if I change this to 0.1 0.2 0.3 we have like a custom control to change its size so now adding even more flexibility to this how can we make it so that we can tile these circles into a grid and have more than just one of them or specify do we want one Circle do we want five by five circles 10 by 10 circles how can we make it so that we can control how many circles there are in a grid well if we go back to our text or coordinates here and we just preview it we need a way of tiling these texture coordinates and you might think that's easy I'm just going to go over here for a second and create another texture coordinate node and you think okay why can't we just take our text or coordinate node so I'm previewing previewing that right now and we just multiply it multiply it by 5 or something so if we multiply it by 5 shouldn't that give us five of them repeated no it just increases the value so the starting point zero and this ending point here is 5. so it doesn't actually give us a tiled pattern but a way that we can do this is using a node called frac and a Frac node if we look at it here the Frac expression is going to take in a value and output the decimal part of those values and it kind of sets the minimum and maximum as well so if we take this Frac and we connect it to this multiply here and preview it look what it does it creates zero to five or zero to whatever times a multiplying it by but it takes out those those values and pretty much gives us that kind of texture coordinates pattern tiled tiled in each Direction so it's like zero to one zero to one zero to one zero to one but five times in both directions so that's a great way of being able to tile so if I go here to multiply I can go to so it's two by two or ten by ten and that Frac node will handle it for us now how can we get that working with our custom node well technically we can just go down here and just plug this in take our custom node instead of using texture coordinates we now take our text or coordinates multiply it by however many times we want it to tile do a Frac node throw that into our UV preview it and wow we got our tiling circles but how can we get that all into our HL SL Shader so this gets a little bit more complicated we're going to have to add another parameter so I'm going to add or add another variable so I'm going to go to my custom node here add another input call it something like grid size there we go connect it up to something so maybe let's try connecting it to five five by five now we're going to get rid of this here now the multiply and the Frac and we're going to do that through our hlsl and just connect our text your coordinates up so this is what we got now it's not tiling but we'll add that bit of code in so we have to rework our our code here so instead of float D equals length position minus UV we're going to do position minus frac UV times grid size and let me close all these brackets and we do these brackets to make sure it does the order operations correctly and now we got our tiled Circle and now if we say we want five or two or ten by ten or a hundred by a hundred we can change it so fully adjustable now so that ends up being our kind of finalized code and this gives us our our little custom hlsl node here and I know this is really simple but it starts to give you an idea of how you can add variables use those variables to modify and change things within your hlsl code and how even just having a tiny bit of HR Sr code is quite powerful when creating patterns and things like this and if you want to take this a step further you can always take this radius node here and connect it to again time with the sine curve instead of that fixed value and now the circles animate and you could take your your sign period amount here and change that to make it faster or slower so this is all customizable and then again if you want to work that time node into your code you could do that as well so you can kind of play around with this now start getting a feel for how you can add custom controls and next we'll look at how we can kind of mix in colors and start doing things a little bit more complex but now this gets you thinking of how you can start taking math formulas turning them into hlsl code or just even taking unreal modes and writing them out in in kind of a form that's much shorter and much more condensed in a custom node so to wrap this up I know that that code is fairly small to see so here is the final code that we're using in our custom node that's a little bit easier to read just to check if you have all the order of operations correct with the the brackets um and you can see kind of it's very simple two lines of code it draws us a circle it gives us control over its position its grid size its radius super easy to do and we'll start building upon this in the next lesson now if you've liked this video and found it helpful also check out the patreon in the description make sure you subscribe make sure you like the video make sure you comment below on what you want to see and if you are part of the patreon you will get access to a PDF that covers all the things we talked about in this lesson in a little bit more detail and is a good thing to be able to fall back on for reviewing these kind of lessons so if you're part of patreon you have access to that if not it might be something that you're interested in otherwise I'll see everybody in the next video

Channel: renderBucket

Views: 13,969

Keywords: Unreal 5 Tutorials, Unreal 5 Shading Tutorials, Unreal 5 HLSL, UE 5 Shading, Unreal Materials, Unreal HLSL, High Level Shading Language, HLSL, HLSL Tutorial, HLSL Tutorial in Unreal, Custom Node In Unreal, Unreal Custom Shaders, Writing Shaders In Unreal 5, HLSL Coding, Coding Shaders, Coding Materials, Scripting HLSL, Scripting Materials, Scripting HLSL in Unreal, Technical Shading Unreal, Custom Shaders In Unreal, Complex Materials In Unreal, Shading Network Tutorial

Id: 95Xr4GG-7zY

Length: 23min 14sec (1394 seconds)

Published: Wed Nov 23 2022