Realistic Commons Position Dissolve
Hello, this is Hyunsang Park
In this session, we'll discuss how to visualize
using position values
Position values typically refer to
Vector3 data, which consists of
the three axes: X, Y, and Z
We'll use a function called dot product with Vector3
to transform it into a grayscale image of black and white
This will allow us to create
a dissolve effect where objects gradually
fade in or out in the desired direction
You will learn how the inner product, a mathematical operation used in mathematics
can be used for visual effects
Creating Materials and Bounding Boxes
Let's start by creating a new folder
New Folder
PositionDissolve
Next, create a material named M_PosDissolve
and open it in the editor
This material will primarily be used to create the dissolve
fading effect
we'll change the Blend Mode to Masked
Generally, with Masked, when you use a texture
like Noise from the Starter Content
you can connect it to the Opacity Mask
With the Opacity Mask
areas in white will be visible
while areas in black will be transparent
creating a cutout effect
The mask uses mid-range values as a threshold
but doesn't strictly apply at 0.5
If we lower the threshold to 0.4
It's not based entirely on the middle
Around 0.3
the visibility transitions are determined
not based exactly on 0.5
What we're going to do next is
to Add the area that will be masked here
and if we set the Add value to -1, it will not be visible at all
Even at 0, much of the object won't be visible
At 1, it will be fully visible
By gradually transitioning through values
like -1, -0.5, -0.1, and 0.1 and eventually reaching 1
we'll create an effect where the object gradually appears or disappears
However, the basis for this effect
won't rely on textures
or noise patterns
I'm going to make it so that I can disappear from top to bottom
from left to right
or even choose the direction
in which I disappear
We have demonstrated how the object disappears based on the texture's pattern
The key focus of this session is
to show that even position values
can be utilized in the shader
to create various effects
This will be the core of this lecture
We need a specific node
to gradually disappear in a single direction
such as top-to-bottom
or bottom-to-top
First, disconnect the current connection
from the Opacity Mask
so that the object is fully visible
Let's put this aside for a moment
Next, right-click in the material editor and search for Bound
You'll see a variety of bounding-related options
From these, create
the BoundingBoxBased_0-1_UVW node under the Coordinates
First, connect to the Emissive Color
to check its behavior
You'll notice it creates a colorful gradient
This effect remains consistent
whether applied to a plain
Even if you change it to a box shape, it's still maintained
One thing to consider is
how the colors correspond
to the axis directions
The direction of the axis is shown like this on the lower left
So if you look at it now, you can see that it gradually goes
and changes to a yellow color
As you go up like this, at this end
is what we call Cyan, a color like blue-green
On the other end is Magenta, and on this side is something like Blue
and at the last end is White
You can see that
Here, the first thing that we can use these colors for
that we learned that colors
can be converted into numbers
For example, if it's Yellow
in RGB, Red and Green are 1 and Blue is 0
we call it Yellow
Blue would be 0, 0, 1
For magenta, the coordinates are Red 1, Green 0, Blue 1
For Cyan, the coordinates are 0, 1, 1
This is how the coordinates are
White would, of course, be 1, 1, 1
Each of these can correspond to Red, Green, and Blue
but they can also be X, Y, and Z
So, it goes to the X-axis based on
the gizmo at the bottom right
I will draw the color in red again
It goes like this, and as it continues
the Y component increases from 0 to 1
Blue is the same
As it goes up, it increases from 0 to 1
The same goes for Y
If you think about this
I'll even draw a picture and explain it
he picture also increases from 0 to 1 as you go this way
So if I explain based on the end that I'm indicating now
this direction where the arrows started
the corner closest to the gizmo
the coordinate values ​​here would be 0, 1, 0
That's because it's the end in the direction of the picture
and the X-axis goes
from 0 to 1 from left to right
so the X-axis here would be 0, and the height would also be 0
In this way, each color
can correspond with a coordinate value
So we usually draw this as the area
of ​​the overall box of the object itself
even if we say it's a sphere, we'll draw it as a circle like this
The highest part of this circle will be there
and there will be the lowest part
Since it's two-dimensional if we make it an axis, the middle would be 0.5 on the X-axis
the very end on the X-axis would be, and the outermost would be
If we were to express this point as a coordinate value
it would be 1, 0.5
Likewise, the edge would be 0, 0.5. X, Y
below this, would be 0.5, 1, above this, would be 0.5
there would be 0, and here would be 1
If we mark the highest points of the object
and draw lines here vertically and horizontally
a box will appear
We call these things bounding boxes
No matter the size of this object, the smallest is 0
and the largest is 1
The smallest is 0, the largest is 1
Of course, we usually refer to this as Raw Data
If the diameter is 5
this would be 0
and since the diameter is 5, this would be the location of 5
There's also 5 above and 0 below
It would be 2.5, 0 and 2.5, 5
The minimum and maximum values ​​for the Y-axis
The minimum and maximum points
in terms of height are often referred to as normalized
The normalized data of the Raw Data
is the bounding box from 0 to 1
For reference, UVW is
another name for X, Y, Z
and of course, it corresponds to RGB
If we have the bounding box values
we can create a gradient in the desired direction
Here, a change in color
means a change in number
The part where white is 1, and the color
close to 0 at the end of the edge
becomes clearer and will contain 0 in any component
Here, too, if you look at it like this
So here, on the opposite side
of white at the edge, it's 0, 0, 0
Here, all the coordinates are 0, 0, 0
Here, all the coordinates are 1, 1, 1
That's why if you look at it like this, the blue is moving to the side
The green is coming up from the bottom
and the fact that the colors are gradually changing means whether the green component is changing
the blue or red component is changing
or whatever the value is changing
We previously received each component separately
about normal map blending
but it is already separated here
If we compare the red value
like this, when viewed from above
you need to align the coordinate base like this
If you do this, the starting point here is 0
and the edge as it goes to the end becomes 1
So here it is white
and the edge doesn't look black
but only a very thin area is black, so it's black
Then, what if we put
this as is in the Opacity Mask?
It will come out as if it is cut in half
Then, if we continue to use Add here
and if we add -0.5 here and add it, it will become shorter
and if we add -0.7, it will disappear
And if we add -0.1 here, it will come out again
If we compare when Add is 0, 0.2, 0.3
and finally 0.5
all the other sides are filled
so we can determine whether it disappears or appears
by adding the direction
The larger the added value, the better it is visible
The lower the added value, the less visible it is
So, to check it in the Instance
we create a Scalar Parameter
This is called VisibleVal
Let's create one like this, then connect and save
We've instanced the material we created
and are now comparing it to a plane
You move the VisibleVal value like this
The box is the same
The sphere is the same
In this way, all objects will move in the direction I want
more precisely, in the direction of the world
To confirm that they disappear in this direction
we use Place Actors, and here we have the Shapes item
Here, let's place the cubes like this
so that you can see the direction
Press F to focus
Then, let's apply the material instance
that we created
If you adjust the VisibleVal value
along the X-axis where the object is placed
and the X-axis of the gizmo, you can see it strected and shrunk
along the X-axis
What if we rotate this?
If we rotate it like this, the direction of the X-axis in the world
will point towards this side according to the grid on the floor
This means the X-axis now
The direction of the arrow is that we rotated the object
and the direction we are looking at now has changed
When the VisibleVal value changes
it is not affected by the world direction in this way
but is affected by
the X and Y values ​​that the object has
so we often refer to this state
as a local bound
The way the computer recognizes the object with this coordinate value
is called the object's Pivot
It calculates based on the reference point
and based on that, it determines
whether it is along the X-axis, Y-axis, or Z-axis
These are the things considered
We often refer to things based on the object's reference point
such as direction or coordinates
as local space
So, the bound maximum and minimum values ​​are based on local space
We commonly refer to these as Min and Max values
So, no matter which way you turn the object
it will be visible or invisible
in its direction
Now, let's go back to the material window
and point out one problem that occurs later
Right now
based on Unreal, Red is X-axis
So, I made it go back and forth between visible and invisible
based on the red channel
The problem is, what if I want to
change the direction of this Dissolve?
If I don't want to go back and forth
front and back
but rather up and down using top and down
making it visible and invisible
or if I want to make it visible and invisible
in a diagonal direction that combines these two
then as it is now, since the red channel is the same
I'd have to create a Dissolve material for each direction
But it's 360 degrees, so we can't do all of them
So, we're going to create a simple formula and use it
Direction Manipulation and Various Effects Using the Dot Product
Move the nodes slightly aside
then hold Alt and click to disconnect the current links
Next, create a Vector Parameter
and name it Direction
As mentioned earlier
the color values in the node
can represent directions such as front, back, right, left, top, and down
using the RGB channels to indicate directions
That's why this itself tells us the direction
by using this value
We will find out using the Dot operation
also known as the Dot Product
So, let's make the Direction value red
so that the basic value
and click OK
Let's connect this to the Emissive Color
and temporarily turn off the Opacity Mask
As I said earlier
if you look at the X-axis, you can see that the gradient matches
the direction that extends
along the X-axis
You can refer to math books
and other specific calculation methods for Dot operations later
The way I'm going to explain here is that Dot operations
are used a lot
in shaders when comparing directions
The principle is that the Direction value transmitted to us
based on a reference called A
is compared to the reference, commonly referred to as Direction
It's comparing the Direction
So, let's say the reference vector points upwards
Of course, the unit here is 1
And if there's a vector here
that's exactly 1 diagonally like this
or if there's a vector tilted at 45 degrees
it's drawn a little long
This direction is attached to the standard as it is
This is attached like this and compared
It asks
what percent position you are at from the standard
I'll erase it and redraw it by lying down under 45 degrees
If you draw a 1 vector of 45 degrees, it's roughly like this
When this standard is 1
it's also said that the direction of the comparison vector is projected like this
What percent position is this of the current vector?
Basically, a 45-degree angle
is roughly at a position of 0.717
So you can see that it's
This means we can quantify this
in different directions
compared to the standard
Using Dot operation
if we include the picture values ​​here in the same context
let's compare it like this
X 1, Y 1 means
1 on the X-axis and Y-axis
That's why this diagonal vector comes out
That's why the gradient goes from here to the end
and it becomes this gradient
Let's check it out on an actual Instance
Save this
Go back to the material, make the node the same as before
in the Global Vector Parameter
and click Apply or Save
to edit the Direction parameter
and VisibleVal in the material Instance
Let's go to the instance screen
and put it in a box so that you can easily see the direction
Activate Direction
Here, VisibleVal will be 0
If you look at this now, red and green are each 1
and if you increase it according to VisibleVal
if it continues to have values ​​greater than 1
it will just become white
So, if you gradually decrease it, you can see that
the direction of the gradient decreases in a constant diagonal direction
In this way, of course, if you connect this to the Opacity Mask
Save it
We can make it disappear in the direction we want
And make it visible
If you slightly decrease the channel drawn at an ambiguous angle in this direction
we can see that the direction
is off by a slight 45 degrees
So, based on these properties
we're going to create a dissolve effect
but right now, the border is too clean
As you can see
we're back in the material editor screen
First, let's create a Noise node
This Noise node here
is based on the World Position value
and there's a node here
called World Position that you can search for
I'll explain one problem that arises
when you use this node
before I go ahead and do it
First, let's connect this to Emissive Color
Then, as you can see now
you can see that very small noise is generated
To make this pattern a little bigger
let's add Multiply to Position
For B, we'll extract the output like this
and create a node called Noise Scale with a Scalar Parameter
with a parameter
of 0.03 as the default value
If we connect this to World Position
the pattern will be a little bigger
This problem occurs when we create a Dissolve effect
using World Position
I will show you by actually placing
this actor on the level
First, in the Third Person Map
let's drag and drop the cube from the Shapes item
Then, if we apply the instance we created
to this cube like this, it will disappear
It will disappear while taking the shape of this noise pattern
but since we are using World Position, even if the object moves
you can see that the noise pattern itself
is fixed on the world
Likewise, even if the object rotates
you can see that the noise pattern
is fixed like this
Back to the Material Editor window
Don’t worry about the Input item
in the Noise item called World Position here
and search for Local Position separately
and connect it to Multiply
using the Local Position node instead of World Position
If you apply it and look at the actual effect
since it is now applied based on the Local Position value
you can see that it moves
as one with the object
when it rotates or moves
Let's erase World Position for the moment
and input 0.03 as the Scale value of Local Position
Add this Noise again
and connect it to the Dot
Let's erase what's connected to VisibleVal
We'll organize this connected Add
later into an item called Step with VisibleVal
When you connect Step in VisibleVal
it's automatically connected to Y
The result of the Dot operation and the Noise
will be connected to the X of the node called Step by Add
and then connect with Opacity Mask
It has been connected like this Now, save this
and go to the instance window
Let's increase the value of the VisibleVal
You can see it gradually disappearing
Suppose you look closely at the Direction of disappearance
In that case, you can see that the degree of disappearance and density differ
depending on the Direction we specified in advance in the Direction item
If you enter a value greater than 1
in the Direction item here
the degree of disappearance will be a little odd
If you look, you can see that the degree to which it disappears
depends on how much we set the value of Direction
Just like VisibleVal changes
changing the value of Direction
has the same effect
as changing VisibleVal
First, let me explain why this happens
Basically, the output value
of a bounding box is from 0 to 1
So, if there is a box, it goes from 0 to 1
It would be 1, 0 or 1, 1
Then, the longest diagonal length
would be about 1.4
Since we apply the root of 2 to this
on the other hand, if the vector to be compared is not a unit vector
but a long vector like this
and we calculate it as a percentage
it could be twice
or three times larger than the original length
That's why we need to organize
this direction as well
Let's temporarily push back the Direction node
so that the length here becomes 1
regardless of the direction
Normalize from the node here, connect it like this
and save it
Now, let's temporarily set it so that only half is visible in the instance window
Even if we change the green value here a lot
you can see that this value keeps decreasing
and remains constant as long as it is greater than 0
Of course, if this goes to a negative value
the direction will naturally change
In that case, the direction will change
but now, as you can see now
no matter how much the value increases
of course, the direction value increases slightly
so when you go once in X and this much in Y
and when you go once in X and this much in Y
the direction itself is slightly different at this angle
So the direction is a bit off
Even if it becomes 40, 50, or 100
it doesn't change the visible range enough
to drastically change it
I organized the values ​​like this
The Step node
also organizes these values
One of the reasons we put a negative value in VisibleVal is that
the Noise item here outputs a value
ranging from negative to positive
Since the value range is wide
nodes that recognize values ​​greater than 1
like Emissive Color, don't matter
But, like Opacity Mask
nodes that recognize values ​​between 0 and 1
should be organized with the values later
What the Step node does is
based on an arbitrary value that I set
if it's smaller than this value
I'll set it to X
If a value that's smaller than the arbitrary value that I set
let's say, X, then it's unconditionally set to 0
And if a value larger than X is input
it's unconditionally set to 1 no matter the value
It also plays a role in organizing values ​​between 0 and 1
That's why, if you use a Step node
the passed value will be stabilized
between 0 and 1 without any other nodes
I'll continue expressing
Let's set the value of the VisibleVal node to around 0.5
and see the range where it disappears
If you make it around 0.5, these things that gradually disappear
will become more noticeable, like 0.6
But if you look closely at the other side, you can see it pierced like this
This is because the basic property of 3D objects
is to draw only the front side
You can select the master node here
or click on the margin
If you check the option that says Two Sided
you can see that there is a surface even if
you go inside this where it says to draw both the front and back
So, if you look at the side that has not disappeared yet
it will not look like a wall blocks it
and you can use this option
If you look at it now, the front and back colors are the same
The front and back colors are the same
but to express them in different colors
right-click here
and create two color nodes
Using Constant3Vector, paste them with Ctrl+C, V
Set one to a random value of red, and for the color distinction
set the other color to green to make it easier to distinguish
It might look a little tacky
We will mix these two using Lerp
At this time, the mixing standard will be done
through a node called TwoSidedSign
If we connect this like this
and complete it with Emissive Color
the front will be recognized as green, and the inside
will be recognized as red
But strictly speaking, the value of TwoSidedSign itself is -1
where -1 refers to the back side
Let's zoom in a little
The front is 1, and the back side is -1
If we input a negative value to Lerp
the value becomes distorted, and the saturation increases a bit
so we will use a node called Saturate
to stabilize the value
So, I made a visual distinction by making a difference in color
between the front and the inside, the outside and the inside
Later, I will put in
another texture image that matches here
and change it to a color that matches
For now, I left it like this for the color distinction
Let's say you bring one of these brick images
from the texture section in the starter content
and connect it to the Base Color
Since you need to express the texture, you will need a normal map
in addition to this Base Color
I will try connecting the normal map like this
Even if you connect the colors
it is expressed as if a faint trace is left on the current green
The fact that green is expressed means that
the green node is the problem
and since a color value is given to the Emissive Color
the Base Color is ignored
and the color connected to the Emissive Color is visible
So, if you want to show the Base Color
make the color Emissive black
and you will be able to see the base color like this
Likewise, this red color is not completely bright red
but I'll change it slightly to a slightly darker brown
I'll make it darker
This is because black is not expressed well
This kind of brown matches the image of the bricks
If I lower the saturation a little more
I'll get a color that matches a little more like this
For the texture, choose something similar to the texture we want to express
and for Lerp A, choose something that matches the Base Color
The one that goes into Lerp B is black
In fact, black has a value of 0
so a separate node is unnecessary
Even if you erase this with Delete
if you input 0 as the value going into Lerp B
it will become black
so we made a simple setting like this
for texture expression
Right-click on the color that will be visible on the back side
Here, use Convert to Parameter
and name it BackSideColor
You can apply it later
when you change the texture in the parameter
Likewise, right-click on the texture
Convert it to a Parameter, and name it BaseTex
Do the same for the normal map, Convert to Parameter
and name it BaseNormal
So, the texture we create
is not just a box made of a single color
or a simple basic shape
but if we apply these, we can apply them
to more complex objects
Save
Saturate also explains that the value range
is from 0 to 1
I'll show you this in the instance window when it gradually disappears
I will make it gradually disappear
but it's a bit boring
when it gradually disappears like this
So, I will create a slightly glowing effect here
Let's pull the node back a bit
I'm going to look at the stain pattern
in this half-visible state
I'll simply draw the current stain pattern in green
The stain pattern is captured like this
Let's assume that we will add
a slightly glowing effect to the edge of this stain
Let's assume that the glowing effect
is only on the edge of the glowing effect
as if some texture is burning
and we need to create a function that selects the area
where the glow should be
So, let's take a good look at
the change in value
using VisibleVal and Step
When it's 0.6, it's the current boundary
If this value becomes 0.7
or 0.8, the visible area
Let's cover this for a moment
It will decrease little by little like this
It becomes 0.9, and as the value increases
from 0.5 to 0.6, 0.7, 0.8, 0.9
you can see that the visible area decreases
So, let's create a node called Add here
The value to be Add
is set to Edge using a Scalar Parameter
so that it can find the boundary
Copy the Step node with Ctrl+C, V
and then connect what goes into A like this to Step Y
And this Noise texture
I'll bring the Noise effect as it is
and connect it to Step X and the one above it
For explanation, the Step connected only to VisibleVal is marked as Wide
indicating a wide area
The Step added to the Edge is called Thin
so we will indicate that this is a narrow area
Then, if we want to find this boundary
we can eventually subtract only the narrow red area
from the wide green area in the broad area
and we can get an image
that is like a thin band that should be bright
So, using Subtract
Subtract the narrow area from the wide area and the thin area
If you set it like this
and bring it to the Opacity Mask
the Edge value is currently 0, so we subtracted the same value
o, in fact, no area is visible
Let's make the Edge value weak to about 0.03
Now, let's erase the sketch on the screen
and then you can see a very thin band
like this on the screen
If the Edge value becomes much larger
like 0.05 or 0.1
you can see that it gets thicker
This band-like area is the Lerp item
we connected to Emissive Color in Lerp later
We'll connect it to Lerp again
Since we are currently seeing
the value 1
we can specify a color to make it shine brightly
where it will be visible on the Lerp band
Using Vector Parameter
name the node Emissive Color
and set the Default Value for this node
to red 8, green 1, and blue 0.2
to make it shine brightly
We will pass the result of the subtraction to Alpha
Then, Lerp will occur twice
Lerp for the front and back
So we painted the back with a single color like this
then Lerp this brightly shining area again
and connect it to Emissive Color
You can see that the band part shines brightly like this
In this state, these holed parts should not be visible
Of course, we need to show a wide area
so we will reconnect Wide Step to the Opacity Mask
Now, as you can see
the brightly shining area
the area where the Base Color is visible inside
and the area visible from the back side
are all separated
Save
Let's preview this in the instance window
We activated NoiseScale and Edge values
as well as EmissiveColor and BackSideColor
And we've also done Base Color, Texture, and Normal
With all the items activated
we can set VisibleVal to be invisible, visible
and visible or invisible according to
the arbitrary direction we specified
If the value increases according to the Edge value
you can see that the thickness of the Edge
gets thicker
But if it's too thin
it looks small when you look at it from afar
so it's better to have a little thickness
Let's express it with a little thickness
Through Noise Scale
if you increase the Noise Scale value, it gets bigger
so the Noise gets smaller
It looks like a star when you look at it from afar
If you make the Noise value a little bigger than the negative value
like 0.03
it looks like it's torn
Instead of the bricks here, there are other textures you may want
preferably ones that can be used as a set, such as normal maps
If there is something like this lawn
connect it to BaseTex
and BaseNormal differently
In this way, it's like the grass is
slowly burning away and disappearing
which was originally flat
No matter what kind of mesh it is
it does not lose its directionality
and we can express the disappearing direction
from top to bottom
or from bottom to top
and determine the direction in which it disappears
In this way, I used the coordinate values ​​that the object has
for Local Position and Noise
and also used it as a bounding box
We learned about the principle of
transitioning naturally in various directions
using the position value, Local Position, of a 3D object
If you understand how to visualize the mathematical formula called the inner product
you can apply it to create various effects
not just Dissolve
Let's wrap up by summarizing what we've learned in this session
Thank you
Create Material and Bounding Box
Create Material Create M_PosDissolve Material
Blend Mode: Change it to Masked
Create BoundingBoxBased_0-1_UVW Node
Connect RGB value to Emissive Color, you can see the color applied according to the coordinate value
Create Bounding Box Height (Z axis) is blue, left and right (Y axis) is green, front and back (X axis) is red
Create Scalar Parameter node (VisibleVal)
Connect bounding box node and Add to Opacity Mask
Make it a material instance and check that it Dissolve with directionality by value
Direction Change and Various Effects Using Inner Product
Noise effect Create Local Position node and connect to Multiply
Add Noise node and Dot result Connect Add to Step X and connect Step result to Opacity Mask
If the vector to be compared is much larger than the reference, normalization is required Set the default value of VisibleVal node to 0.5
Color and Texture Expression Create 2 Constant3Vector nodes
Connect 2 Constant3Vectors to Lerp A and B, respectively
Import T_Brick_Clay_Old_D from StarterContent - Textures folder and connect it to Base Color
Set the color connected to Lerp A to match the Base Color
Delete the node connected to Lerp B and set the Lerp B value to 0
Make the Dissolve Edge Shine
Create an Add connected to VisibleVal
Create a new Step node and connect the Add result to Step Y
Connect the Add result connected to the Noise node to Step X
Connect Wide Step to Subtract A and Thin Step to Subtract B
Create a new Lerp and connect Lerp Adp BackgroundColor and TwoSidedSign to the Lerp result
Set the Default Value RGB value of the EmissiveColor node to (8, 1, 0.2)
Connect Wide Step to Opacity Mask