Game Advanced Beta type version 1
Hello everyone, this is Park Hyun-sang, and I'm in charge of FPS game development
In the beta version, we are moving into the stage of
finalizing the visual representation of the graphics,
in addition to the functional aspects that were previously focused on
During this process, it's important to understand rendering,
as well as graphic techniques for system optimization,
such as lights, lightmaps, and other methods
Additionally, we will be learning about cutscene direction
to present the content in a more engaging and dynamic way
First, this lesson will cover Shader Graph
and the material creation process
Shaders are often necessary to create visual effects,
as the basic ones provided in the project
may not be sufficient for all needs
Although writing shaders traditionally requires
a different programming language from C hash,
Shader Graph allows you to create shaders
as long as you understand how it works
For this, setting up the Scriptable Rendering Pipeline
is essential
In this lesson, we will explore URP among SRP
the Universal Rendering Pipeline
and create shaders
URP and Shader Graph
Now, for the lecture, we will start by exploring the project creation screen
and gradually learn about the characteristics of SRP
When creating the project,
we set the template to Universal 3D
And there is the acronym SRP,
which stands for Scriptable Rendering Pipeline,
and we commonly refer to this Universal pipeline as URP
We have set up the project with URP
The biggest difference compared to the previous Core3D
is that when you go to the Package Manager in the window,
when creating the project
with Universal or Scriptable Render Pipeline,
the Core RP Library is added first
After that, settings related to the Universal Render Pipeline
are also added
The main reason for using the template is
simply in Core3D,
by adding the package manager,
We can switch the Core3d,
commonly referred to as the built in default project settings
to URP settings
The default settings related to graphic qualities
generated when installed through a template like on the screen
if these were installed
through the package manager in Core3D,
these preset settings won't be there
So, if we were to manually adjust everything,
such as setting
the highest, medium, and lowest resolutions for each item,
it would take a lot of time
So, by using preset values for screen graphic quality
nd adjusting only the specific options as needed,
increasing or decreasing the resolution,
it saves much more time and effort
It will be much more convenient for you to use as well
Additionally, by expanding the package
through things like the Core RP Library,
you will also have access to additional tools, including Shader Graph,
which is the main topic of this lecture
So, we will gradually learn about Shader Graph,
and there are assets we need to use
Among these assets, we will change
the default Standard Shader,
which was set for Core3D,
to the default settings
of the Universal Render Pipeline
If you look here, you can see the hot pink highlight, right?
The hot pink color appearing for the shader
means it's not working properly,
so we need to adjust the settings to ensure
that the shading and lighting are displayed correctly
We will download the RPG/FPS Game Asset
shown on the screen and create a practical example with it
We will now create a practical example
It’s a free asset, but in case viewers watch this video later,
version 2 might be removed from the Asset Store
The creator has version 3 and version 4 of the asset,
in addition to version 2
So, even if the exact screen layout isn't the same,
you should still be able to follow along
with the lesson using these assets
Now, search for RPG FPS in Unity's Package Manager
under My Assets, download version 2,
and import it into your project
Click the Import button, and when the import window appears,
just proceed with the import
In your project folder,
you will find the RPG/FPS Game Asset,
and within it, there is an "Asset Showcase" folder
This showcases the basic setup of the assets,
which, as you can see,
is configured for Core3D and the built in pipeline
The same goes here
You can confirm that the shader is causing an error as it is highlighted in hot pink
Similarly, if you double click to open the Map Version 1 scene,
it will be in the same state
First, to address the error,
select the RPG_FPS_game_asset_industrial folder
Click on the Search by Type icon
and select Material
Then, all the materials in the current asset folder
will be searched
Since we previously selected
the RPG FPS game asset industrial folder,
that's why these materials are appearing in the list
By clicking on it, only the materials
that are inside the folder you selected earlier will be listed
Press Ctrl+A to select all,
then hold Ctrl and deselect Dust Version 1
Deselect "New Material"
and finally, hold Ctrl and deselect "Skybox
With only the assets highlighted in hot pink selected,
go to Edit then to Rendering then to Materials
Select Convert Selected Built in Materials to URP
Just to note, here,
it includes not only the Standard shader
but also Unity's default shaders
for mobile, GUI, and others,
and it will convert all of them
to be compatible with the URP environment
Edit then to Rendering then to Materials
Go ahead and click Convert Selected Built-in Materials to URP
Once you click the Proceed button,
the correct materials will be applied,
and you can see them displayed properly on the screen
Click on Search by Type
and deselect Material to clear the search
Then, we will proceed with learning about materials
and related content for the Shader Graph example before moving on
Let's take a look at the shaders we need to study
First, the shader itself cannot be used
with just the shader data alone
Basically, to render a 3D model on the screen, the mesh,
which determines the shape, and the material, which wraps around it
like a packaging, must be combined
In Unity, if the material field is left empty,
the proper texture representation will not be displayed
Among these, the shader is the most important part,
as it is included within the material
The shader's role is to represent the color of the surface of the object
It may require mathematical formulas
that can be somewhat complex to achieve that
Especially when creating shaders like glass
or cartoon rendering,
where you draw the outlines of objects
and simplify the shadows,
even though the basic PBR shaders
have complex formulas
even if we don't know the complex formulas
because it provides them by default, we can still use them
So, as you can see now,
the shader representing each of these
three textures is using different formulas
But the purpose of those shaders is
ultimately the same, which is to determine the color on the screen
Generally, you can think of the camera
as our eyes instead
In 3D, this principle is implemented exactly as it works in reality
ight from the sun hits the surface of an object,
and the color that hits the surface then enters our eyes
So, the light coming from the sunlight
is commonly referred to as the light vector,
and the direction toward the camera
is called the view vector
Depending on how the shader is written,
expressions like camera vector or camera direction are also used
Anyway, in the end, it's using the vector data type
to mathematically express what color is
etected by our eyes
Vectors are essentially math, after all
And for these mathematical calculations,
what must be necessary?
Programming is necessary
So, the programming involved in creating FPS content,
which we commonly do using languages like C sharp
is often referred to as content programming,
although the term content is usually not attached
However, since the purpose of shaders is very clear,
it is commonly referred to as shader programming
The language traditionally used here is CG
There are various types of shader languages, such as HLSL and GLSL
used in different graphics APIs
Most of the formats are similar
It's just that it has slightly different characteristics from the existing C sharp
So the main focus of this session is that
what we're using is not just a programming language,
but a node based visual script called Shader Graph
Each of these individual blocks is called a node
You can see that there is adding as well
There are also cases where data is represented
as 0 and 1 based on a specific number, like this Step
So when using Shader Graph,
you can smoothly increase the graph
from 0 to 1, like 0, 0.1, 0.2, 0.5, and so on
By using certain functions, the graph's shape
can suddenly change in steps from 0 to 1
If you understand the principles behind
how to manipulate these linear graphs,
you'll be able to adapt quickly and reduce
the effort of learning a language
Here, I'm going to explain
one principle that you must remember
while studying shaders
As you can see, the screen is made up of black, white, and gray
When studying shaders,
black is 0 to put it as numbers
If you express black as a number, it is 0, and white is 1
And in the middle, gray is represented by decimal numbers,
ranging from 0.1 to 0.n, and all the tones made of decimals
are expressed as shades of gray
The image on the far left that you see on the screen
is commonly referred to as a grayscale
It's not just black and white,
but images that have grayscale data in the middle
These are called grayscale images
There are also images made only of black and white
This is also a grayscale
It just has the extreme values of the grayscale
And here, 0.05 combines
with the texture here,
or with another value, to be expressed
So, basically, what you need to remember
is that all the colors we know by name
can be expressed as numbers
Secondly, you may have
heard of 8 bit color
0 to 255 steps,
the represented steps from 0 to 255,
the one commonly referred to as 256 colors
However, when writing shaders, we don't use 255
The numbers are always between 0 and 1
So, if we talk in terms of 8 bit color,
255 becomes 1, and 0 remains 0
Naturally, a value of around 128 in the middle would become 0.5
So, when working with shaders,
you should generally perceive numbers as values between 0 and 1,
and train yourself to immediately associate colors with these numbers
Some level of practice is necessary
to make that connection
Of course, I will explain this through the lecture
To give an example,
the green color you're seeing on the screen is
represented as a vector with the values
0, 1, 0 for the color green
We also use this as a data type called color
while programming in C sharp
When we talk about vector types,
they are represented as X, Y, and Z
The X, Y, Z correspond directly to
the red, green, and blue channels, respectively
This is information related to shaders that you all need to know
It's not that int is generally not used in shaders, but
Generally, most are made of floats,
so you can think of the data types simply
First, in the Asset folder
click the plus button on the screen
and create a folder named FPS Shader
Here, we will create two assets for comparison
First, we will create the basic shader
by going to Create, Shader and to Standard Surface Shader
We won't change the name
Next, right click and go to Create
This time, select the URP
Lit Shader Graph from the Shader Graph options
to create another shader
Similarly, we won't change the name
This is being done for comparison, so it will be deleted later
First, double-click the Surface Shader to open it
As you can see, the shader code is displayed like this
The shader code is not a separate class
As you can see, the name of the shader and the name here
will later appear as folder options when selecting in the material
Inside the Custom folder,
a selection called New Surface Shader will appear
And the Properties section
is where the parameters,
commonly referred to as parameters
that we see through the Inspector window are located
If you look below at the SubShader section,
you can see that the programming is
set up to handle expressions related to color
And at the end, just above the ENDCG,
you'll see o Albedo and the Red, Green, and Blue
If you look further up, you'll see the color data type is represented
as XYZW / RGBA, and choosing only the RGB
values means selecting just those components
So, while we refer to it as XYZW in some cases,
we also refer to it as RGBA in others
This is one of the basic shaders
that we use in Core3D
I will close this now
Now, let's double click the Shader Graph
When you double click the Shader Graph,
the Vertex area and the Fragment area
you can see that it's divided into two areas
Double click this tab to switch to full screen
Let's zoom in a little more by pressing the mouse wheel
In this case, you can think of the Vertex section
as having Shader implied after Vertex
Similarly, Fragment
Has the word Shader omitted
The Vertex section, literally, represents
the points, vertexes of the 3D object
which are connected to form the object
Also, all 3D polygon surfaces
are divided into triangles for calculation
The information from these vertexes
is used to determine the position on the screen
Once the position is determined,
you can draw a green cube on the screen, or
by using specific formulas,
while the object's data remains here,
you can manipulate the visible object’s position,
such as moving it downward or in another direction,
At this determined position, we will color it with a specific color
Or, when the object receives light,
we can create changes in shading,
and all these detailed pixels here
will eventually be converted
into rectangular pixels
In this way, the position of the vertex
determines where to apply a color and the Fragment Shader
is responsible for coloring it
So, in the end, the Vertex Shader
and Fragment Shader that you see on the screen
are part of what we call the rendering pipeline
The rendering pipeline is
a series of steps or procedures
used to render 3D data on the screen
So, one omitted from
the Vertex Shader and the intermediate stage,
which includes the rasterization process that converts to pixels
but this is not an area where the shader is involved
The process of converting the vector information connecting into pixels
that is called Rasterize and after Rasterize
the process of coloring each of the empty space
That is the Fragment Shader
So, the Vertex Shader operates first, then rasterization occurs,
and finally, the Fragment Shader colors the pixels
These sequential steps are
referred to as the rendering pipeline
The Universal part we used
is abbreviated as URP
Universal is devices that are generally used
such as PC, Mobile, VR
that is a rendering pipeline designed to be used universally
You just need to understand what we need to use in this way
Shader programming using Shader Graph
So, the feature we will implement through Shader Graph
this time is the Dissolve effect
The Dissolve effect refers
to an effect where an object
that was previously visible gradually disappears,
part by part, which is commonly referred to as Dissolve
First, let's go back to the Unity screen
and create a Shader Graph for this
This time, I will explain Shader Graph step by step,
including the layout
and components of the screen
First, we will delete the examples we created earlier
and start with an empty state
Right click, then go to Create then to Shader Graph then to URP
Then, select Lit Shader Graph
I usually name Shader Graph files
with the prefix SG, followed by
the effect name, like Dissolve
Let's double click to open it
When the Shader Graph window opens,
I'll explain the three areas step by step,
starting from the left
This is the Properties window
This is also referred to as the Parameters window
When we create materials,
let me quickly select one material as an example
As you can see on the screen,
elements like sliders or other forms
that users can select and change
are all referred to as properties or parameters
The window that manages
these is located on the far left
By default, the second area is the Graph Area
As shown earlier,
here you connect various nodes
to create and express specific colors
The Inspector window is
where you can make detailed changes to the shader's options
Let's start by changing one of the options as an example
In the Graph Inspector,
if you scroll down,
you'll see the Material section, where it's set to Lit
The Lit shader is the basic shader
that is affected by light,
where brightness and darkness are represented
That's right, if it doesn't respond to light, it's Unlit
So, if you look at the main preview window below,
you'll notice that when it's set to Unlit,
it appears as a solid color, while setting it to Lit will show shading effects
Since we need it to gradually disappear,
unlike 3D, we will check the Alpha Clipping option below
to enable the Alpha section
Alpha Clipping refers to a concept
where the object is either visible or invisible
If it's set to 0, you'll notice that it disappears in the main preview
On the other hand, if it's set to 1, it will be visible
As I mentioned earlier, it's based on black and white
The value assigned to Alpha is black (0) when it's not visible
Take a look at the concept of translucency doesn't exist
Through the Alpha Clip Threshold value
if it's greater than 0.5, let's input 0.5 here and see the result
If it's greater than or equal to 0.5, it will be visible
If it's smaller than 0.5, like 0.49, it will not be visible
We will first proceed with the Alpha Clipping state,
where there are only two conditions: visible or not visible
Now, let's save it
Since it's relatively difficult to work while viewing
this shader in the main preview window,
During your development later on,
you can select this shader, right click
and choose Create and to Material
It's better to create a material from the shader you've made
and then work while checking it
in the preview window here
The reason nothing is showing in the preview window right now is
because the Alpha value is set to 0.49,
which is less than 0.5, so it's not visible
So, if you change it back to 1 and press Save,
it will be displayed correctly
And since it's set to Lit, it is being affected by light as well
We will apply some noise to this now
To create the disappearing effect,
let's apply noise
First, middle-click to move it aside
Let's right click on the empty space in the graph area
Then, click Create Node,
and search for Noise here
You'll see the "Simple Noise" option
Select it and double click
then the Simple Noise node is created
First, click the output pin of the Simple Noise node
When a line appears, drag it
to the desired destination and connect it
We can then see the effect immediately in the main preview
To disconnect, click the line in the middle
and press the Del key on your keyboard
This will break the connection and return it to its original state
We're not just using this
to create simple speckled patterns or textures
Instead, we want to make the sphere appear
as if there are holes in it, with parts showing and disappearing
Right now, I've zoomed in by scrolling the mouse wheel up
the noise is too small and dense right now
To make the noise less fine, let's reduce
the Scale value to around 30
You can see that it has been reduced now
By reducing the Scale,
the blotchy pattern now appears larger
In this state, we'll add the noise value
to the Alpha to create a more complex effect,
making it look like there are holes
We will use the "Step" node for this
Let's increase the spacing between the nodes a little
I double clicked the window to make it full screen
and use the space more efficiently
Drag the pin from the Simple Noise node again,
and when the search bar appears, type "Step" to search for the node
Then, you'll see the "Step" node under the Math category in the search results
You can either find the new node by searching,
or right click, go to Create Node, and select the Math category
And under the Round section, you'll find the Step node
You can create it separately like this and connect it later
We will input the noise output into the "in" of the Step node
Now, you can see that
the preview window shows black
What the Step node does is
similar to Alpha Clipping
Alpha Clipping uses 0.5 as a threshold
If the value is greater than 0.5, it will be visible
If it's smaller than 0.5, it will not be visible
Similarly, the Step node creates a linear distribution
from black to white based on the value entering the Edge
You'll see black, dark gray,
gradually lightening to gray, and eventually white
This creates a smooth,
linear gradient from black to white
The Step node forces the value based on
a specific threshold entered into the Edge
This is the main function of the Step node
Since the Edge value is set to 1,
everything smaller than 1 will be forced to 1,
turning everything black in the process
This is why the preview window is showing black
If you input 0.5 as the Edge value, similar to the Alpha Threshold,
you'll see that within the range of the noise,
there will be areas
with white, gray, and black values
Using 0.5 as the threshold, it divides the values into visible and invisible,
essentially rounding the values to black and white
and this creates a sharp distinction between the two, similar to rounding
By connecting the output of the Step node to Alpha,
since both the Threshold value and the Step's Edge value are the same,
you can expect the blotchy pattern to appear in the same way
This time, we will use Ctrl C and Ctrl V to duplicate the Step node
Now, with the connection still intact,
let's change the Step value to 0.7
As a result, the visible area will decrease significantly
You can try values like 0.65 to find an optimal setting
Now we will have the copied Step node referred to as B,
and the original Step node with a value of 0.5 referred to as "A
If you connect the Step from B to Alpha,
the visible white area will be much smaller,
so only a small portion will be visible
We will use the difference between these two
By using the Subtract function to subtract
the narrow visible area from the wider area,
you can create the effect of holes in the middle,
as you can see now, there are multiple holes
This adds additional details to the effect
If you change the Edge value of the Step
in B to 0.55 or 0.6
You will see that the area of the hole changes slightly
Let's set the value to 0.55 and bring it closer to subtract
We will simply refer to the green color as A
and the red color as B
When we subtract a narrow area from a wider area,
we will eventually get a boundary
that appears like a stripe in this region
The orange color is the result of A minus B
So, we will use this result
and later connect it to the Emission section
for this area here
Of course, connecting it now won't cause any significant changes yet
This will need to be mixed with the color later on
So, connect Step A to Alpha,
and for the result of subtracting A and B,
connect it to the Emission for now
You can see
that the boundary area is now showing up in white
The Emissive section has the effect of emitting light,
making it self illuminating
The value that goes into the Emission can support
values greater than 1, not just between 0 and 1
For Base Color,
the range of values is between 0 and 1
for the three colors which are red, green, and blue
Similarly, Emission also takes red, green, and blue,
but for it to emit light,
the values for each color must be greater than 1
Of course, this will be linked with other features
I'll explain later
I'll provide more details after we've established the basic effect
Next, we will add a color to this
Right click, then search for
Create Node Color
You will see the Input category, and under it, select Basic Color
he color values that go into this range from 0 to 1 by default,
but since it's 8 bit color, the maximum value is 255
We can also express this range from 0 to 1
So, to better align with
the overall context of the lesson, we will set the values
from 0 to 1 and proceed with the rest of the steps
Since RGB is expressed from 0 to 1,
when red, green, and blue are all set
to 100%, it results in white
However, if you input
a value greater than 1, such as 3,
it will still be normalized back to 1, as you can see
Now, let's change the node mode from Default
to HDR in the Color node
When you click on it, there's an additional field called Intensity
at the bottom, which represents the intensity of the color
Let's change how we view the RGB values from 0 to 1
If you want to emit red light,
in HDR mode, increasing the Intensity value will help
Let's try setting it to 5
Now, let's connect it to the Emission
Since it's showing red,
but just by looking at the main preview,
it might be difficult to tell
if it's actually emitting light or not
To properly see the light emitting effect,
you'll need to place it directly in the Scene and check it there
Let's save the shader first
Then, go to File and to New Scene
select SRP and choose Standard (URP) and click Create
In the Scene View below, you'll notice that
by default, there's the Global Volume section
already has the Bloom effect applied by default
The Bloom effect helps
the light stand out more
After, adding a Sphere object, and then
onto this sphere object,
the Dissolve effect from the Shader Graph,
drag it to connect the two
Now, in the Game view preview,
you should be able to see the light emitting
If you double click, it's emitting light
If you turn off the Bloom effect in the Global Volume,
the light will disappear, as shown here
The Bloom effect needs to be enabled in conjunction
with this to create the spreading, glowing effect
I increased the light intensity for explanation,
but let's reduce the Intensity value
to 3 to make the light less intense
We will use Multiply to subtract
from the color output, then multiply it
Afterward, connect the result of the subtraction to B
Now, let's input this into the Emission
and save it
Now, you should be able to see that only the boundary is emitting light
What we need to do is
not just keep these values for ourselves,
To make it easier for others to use,
instead of opening the Shader Graph every time
and telling them which nodes to use,
we need to change these values into properties so they can be
managed conveniently in the Inspector window
If you want to allow others
to easily change the intensity
or color of the light
select the color node and right click,
and you'll see the option Convert To and Property
When you click on it, a color property will appear in the Properties window on the left
This color property now shows the red color
with an Intensity value of around 3, as we set
Similarly, if you want to convert the Noise Scale value to a property,
right click and select Convert To Property, however, this won't work
We can't convert it right away
So, drag the Scale node out,
and from the Input section, select Basic then Float
Set the selected value to the default of 30,
then right click and choose Convert To Property
This will create a Float property,
and as you can see,
the node is naturally connected
However, naming it Float or Color may not
make it clear where it's used, so it's a good idea
to rename them appropriately based on their purpose
So, select the property
and change the name to EmissiveColor
For the Float property, let's rename it to NoiseScale
The same applies to the Edge value in the Step node
Another way to create a property is
by clicking the plus button in the Properties window
and creating the desired value
Ultimately, you need to be able to input the value into the node
If you look behind the Edge field, you'll see that the value is set to 1
This means that a Float value is being used
And for UV, the (2) indicates that two Floats,
or a Vector 2, are being used
In the Color field, you'll see that it says Vector 4,
So, if you want to input a value into the Edge,
click the plus button in the Properties window and select Float
Create a Float property and name it DissolveVal
Set the default value to 0,
then drag it over and connect it
Let's drag the noise further away
Having both DissolveVal and Dissolve Edge Value
managing those two separately
could make it more complicated
So, let's create one more Float value
Next, name this Float value DissolveEdge
The difference between
the Step values in A and B was 0.05,
with values of 0.5 and 0.55
Set the default value of the DissolveEdge Float property to 0.05
The value in Step B should be greater than the value in Step A
Take the DissolveVal value and subtract a node to connect it to Add A,
then add the Dissolve Edge value
So, by adding 0.5 and 0.05, the value becomes 0.55,
and when you set DissolveVal to 0.5,
the results we've created earlier are now available as properties
allowing others to modify them as well
After saving, if you go to the material,
you'll see the properties listed like this,
If we set the DissolveVal close to 0,
the shape will be fully visible
As the DissolveVal increases, the object will gradually disappear,
and when it reaches 1, it will completely vanish
If you want to limit the range
of the DissolveVal to avoid overly excessive values,
select the property node and,
in the mode, use a slider
to set the Min and Max values between 0 and 1
After saving, he value will change to a slider
When set to 0, the object will be fully visible, and 1, it will gradually dissolve
you can use the Scale value to adjust
the density of the noise pattern like this
whether it should appear thicker
or thinner,
We can also adjust the thickness of the edge
A value of 0.01 would be too thin,
but setting it to around 0.03 will give you a thinner edge
Now, in the Scene View,
you should be able to see the object
with the dissolve effect applied
In this section, we explored the features of URP
and the differences in project settings
compared to the existing Core3D
Additionally, by using the Shader Graph package,
which can be expanded with URP,
we learned how to create custom shaders
beyond the default ones,
allowing for more diverse
and dynamic effects in shader programming
This concludes the lecture on Shader Graph
URP and Shader Graph
SRP (Scriptable Rendering Pipeline)
Unity's new feature for controlling rendering-related functions through C sharp
URP (Universal Rendering Pipeline)
A rendering pipeline used universally across PC, mobile, VR, and other platforms
URP features Core RP Library added
Add settings for the Universal pipeline
The Shader Graph is included in the package and installed automatically
Shader Graph: Programming to determine the color of pixels on the screen in a material
A package distributed by Unity to implement shader functionality through nodes, not code
Shader Graph Asset-Property Window: Create and manage property items Inspector Window: Set the selected node's and shader's properties
Graph Area: The actual programming area where the calculated results are connected to the Vertex and Fragment items
Shader Graph Setup: Download and import the RPG/FPS Game Asset from the Asset Store
After selecting RPG_FPS_game_asset_industrial, click the Search by Type icon and select Material
Select only the hot pink elements from the Materials, then go to Edit Rendering to Materials and select "Convert Selected Built-in Materials to URP
After confirming the correct output of the Material, click the Search by Type icon and uncheck the Material
Create a new folder in the Assets folder in the Project window and name it FPS Shader
Right click on FPS Shader, then select Create - Shader Graph - URP - Lit Shader Graph
To implement a dissolve effect using Shader Graph
Dissolve: An effect where an object gradually disappears in parts
After Rrght-click on FPS_Shader, then select Create - Shader Graph - URP - Lit Shader Graph
After naming it SG Dissolve, double-click to open the graph window. Right-click on the empty area of the graph and select Create Node Simple Noise
After creating the Simple Noise node, connect it to Alpha and set the Scale value to 30
Create a Step node and connect the output pin of the Simple Noise node Set the Edge value of the Step node to 0.5 and connect the Step node to Alpha
Copy and paste the Step node, then set the Edge value to 0.55
Create a Subtract node, then connect the original Step node to the A input and Connect the copied Step node to the B input
Connect the Subtract node to Emission Create a Color node and change the mode from Default to HDR
Set the RGB values to (1, 0, 0) and the Intensity value to 3, then connect the Color node to Emission
Select Standard(URP) in File New Scene and then create it
Click the plus button in the Hierarchy window, then select 3D Object Sphere
Drag and drop Shader Graph_SG_Dissolve from the Project window onto the Sphere in the Hierarchy
Create a Multiply node and connect it to the Color node and the Subtract node
Move the Scale item of the Simple Noise node outside, then create a Float node
Set the selected value of the Float node to 30, then right click and select Convert To Property
In the Property window, click (+) and select Float Name it DissolveVal and set the Default value to 0.05
Drag the DissolveVal property into the graph area and connect it to the Edge of the Step A node
Create another Float node, name it DissolveEdge, and set the Default value to 0.5
Create an Add node, then connect DissolveVal to Add A and DissolveEdge to Add: B
Change the property values to observe the dissolve effect