🇬🇧 How to make a TRON disc ? (Cut from [Episode 2 – Shader Graph | EN])

In this video, we'll create a shader which mixes the colors back and forth over time, and that shader will be applied to make this disc GLOW. You need to install Unity 2019.1 or above with Universal Render Pipeline (URP). Before we begin,
you should grab this beautiful model, which is created by [wright42] from the inspiration of the famous movie [TRON:LEGACY] Some textures need to be pre-processed
before importing to Unity. You could do it yourself or
download the processed textures from my Patreon page.

So, let's take a look at the core idea of this shader first. Imagine we have 2 colors
and we could mix/blend them together with a ratio. When a color is put more than the other to the mix,
it would contribute more to the final color. The mixing factor closer to the left
means the 1st color contributes more; when it's closer to the right, it means the 2nd color contributes more. In shader, we would use the range of [0, 1],
which is equivalent to [0%, 100%], to express the mixing factor of the colors. In order to change the color over time, we just need to update the mixing factor 'T' from 0 to 1, then reverse the direction. Keep repeating this process,
we could create the glow effect we want. This's a challenge for you:
Could you create a final shader, based on this diagram? These are the steps needed to achieve the result we want: Firstly, we'll create a new ShaderGraph And then we'll create a Material associated with the new ShaderGraph These 2 first steps should be done by yourself The next step is assigning materials to the disc After that we will create 2 color properties
to mix them together Finally, we'll adjust the mixing factor through time Here comes the first step:
Create a new Shader Graph In the Project panel of Unity, click Create button Select Shader > PBR Graph Give it a name like GLOW Double-click the shader graph to open it.

You will see there's a node inside
which is a PBR Master node. You should create a folder
to store this shader graph asset. There're 2 types of folder structures
for easier management: The first structure is:
creating a folder for each asset type like a separated for shaders,
and another for materials another one for all the textures And the second structure is:
creating a folder for all the related sub-assets, no matter what types they are Like: you put everything of a character
inside a single folder including the mesh, the model,
the animation, the textures, … everything You could find the folder structure that suits your needs.
But it's better to stick with one. Now let's move the 2nd step:
Create a new material Firstly select the Shader Graph asset and then
Right-click > Create > Material. Moreover, you could see the shader of this material
is assigned automatically. Give it a name
like: Glow_TronDiscLight_mat ('mat' stands for material) Think about how you will search / filter for it later.

You might end up with what's called
a professional naming convention, but with your own rules. In the next step,
I'll assign materials to the disc This disc uses 2 materials: one for the body which is the dark part,
another for the glowing blade part. For the body, we could use a standard Lit shader
with provided PBR textures. For the blade, we would use our custom material Set up your own scene with camera,
lights and materials for the disc. Now that you're all set up and ready to go, From now on, any changes of the Shader Graph
could be observed directly in the scene. Let's create 2 color properties I've mentioned the relationship
between the port and the data type previously in the NERDY section Now it's time to introduce some data types to you: Shader Graph has several data types
and we'll take a look at some of them: The first one is the number Vector1 is just a single number Vector2 is a pair of 2 numbers Vector3, Vector4 are just sets of 3/4 numbers Slider is just single number,
which is limited in a range If you're a programmer,
you'll find the type 'Integer', 'Float' familiar.

There's nothing fancy about the numbers.
Numbers are just numbers. So let's move on to other data types
like Color A Color type is used to define a color in RGBA format And a gradient type is used to
define a gradient between colors. We can not adjust it outside of Shader Graph
(at least for now) The last one I wanna talk about is the textures Texture is used to define a texture to be loaded/sampled. Among them, Color is truly a special one. It's actually a Vector4!
Surprise? A color data is packed in 4 channels:
Red, Green, Blue, Alpha. Each channel could be represented
by a number in the range [0, 255] or #FF (in hexa format) In shader, these numbers are mapped
to the range [0.0, 1.0].

Then a color is just a set of 4 numbers
between 0.0 and 1.0. That's why a Color type is compatible with a Vector4 type. Zoom in and you'll see ports with each data type having different colors. Do you notice that Vector4 and Color types
share the same color? Ports with the same color are compatible. Moreover, all the number types are compatible
through the promoting and truncating mechanics. You could find more details about the data types
on the Shader Graph manual page. And I provide the link to this page in the description. Now we know much more about the data type
and especially the color. Let's create 2 color properties in the Shader Graph: Select a blank spot,
Right-click > Create Node > Color Repeat to create the 2nd color Adjust colors as you want If you try connecting 1 of those colors
to the Albedo port in the master node and click SAVE ASSET button you would notice the color of the blade
in the scene changes accordingly.

That's how Shader Graph works: Nodes are just medium to provide values
to the Master ports and the changes happen almost instantly.
AWESOME! Let's move to the next step As long as the color is just a 4-dimensional vector, the mixing operation is just a math function. Values in each pair of channels
including Red, Green, Blue and Alpha are calculated follow
the formula of LINEAR INTERPOLATION as shown on the screen With A & B are the numbers of each pair and T is the mixing factor of B. Don't worry.
You don't have to do the math Shader Graph has a node to calculate this formula,
called LERP. Let's use this to mix the colors Firstly create a Lerp node to mix the values and then set the colors as the values you wanna mix It means that, you should connect the colors
to A & B ports of the Lerp node Then we need a number to control the mixing factor The choices we have are Vector1 and Slider In this situation,
we want to clamp the range of the mixing factor from [0,1].
That why's I'll choose the Slider Finally, set the Lerp's output as the Albedo
and click the save button You can play with the slider to adjust the mixing ratio And in the next step,
we just need to let time control this number "Time" is just a number of seconds passed
from the 1st day of 1970 so the range of time value is huge,
if not infinite.

On the other side,
our mixing factor value range is very limited. So with the intention of converting time
into the mixing factor, we must find a function which transforms any number
to another number in a fixed range. There're many functions like that
but I would pick the Sine function. Why ?
It transforms X to a number in the range of [-1, 1], which create infinite loops. Look at the graph,
the sine wave is so smooth, which is ideal to apply EASING to the motion. Let's use it. Firstly create a Time node then set the Sine(Time) port as
the mixing factor in the Lerp node That's it Lean back and enjoy watching your colors
are mixed automatically over time. Eh eh wait wait.
There's something wrong The 1st color seems to appear longer
than the 2nd one. In order to debug this issue,
I'll try to simulate the Sine values by connecting a Slider with range [-1, 1] And we'll see how the Lerp node changes
when we change the Slider value And there's it.
I find the first clue.

All the negative values
lead to the 1st color as the mixing result. It means that there's something behind the Lerp node. By referencing the Shader Graph manual page,
I find out that the mixing factor is clamped to the range of [0,1] It means all the numbers outside this range
will be forced to take the nearest number! In this case, Sine function produces results
in a range of [-1, 1] not [0, 1]
as we want the mixing factor to be. All negative values are clamped to 0, and this explains why
the 1st color appear longer than the 2nd one. In order to fix this, we just need to "scale"
the range of [-1, 1] into [0, 1]. So that any value in the range of [-1, 1]
could be mapped to a new value according to the ratio in the range of [0, 1]. This could be achieved by "Remapping".

In Shader Graph, create a Remap node
and set the Sine(Time) as the input to be remapped Other parameters of the Remap node
are already setup to scale [-1,1] to [0,1],
so leave as they are Finally, set the Remap's output as the mixing factor.
That's it CONGRATULATIONS.
You've reached the 100% completion level of this task. The 2 colors are fixed inside the Shader Graph. Let's make them customizable by using the Blackboard:.

You May Also Like