In this video we’re going to look into understanding some of the basics of working with shaders
in Unity. We’re also going to explore how we can use Shadergraph 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. This first part covered some of the basics to help get you 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 behaviours such as mixing
colour with a 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 interesting
results.
In this first example, I’ve created a shader with two colour properties. Let’s create
an add node and add them together. Then let’s connect the output to the colour of our Master
Node.
Currently, both colours are white. If we change our first colour to a different colour such
as blue. Notice how the material remains white. But, if we change the second colour to black,
our material turns blue.
This is because we are not actually adding two colours together, like you may expect.
In a shader, a colour is represented as an array of floating point numbers. With each
index representing the Red, Green, Blue or Alpha channel of the colour. When we use the
add operation, we’re actually adding the two groups of float4’s 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 colours 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 _MainTex on our Texture2D
Property and tell Shader Graph to get the Texture that is currently assigned to the
component. When we adjust the colour value, we are adding
to the colour data from the texture. We can use this to brighten up the image and add
colour to the shadows of our sprite.
Next, I’ve created a similar shader. Except that this time we’re using the multiply
operation on our two colours.
If we take a look in the inspector, when we change either of the colours, we can see a
different behaviour to our addition operation. This time, if we move to black, we’ll always
end up with a black colour regardless of our secondary colour. This is because the two
float4 values are now being multiplied together and when we multiply our first value by a
float 4 of zero. The result will always be zero. Whereas if we multiply any float 4 value
by a float 4 value of 1. 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 colour 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 colour 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 colour inputs. If, for
instance, the alpha channels on both of our colours are set to one, we have a completely
invisible colour.
Similarly, if we set them to the exact same colour 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 colour’s
float4 value is being subtracted from our first colour’s value.
If we now hook our texture up to this operation, we can actually use the main colour to influence
and remove colour data from our texture. This can be a great way to add contrast to a texture,
and subtly adjust colour details.
I’ve lined all three operations up against the original texture. Each of these materials
have the exact value set for their main colour. 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 colour 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 colour 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 is a quick way to invert an input.
Let’s then multiply this inverted texture by our main texture.
If we attach each of the 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
the alpha value from the main texture to preview it properly.
This creates two distinct textures, 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 shadergraph, let's add a multiply node
to each.
Let’s then assign a colour property to each of them before adding the results back together.
Now we can adjust the two colour 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 colours.
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
yourself. Follow the link in the description below.
Thanks for watching.