Power - Shader Graph Basics - Episode 20

today we're going to talk about the power node in unreal and unity let's get started [Music] i'm going to start off today's video by explaining uh what the power node does and the math behind the power node and once i've finished that explanation we're going to move on to a couple of things that you can do with the power node in a shader alright well let's take a look you can see that the power node has two inputs base and exponent and the base value is the main value coming into the power node and the exponent is the power that you're going to raise the main value to if you think back to high school math uh when you raise something to a power what it meant is you're taking your original number and multiplying it by itself uh x number of times and that x number is the exponent so if i have a value of 2 coming in and i'm raising it to a power of 2 which happens to be the default you can see two right here two multiplied by itself two times is going to give you a value of four so if i pass a two in i'm gonna get a four out well what happens if i pass in a value of 4 and raise it to a power of 2 4 multiplied by itself 4 is a result of 16. so if i multiply 4 by 4 then i get 16. so uh as the value coming in gets higher the value going out if i raise it to a value of 2 or power of 2 the value coming out increases exponentially right okay and then likewise i can also increase my exponent values so i could take my 2 and multiply it by itself three times so if i pass the value of two in and raised it to and gave it an exponent or raised it to a power of three i would end up with a value of eight because 2 times 2 is 4 and then 4 times 2 again is 8. and let's take a look at the same node in unity in unreal the inputs are called base and exponent and in unity they're called a and b but really these nodes are doing the same thing this is the main input a and this is the exponent b so i'm taking the first value and multiplying it by itself the number of times of the second value okay so i know that a lot of you are visual so let's take a look at a graph to see exactly how this works so this is a website called desmos and it has a really nice graphing calculator function that i'm going to use to show you visually what it looks like when you use the power node or when you raise a value to a power so my first formula over here is x to the power of k so we're taking the value of x and raising it k number of times and in desmos x is a value that just increases linearly over time and so that's what we're looking at here um just by default my x value uh increases and uh we can see that illustrated by this line that just goes straight up and to the right and you can see that right now my k value is one which means i'm multiplying it by itself one time which means it's just giving itself as the value so this math is doing nothing basically it's just displaying x as my curve now as i increase the number of k you can see that my curve begins to curve upward and if as i get k to a value of 2 now i have a nice curve you can see that this is curving up and it's increasing exponentially and if i increase k to a value of three now we call this it's cubed uh a value of two we call two we call it squared and a value of 3 we call it cubes so now the curve is significantly steeper as my x value increases linearly my k value increases at a much steeper rate because i'm raising it to the power of k all right well what i actually want to show you is what happens when we zoom in so i'm going to zoom in here and just look at the square that is in the range of zero to one because this is the most common way that we use the power node on values that range from zero to one and so i'm just going to change the range here so that we start down here in the bottom left at zero and then uh over on the right side and the top we're going to a value of one one and you can see that the value here in this corner is one one so let's go back to uh an exponent of one and we can see that again our line is linear but as we increase our power what we're ending up with is a curve that starts at zero and intersects this one one point and it's as if the curve is pinned in those locations and the higher my exponent gets the more curvy this line is but it's still pinned at 0 0 and 1 1. so it's maintaining those two points on the graph and the higher that i get it um the more the more this line becomes curved um but it's still maintaining those two spots and that property of the power node is what we use uh in shaders so i can give my uh my power node a value that's somewhere between zero and one and when i apply the power it's going to create this curve so let's take a look again if we're at a value of 1 1 if i give my power node a value of let's say 0.5 which is right here on the curve you can see that this curve is going to bring the value of 0.5 down significantly and i'm going to end up with a value of like 0.2 say and so even though i start out at 0 and end up at 1 the midpoint is going to be significantly lower so it's going to take longer to get to that midpoint but then it's going to increase quickly and what we can do with this property of power is increase contrast and so when i show examples i'm going to show you how the power node can change the contrast of a mask value or a color value or a texture value and that's a really valuable property to have likewise as our curve as our power value goes below 1 you can see that our curve goes in the opposite direction and so instead of a curve that starts out slow and ends up fast we start out really fast and end up slow so you can see that my my power value here is 0.3 and the further below 1 i go the sharper i start out and the slower i end up so we can remap values using the power node and increase or decrease the contrast of a color a value or an image to adjust the falloff either with a slow in or a slow out curve it's pretty cool okay let's jump back into unreal and unity and take a look at a couple of examples of how we can use this nice curving property of our power node in this first example i'm going to show you how you can use the power node to increase or decrease the contrast of a value a color or an image let's start out with a value here i've got a value of 0.5 and i'm just going to wire it directly into my base color node and you can see how my color comes through and it's applied to my my preview cube here and it looks kind of gray so right now i'm just passing my 0.5 value straight through actually this might show up a little bit better if i come over here and set this to unlit yeah there we go okay so i'm just gonna pass my 0.5 value into my power node and then pass the result of power into base color right now my exponent is set to one so using the power node this way is basically doing nothing i'm raising my value of 0.5 to a power of 1 which will give me a result of 0.5 all right if i increase my power if i come over here to constant exponent if i increase my power to 2 now i'm going to end up with a gray value that is darker because if you remember when we looked at the curve in desmos my curve is being flattened and slow at the beginning and then rising quickly so my value of 0.5 as i said before is being pushed down so the higher i raise my power the lower my value of 0.5 is going to go so point or so value of 4 drives it darker value of 8 drives it even darker and if we go higher pretty soon we're going to start getting close to a value of 0 for my value of 0.5 and then as my values get closer to 1 as my input value gets closer to 1 it's going to rush up quickly to meet the one value okay so i've applied this power curve to my value of 0.5 and it's pulled it down significantly let's try the same thing with a color here i've got color of gray might be more interesting if we set this to i don't know maybe a purple or blue kind of color there okay so let's pass this into our power node and you can see again it's darkening it significantly let's change our exponent back to one and you can see that i get a purple value but then the higher my exponent goes the darker my purpley value is going to get okay and it also goes the other way so if i set the power node to a power of 0.5 now my purple value is going to get brighter as we as our curve expands upward instead of downward when you're using the power node it's always really useful to keep in mind that curve and remember that the higher the exponent goes above one the more the curve is going to start out slow and then speed up at the end and when we go below 1 to a value of like 0.3 or 0.4 the curve is going to curve out and bow up the opposite direction and so we're reducing the contrast okay let's go ahead and take a look at what happens with our power node when we use it with a picture so i have this a nice picture of a flower vase here and let's wire this into our power node and now i'm going to raise it to a power of 2. did you see how the darks got darker we can still we still have these nice uh bright yellows and pinks and reds um but the areas that were dark got darker and that's because our curve is bowing downward so if we raise it to a power of three now it's even darker power four and as our value goes higher all of the values that were dark just get crushed into that black area and notice the values that were originally bright are even brighter and more saturated so what we're doing with this power node is is basically uh similar to a contrast operation in photoshop where i'm increasing the contrast okay let's go back to one and if we set it to 0.9 now you can see that uh the the areas that were dark are getting brightened up so we're reducing the contrast here a value of it's even brighter a value of 0.6 you see how it's it's getting brighter overall there's still some dark areas here because our our original value of 0 is still pinned at zero like we saw on the curve and our original value of one or the whites are still pinned at one but the values in between are curving upward and everything everything except 0 and 1 is going to be brighter so we're increasing the brightness here as the exponent value goes below a value of one in between zero and one okay so this node is really uh it's really valuable uh what you can do with it there is one interesting thing that i want to point out though with regards to the performance of power let's take a look at our stats here just a minute normally i recommend that you not use instruction count as a way to judge the performance of your shader because it's not very accurate uh and i'll explain why in a future video there are a lot of details there that i need to explain um but what i want to show you here and i'm just gonna move this texture out of the way what i want to show you here is that sometimes it's better to not use the power node because when you use when you raise an object to some arbitrary power there's some fairly complex math that has to happen and it it can be just a little bit expensive so if you know you want to raise something to a power of two for example let's set this to power of two notice down here our base pass shader is 153 instructions let's set this to a power of two and did you notice how our shader dropped to 151 instructions just there we we we still have the same shader nodes why did it suddenly become cheaper well under the hood uh the the shader compiler is doing an optimization it knows that we're using a hard-coded value of 2 and so what it has done under the hood is it's replaced this power node here with an operation that just looks like this so we're taking our original value multiplying it by itself and passing that in now the thing about graphics hardware is that it's really fast at doing multiplies and that's interesting it's dropped down to uh 149 instructions now and that kind of that that kind of gets to the point of what i'm trying to say sometimes the power node can be more expensive than doing the same thing in another way so here i'm multiplying my image by itself and that is the same result as raising to a power of 2 but i've gotten fewer instructions here 149 compared with 151 when i get this when i do the same thing with a power node so it's a little bit more expensive you can see uh to raise to a power of two than simply to multiply the image by itself all right if i want to raise to a power of four i can take this multiply and add another one and now i've got 150 instructions so you can see each of these is one instruction so i've raised to a power of four whereas if i use the power node and raise it to a power of four now you can see 152 so if i know i want to use a hard-coded power of two or a power of three how would i do a power of three let's let's take a look at that for example i could use this and then multiply by the original value again and that would raise it to a power of three right so uh if i know that i want to use a hard-coded power of 2 power 3 power 4 i can just use multiply and it ends up being slightly cheaper than if i use the power node itself um usually when you have a power node you want to you want to raise it to some arbitrary value and in that case it's fine to use the power node but there are these cases where you want to increase the contrast to a specific hard-coded amount and in those cases it's better to use multiply but those are kind of edge cases i just thought it was important to point out that the power node itself can be a little bit more expensive than using multiply graphics hardware is really fast at doing multiplies but the formula to compute a power is a little bit more complicated and so you should use power when you want to use some arbitrary value and you should use multiplying by itself when you know you have a hard-coded value all right so here we are in unity and i wanted to show you that the same thing applies here i've got my power node and i've got my texture wired in to the a input port and i have my value here wired into the b input port so this is my exponent here and this is my texture coming in with a value of 1 i'm just going to get the image itself but if i raise it to a power of two now you can see that uh just like in unreal i'm increasing the contrast and if i go below i i up the brightness so the contrast is reduced and so that's working just the same as it did in unreal in this next example i'm going to show you how we can use the power node to control the results of a mask that we're generating here i've got the view direction and the normal vector and i'm passing those into the dot product and basically what this is doing is it's measuring the angle or how much uh how the object is pointing toward the camera so wherever the surface of my object is pointing at the camera i'm going to get a value of white and wherever it's pointing perpendicular or away from the camera i'm going to get a value of black that's what the dot product of the view direction and the normal vector is doing so you can see i'm passing the result of that into my base color and my emission and basically what i've what i've got here is a fresnel term right so it's going to be white as the model faces the camera and dark as the model faces perpendicular to the camera but my fresnel term is not very pronounced you can see that it's kind of dark around the edges but not as much as i would like and so what i can do is use my power node to adjust the results of my mask so i'm going to take the output of my dot product and wire it into the a socket of my power and then wire that into my base color and emission now with a float value of 1 passed in as we said this is just gonna give me the same result as i always have but the magic happens when i start to increase the the value of the exponent so here i've got raised to a power of 3 raised to a power of 4. you can see that as i increase this value i'm pulling those darks that were really isolated right along the edge and pulling them out and moving them in toward the middle so i'm able to adjust the results of this mask to get more of the effect that i'm looking for as a result of raising them to a higher value a power of 5 or a power of 6. now just like i showed you a minute ago remember that the power node can be a little bit more expensive and if i know exactly what the value is that i want to to raise especially if it's a whole number like two or three i can just use uh multiply by itself to get the similar kind of result and it's a little bit cheaper to do it that way but if i want to use an arbitrary value for example if i wanted to expose my exponent value here as something that the user could tweak and adjust in the material then i definitely would need to use the power node and it would just be a little bit more expensive and that's just fine um but you can see here have used the power node to create a little bit better result from my dot of the view direction and normal vector i've created something that is more interesting so you can use the power node to adjust the results of your masks and this could be any kind of mask it could be a distance from the camera mask uh it could be a directional mask a falloff mask uh here i'm using a fresnel mask but you can use the power node to adjust the output of your mask to get closer to the results that you're looking for there is one last example that i want to show you for how to use the power node and this one has to do with approximating gamma correction let's take a look at our texture here for a minute i'm going to switch over to our flower vase texture and you can see that there's this checkbox over here called srgb whenever we have a texture that represents the color of the object the diffuse or the albedo texture this srgb checkbox needs to be on and that's because gamma correction needs to be applied to any data that represents color uh there's a long explanation that kind of needs to be given to explain what gamma is uh and i don't want to go into that now but maybe i'll put a link down in the description to something that describes it better than i could but basically color needs to be adjusted to compensate for the gamma correction that the monitor is doing data that represents masks or normals needs to not have this gamma correction applied because it's just pure data but textures that represent the color of the object need uh this gamma correction applied so that means we're checking this srgb box uh so that that's the case now there are some cases where uh you may need to use a linear texture or a non-gamma corrected texture to represent color in your material and there are other cases where you have a texture that is gamma corrected like this one and you need to adjust it so that it represents linear data well one really kind of a shortcut to use to to make those adjustments is with a powered node so if i have data that's in linear mode and i need to convert it to compensate for gamma i can raise that data to a power of 2.2 and then pass that in and what you'll see is this data well actually this isn't a very good example because this data actually already has the gamma applied to it and so now i'm applying it to it twice i do want to show you that if you have linear data you can adjust it and use it as color by uh passing it through a power of 2.2 and in similar fashion if you have data that is already in srgb mode or gamma correct and you need to use it together with linear data you can make that adjustment if you pass it into your power node and raise it to a power of 0.45 so a power of 2.2 converts linear data to srgb and a power of 0.5 0.45 converts srgb data to linear now like i said this is just a shortcut or an approximation if you need absolutely precise and perfectly accurate numbers uh you you want to use a little bit more complex formula the the conversion from linear to gamma and from gamma gamma to linear is a little bit more complex than just raised to a power of 2.2 or a power of 0.45 but this is a decent and fast way of approximating it so you can use the power node to make this conversion if you need to all right well that about wraps up today's tutorial i hope you've learned some things about using the power node and raising your data to an exponent and i hope this uh i hope this video was helpful for you next week i mentioned a little bit earlier in the video that it there's a lot of explanation that goes into explaining why instruction count is not an accurate way of judging performance well next week i'm going to get into those details and we're going to talk about ways of measuring performance in your shader and why instruction count is not very accurate in giving you a good measurement of what your shaders performance is going to be uh it's a fascinating topic i hope you come back next week for that one and in the meantime have a great week everybody and we'll see in the next video [Music] you

Channel: Ben Cloward

Views: 1,646

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, power, pow, exponent, raise to a power, squared, cubed

Id: 1EiEjynmgIY

Length: 28min 42sec (1722 seconds)

Published: Thu Oct 28 2021