Basic Operations in Shadergraph | 2D Shader Basics

in this video we're going to look at understanding some of the basics of working with shaders in unity we're also going to explore how we can use shader graph and the universal render pipeline to create our own materials for use in our projects this video is the second part in our series on working with shaders and shader graph in unity the first part covered some of the basics to help you get started so if you haven't seen that yet we've linked it in the description below you should now have a basic understanding of how shaders work in unity and be able to texture a quad using shader graph in this video we're going to explore the concept of performing operations in a shader to allow for more complex behaviors such as mixing color with the texture and how we can combine two textures together we're also going to look at some special functions we can use in shader graph just like when we're programming in code we can perform different operations such as add subtract or multiply on data in our shader and output a result we can work with let's start by taking a look at some examples of how these operations work and then how we can apply these operations to different data in shader graph to achieve some interesting results in this first example i've created a shader with two color properties let's create an add node and add them together then let's connect the output to the color of our master node currently both colors are white if we change the first color to a different color such as blue notice how the material remains white but if we change the second color to black our material turns blue this is because we're not actually adding two colors together like you may expect in a shader a color is represented as an array of floating point numbers with each index representing the red green blue or alpha channel of the color when we use the add operation we're actually adding the two groups of float fours together so in this example our value of blue is 0 0 1 1 in each channel and when we move between black and white we're slowly incrementing the values in each of the other channels until all of them are greater than or equal to 1 which results in the color white with this in mind let's remove the colors and add in our texture because these shaders are designed to be used in 2d i've assigned the material to this sprite component in our shader graph we can use the reference underscore main text on our texture 2d property and tell shader graph to get the texture that is currently assigned to the component when we adjust the color value we are adding to the color data from the texture we can use this to brighten up the image and add color to the shadows of our sprite next i've created a similar shader except this time we're using the multiply operation on our two colors if we take a look in the inspector when we change either of the colors we can see a different behavior to our addition operation this time if we move to black we'll always end up with the black color regardless of our secondary color this is because the two float four values are now being multiplied together and when we multiply our first value by a float4 of zero the result will always be zero whereas if we multiply any float4 value by a float4 value of one the result will always be equal to the first value if we add in our texture as the second part of our operation we can use the multiply node to darken our image or adjust the color of it without influencing the highlights too much this is the most common operation used on a texture when attempting to tint it but depending on the result you are after adding color to your texture may be more preferable in this third example we have a subtract node and as with our previous examples the result of the operation will change drastically depending on our two color inputs if for instance the alpha channels on both of our colors are set to one we have a completely invisible color similarly if we set them to the exact same color or move between red or white we result in a black image on our quad as you can tell by now this is because our second color's float4 value is being subtracted from our first color's value if we now hook our texture up to this operation we can actually use the main color to influence and remove color data from our texture this can be a great way to add contrast to a texture and subtly adjust color details i've lined all three operations up against the original texture each of these materials have the same exact value set for their main color you can really see the difference each operation has on a texture let's take a look at how we can combine some of these operations into a more interesting shader that combines two textures together i have two textures in this shader graph the first is my base foliage texture and the second is a cloudy noise pattern i'd like to combine the two so that the white areas of this second texture influence the color of our main texture but the dark areas remain green to do this we're going to need to use our operations to make a mask for our main texture and then add the results together let's start by multiplying our main texture and our noise texture together then let's use a subtract node and subtract our noise texture from a float4 this is the same result as subtracting our noise texture from a white color node and results in an inverse texture we could also use the one minus operation to achieve the same result this is a node that always subtracts its input from one and it's a quick way to invert an input let's then multiply this inverted texture by our main texture if we attach each of these textures to our color node we can preview them due to our one minus operation our inverted texture node has an alpha value of zero so we'll need to add to the alpha value from the main texture to preview it properly this creates two distinct textures that when added together restore back to our original texture so now we have two individual parts of a texture that we can play with before adding our two components back together in shader graph let's add a multiply node to each let's then assign our color property to each of them before adding the results back together now we can adjust the two color properties on our material and create some interesting and artistic results we could even swap out our secondary texture to get a different blend of the two colors with just a basic understanding of shader operations you can create some really great looking shaders and material configurations in the next video we're going to be looking at some of the procedures we can use and how we can create noise patterns to create more complex shaders in shader graph for more information on shader operations and to download the demo project and try it for yourself follow the link in the description below thanks for watching

Channel: Unity

Views: 52,366

Keywords: URP, Universal Render Pipeline, Unity Game Dev, Shader Graph, Shadergraph, Game dev, 2D, Unity 3D, Unity Tutorial, Shader graph tutorial, Unity3d, Game Dev, unity 2d, unity2d, unity 2d tutorial, unity 2d game, unity making 2d game, unity rendering, unity 2d rendering, unity shader graph, unity shader 2d, unity 2d shader rendering, unity lost crypt, unity 2019.3, unity 2020 tutorial, unity tutorial 2020, unity tutorials, learn unity, custom shader unity, custom shader graph

Id: gJMeSkolnw4

Length: 7min 41sec (461 seconds)

Published: Mon Aug 17 2020