Hello and welcome to this unity tutorial on
creating a progress shader or a fill shader or a shader that color the object with two
colors or any patterns if you would like to explore more. My starting point to work on this was its
potential to be a 3d progress bar in VR games or even in 3d games for an extra layer of
dimension. You can find new ways to use it as well as
start from that point. I have a written tutorial similar to this
one in my blog which will be linked in the description as well as a very cool source
from codinblack that helped me understand the shaders and this kind of approach better. For this one We will start by following the
steps of creating a shader graph and applying it to a material, then continue with the created
shadergraph, inspect its properties from the editor then its design in shader graph editor,
lastly there will be a coding demo to provide a direction on how you can use this shader
with code. Let’s start with the steps of creating the
shader graph needed for this tutorial and setting it to a material,
To create the shader graph we start with right-click on project window,
Create Shader
Universal Render Pipeline Lit Shader Graph
Rename it, let’s say progress, Now we have a new shader, to use it we need
a new material, for creating the material Right-click on project,
Create Material
Name it something like newmat if you like, Now we have two separate items that we need
to combine, To do that select the material,
On shader dropdown, Select shadergraphs and select the shader
created earlier, Or a target shader which in this case is progressshader,
the xyz variations are for the name hints for xyz oriented filling behavior that I will
touch on when explaining the graph. When you want to implement and use this shader
you can follow the previous steps, I have already created the progress fill shader
and will continue explaining from it, before the walkthrough let me introduce its
properties from the editor. Now selecting an object with the shader, on
its material we can inspect the values, This one has 4 exposed property for us from
the editor to edit Fillrate is the position in target axis, which
is x in this scene, that we aim to fill the object with fill color from negative position
to positive position, Starting and end positions, progressborders
are either calculated within code or set on the editor. It is the half size of the mesh bounds the
game object uses on the fill axis, Progressborder is specific for the object,
for example it is 0,5 for this cube sphere and capsule it is the half of the size of
the object mesh in initial state,but it is different for hoop, 3d mobius strip and plane
as their sizes differ too When I set progressborder to 0.5 we see clamps
on fill behaviour for the different objects. To fix it you can try to set the value manually
from the editor by giving a high value to fillrate and adjust progressborder till you
see no clamp with newly created materials or run this script and set the progressborder
value at the start Which is calculated by getting the bound size
on the target axis of the object mesh, currently the shader uses x orientation, if
you want different fill directions you should change x with y or z,
While doing so you can set fillrate to minus progressborder to initiate the progress at
0, or set fillrate to 0 and have a half colored object This is a piece of failsafe information for
a possible progress behavior implementation to know the progressbar range, meaning for
a cube the range will be -0,5 to 0,5 We use position relative to the object, the
center is at 0 so the range and the fillrate values can start
from negative progressborder to positive progressborder. Fillcolor is the color that the object is
colored as the fillrate increases, Emptycolor is the initial color of the material,
the part that gets consumed by the fillcolor You can select any color you would like with
these two It is time for shader graph walkthrough This is a very simple shader, it takes vertex
positions in object space and colors the object with fill rate acting as the borders of the
colors, different colors on the opposing sides as fill rate changes the border moves Here we have 6 nodes and 4 properties, properties
were explained previously in the editor, For an overview you can see the properties
and their types on left up corner, when clicked on and inspected we can also see their string
tag to reference it in code. Using split node we decide which axis to apply
progress fill behavior, r for x axis, g for y axis and b for z axis, to have different
axis variations of the shader as I did with xyz variations you can change the split output
node and save shadergraphs for each axis. I had worked on a selector logic for that
so that one shader would be sufficient with correct parameters but I am not satisfied
it with yet but could be a future tutorial concept if you are interested. Going back to here from split we get vertex
positions in selected axis and will compare them with clamped fillrate in comparison node. Here the fillrate is clamped between the minus
progressborder value to progressborder to limit the fillrate output of fill effect to
object specific progressborder, Let me explain with an example, as you remember
progressborder is 0,5 for cube if border is set to 0.3 we see the clamp, which wouldnt
be applicable for objects with smaller mesh size, this is my short way of defining the
borders whatever the fillrate would be, this also can be controlled from shader’s controller
code. From the output of clamp node, we get clamped
fillrate. Using multiply node we get minus progressborder
and set it to min input of the clamp node Progressborder is set to max input of clamp
node Using clamp node it is confirmed that Clamped
fillrate will always be between min and max input of clamp node in other words progress
borders. If you confirm you will add required logic
for controllinging the fillrate value to cover the whole 3d object with progressborder value
and fillrate you can directly set fillrate to the input of comparison node Branch is a very cool node, in my previous
implementation explained in the written blog post there were 3 more nodes but with correct
usage of branch node they are gone What branch does is it sets true input to
true part of the predicate and false input to false part of the predicate The predicate coming from Comparison node
which compares a and b under selected mode here the Comparison definition is a is greater
than b, the parts a is greater than b will be set as true and the other parts will be
set as false. if vertex position is greater than the calculated
fill rate the output will be true and that part will be colored with empty color,
On the contrary if the vertex position falls to the left sight of border as in is less
than the calculated fill rate the output of the comparison node will be false and that
means the fillrate was moved, that false part is colored with fill color
And then the output of branch node the final output is connected to base color and we have
our effect implemented in shader graph, using this as a start point you can go wild and
design cooler effects, I have prepared some demos for demonstrating
different behaviors, If you want to use this shader with multiple
gameobjects with different fill rate you need to create separate materials for each one,
For example, here we have many 3d objects with different fill axis as well as fill rates
and change in one does not affect change in the other As in this scene If we put the same material
to multiple objects when one material reference changes in one object its effects are shown
in the others Lastly, For an abject with multiple materials,
each material needs its own material with this shader for different colors
Here as an example I have used Devsplorer logo, when I change fillrate it starts from
gray scale and ends colorful These were examples for using the shader from
the editor, to manipulate it with code there is a short coding demo that I will start now
First let’s get to know our variables, progressSteps is the only exposed variable
in editor, this tells us what step count we should divide the progressbar, as in if its
value is 5 after 5 increments with no decrease the progressbar is filled _FillRateValue is the value that we set the
fillrate of the shader starting from minus progressborder to progressborder
progressBorder is defined progress fill range for 3d objects that is set in the shader stepSize is the change in fillrate to progress
one step on the progressbar objectMaterial is the reference of the material
of the object. At the start
Reference of the object material is taken from material of renderer component, if you
have multiple materials you should use materials and update each separately, Progressborder value is calculated as previously
shown, from the half size of mesh borders of the object
At the start, to initiate the progress empty, fillrate is set to minus progressborder, minimum
allowed progress value for the object and the value also set for the shader
Stepsize is calculated by dividing the total value of the progressbar by progresssetps,
by total value I mean for -1 to 1 range it is 2 in total, 2 times of progressborder In changevalue we increase or decrease the
fillratevalue by the type of call and set the fillrate property of the shader from the
material, this is a demo so there is no logic to check fillrate value exceeding progressborder,
for healthy progressbar behavior I highly suggest you add a control logic for that Here in the editor I have two buttons for
progressing and deprogressing the item, also have the game object with ShaderGraphProgressBar
behavior On onclick event of buttons changevalue function
is called with corresponding input, Decrease button leaves increase boolean false
And increase button sets increase boolean true When we run the scene we can change the progress
on the 3d object with buttons we can change the number of progress steps
and see their effect Also on the shader, you can see the unclamped
behavior of fillrate relative to progressborder value, which is a challenge for you to not
to get this tutorial longer, And not gonna lie this is fun to play around
with the buttons This was the code demo
All in all, we have progress fill shader to color 3d objects with 2 colors to show parts
or progress, with further iteration I believe how the objects looks could get more interesting. A peek-a-boo-like effect would be fun for
example. Hope you will explore more and enjoy what
comes out of this And also this was it for this video,
If you have any questions, suggestions or feedback please let me know in the comments,
There are some more topics that I plan to cover for future videos, but I am open to
suggestions. If you liked this video and want to see similar
ones you can give this one a like and subscribe for the futures ones,
I hope to see you in the next explorations and bye-bye
