Realistic Common Energy Shield
Hello, this is Park Hyun-sang
This time, we will be covering the energy shield
a semi-transparent shading technique
We will be discussing the characteristics of a translucent shader
along with position and sine functions from trigonometry
for visual effects
Additionally, we will implement changes over time
not just static forms
Fresnel and Depth Fade
Create a folder called Energy Shield in the content folder
and also make a material
named M_EnergyShield
Let’s start by opening the material editor
We have previously used shaders
to apply textures to 3D object surfaces
or create special effects
For transparency, we used settings
like Masked in Blend Mode to control visibility
However, this time,
we want to display a translucent image
So we will use the Translucent Blend Mode
to create our shader
The Translucent mode disables
many of the typical PBR shader parameters
as you can see right here
If you want to use PBR effects
with a translucent image
go to the Translucency section
and enable the Surface option
However, for the current example
I will not be using
data like Metallic, Specular
or things like Roughness
Instead, we will proceed with the basic
Volumetric NonDirectional setting of Translucent mode
To start the energy shield effect
we will first create the Fresnel node
and apply it to the Opacity
We'll apply the Fresnel node to the Opacity
When you apply it, the center appears transparent
and as you move to the edges
you’ll notice some shading
If you change this from Opacity to Emissive
by pressing Ctrl
the edges will turn white
and the center will appear gray
though it’s actually not gray
If you change the Base Color to black
you'll actually see black
I’ll now explain how the Fresnel node works
which requires an understanding of the Dot product
In the previous lesson
I explained the concept of dot product
where we compare two vectors
one as a reference vector (A) and another vector (B)
to calculate how much the second vector
is aligned with the first vector
In the case of vectors facing each other
the value is 1
And when they are perpendicular, the value is 0
When they face opposite directions, the result is -1
This range from 1 to -1 is what the dot product computation yields
Fresnel’s function works similarly
Let’s assume there is a semi-circle
When the camera is looking at it
the vectors representing the 3D normal direction
Let's call this the camera vector for now
We're comparing this with the vectors of the normal direction
This is quantifying how much each vector is aligned
Strictly speaking, it’s not the camera vector
More precisely, it’s the vector that looks at the camera
often referred to as the view vector
compared with this vector with the data representing the normal direction
Ultimately, when compared, it will face the camera like this
So when the angle is 90 degrees, a value of 0 is returned
and when the camera directly faces
a value of 1 will be output
The back face would go as low as -1
So, essentially, if we think of a sphere ranging from 1 to -1
we reverse the result and apply this logic
When the two vectors face each other directly
based on the dot product
the point directly facing the camera
which is, for our sphere, right here
would give a value of 0
When it’s turned 90 degrees, the value would be 1
It's the reversal of values
So, in the case of Fresnel, the edge values
are inverted compared to the usual result of the dot product
outputting a value of 1
The area facing directly will output a value of 0
So, when comparing vectors
the result from Fresnel will differ slightly
from the typical dot product
Of course, if you use this directl
the inner part will always be 0%, appearing fully transparent
Therefore, we won’t use it as is
but will use Lerp to make it translucent
Through LinearInterpolate
we connect the Fresnel value to the Alpha
The Lerp result will then be connected to the Opacity
When the value of 0 is output
instead of entering 0 for full transparency
we will input a slightly visible 0.3
Indicating full visibility
the value for B will remain 1
As a result, what you’ll see at the front will no longer be fully transparent
but will show 30% transparency
On the edges
the full color of the object
will be visible at 100%
So it's all seen through as it is
Unlike the Opacity Mask
which only output 0 or 1
Opacity supports values between 0 and 1
such as 0.3 or 0.5, allowing for translucency
When the opacity gradually changes from the middle to the edges
a gradual change from 0 to 1
the degree of change
can be controlled using the ExponentIn value
If the Exponent value is set to 0
the state will be completely black
And if set to 1, the range of the gradient will change
Let me mark it here
Assuming
a visible translucency of around 50%
this would be the case when the Exponent is set to 1
As you gradually increase the value to 2 or 3
the position where 50% translucency occurs will shift further
This is because, by default
the graph follows
a linear progression from 0 to 1
Let's say we have a linear graph here
If we input 0.5
the output will also be 0.5
However, Exponent refers to a power
like in 2 raised to the power of n
It represents the exponent value
which can be thought of as squaring
So, squaring 0.5
results in 0.25
This creates
a convex curve
As the exponent value increases
the slope of the curve becomes more pronounced
So it becomes darker
than the output of 0.5
The output at 0.5 becomes darker like so
This controls the degree
of translucency using the exponent
For the energy shield effect
the reason Fresnel is used
is basically because when we want
to express things like energy or magnetic fields
though it's not too visible with the black now
it’s common to make the edges brighter
and keep the inside transparent
This is typically done by using the Fresnel node
Now, we will use Lerp
to show different color values
First, let's use Constant3Vector nodes
Create two Constant3Vector nodes
The Fresnel node is temporarily moved aside
Then, using Lerp
we connect the Fresnel node
For the inner region, or A area
we apply a dark blue color
It doesn’t have to be blue
but lighter colors like sky blue are often used
to represent the feeling of magnetic fields
That's why I used this
On the outer part, we will use a color slightly brighter than the one used in A
We’ll make sure
that the blue component emits light more
by increasing its value about three times
and connecting it to B
Then, by connecting it to the Emissive Color
the outer part will glow brightly
while the inner part will appear to have a bluish light
completing the depiction
Now, let’s add one more effect
The node we will use
is called Depth Fade
If you simply connect this to the Opacity
it might not be very noticeable in the preview
Therefore, we’ll apply it
actually apply it in the world
and I'll continue the explanation from there
In the Place Actors - Shapes section, let’s first place a Sphere
in the world with part of it overlapping
Then, we’ll connect the energy shield
we are working on
to the material of the Sphere
that we placed
To make the effect more noticeable
we can scale the Sphere by about five times using the Transform scale
When you look at the boundary where the object touches
you’ll notice that part of it
appears transparent, like this
From a distance, you’ll see it like this
The boundary shows a value of 0
The Fade Distance gradually increases
transparency to 1 within 100 units
More specifically, instead of just transparency
it adjusts the value being output to 1
creating this effect
However, this isn’t applied directly
In energy shield special effects
the purpose of Depth Fade
is often to make these boundaries clearer
Therefore, we reverse the value of Depth Fade using OneMinus
and connect it to the Opacity
On screen, you’ll see a very narrow area being affected Let's save this
In the world, as you can see
the previously 0 value becomes 1
by subtracting 0 from 1
and the result now transitions from 1 to 0
However, with this configuration
the overlapping areas only show the front-facing side
To see the back, in the master node
check the Two Sided option
This allows the entire boundary
including the back to be visualized
Now, let’s mix the Fresnel effect
we created earlier with this new effect
The boundary where the objects meet now shows a value of 1
When applying the Fresnel effect
the outer edge of the sphere, marked in green
also shows a value of 1
which is same as the boundary
When you encounter new effects like this
if you don't know what to do
the most common choices
are either to multiply these two values
or to add them together
When we do them together
after multiplying
we notice that the inner part of the effect isn’t visible
while the Fresnel effect doesn’t appear to show either
This might seem obvious
but to clarify, I’ve marked
the Depth Fade values in green
The boundary of the 3D object
is originally 0, but we used OneMinus
to output a value of 1
Starting from the 100-unit distance
the rest of the sphere now displays a 0
achieved by subtracting OneMinus
from the original value of 1
When I apply the Fresnel values in red
the boundary area shows 1
while the inner area outputs 0
The part where 0 is output is the same here as well
The same applies to the other areas
As we move to the top
the boundary of the sphere, where we applied the Fresnel effect
will output 1
Meanwhile, the Depth Fade effect
outputs 0 for the boundary area
If we multiply these two, the result will be 0
When the opacity value is 0
it means it should be invisible
Therefore, when the Depth Fade value of 1
and Fresnel’s 0 are multiplied, the result will be 0
making both effects
not really looking optimal
So, we’ll remove the Multiply operation
Let's click on Delete
Let's add the two effects instead
Let's use Apply
We just added Fresnel and Depth Fade
Same thing, using OneMinus for the output
the boundary is 1
and the rest is 0
Let's write out the average values
For the Fresnel effect, the areas facing the camera will output a value of 0
The average values will be 0
and the boundary values will all be 1
When we add the two values, the result is 2 at the boundary and at least 1 inside
If this 0 and 1 are added, it'll be at least 1
This central area where 0 and 0 are added
This is the real invisible state of 0
Meaning, Opacity equates 0
Now that we have added the Fresnel
and Depth Fade effects
we can see the intended result
Let's apply this to the Lerp we've used before
Opacity and Emissive Color
Let's apply these two Lerp effects
Click Apply
As you can see, the effects are overlapping
One thing to be careful with is
Here, the maximum is 2
so if possible
for a stable result in Lerp
apply the Saturate node
to limit the output range between 0 and 1
This ensures the range of values, originally from 0 to 2
is restricted to the 0 to 1 range
sing this method makes
the Lerp effect
more consistent and uniform
Now, to adjust the Fresnel boundary
we modify the range from white to gradually fade inward
Let's now adjust the boundary for this Fresnel
where it starts with white and gradually disappears inward
To adjust this range
use a ScalarParameter for the ExponentIn value
which will be named FresnelExp
That will be the representative value
For the Depth Fade effect
we don’t need to adjust the Opacity value
but can control the fade distance using a ScalarParameter
which will be named FadeDist
Dist meaning Distance in this name
It'll have a default value of 100
The FresnelExp value will remain set at 2 as before
The two primary parameters for the effects
have been created like so
For the remaining color values, right-click
and choose Convert to Parameter for Inner Color
and Side Color, like this
This will add another color value
Similarly, Opacity can be adjusted
using ScalarParameter for InnerOp
A being the inner area
and also using ScalarParameter
use SideOp for the outer area
with the default values set to 0.3 for the inner part and 1 for the outer part
Currently, a simple example material has been created
to demonstrate the Depth Fade effect
Let me first explain how Depth Fade works
and how Translucent works
in this context before we proceed
Depth Fade is a visualization feature based on the depth value
typically using the distance from the camera
And here, this Depth
does not include the part
where it accounts for the distance
from the camera
In the level, you can switch to Lit mode
and select Scene Depth under Buffer Visualization
to view the depth value for all scene objects
Let's go to Scene Depth
As the distance from the camera increases
the color will gradually turn white
However, for Translucent objects
Scene Depth
does not include this information
Let's go back to Lit
You do see a sphere here, but let's try this
Go to Buffer Visualization, and then the Scene Depth option
And select the sphere that's been there
Now, this
will show that the 3D object or the sphere exists
but its depth value is not available
which is to show us its depth
Now, back to Lit
and let's use what we just made
this another data called Pixel Depth
Let's apply this to our sphere
The object remains translucent
and the distance between the camera and the object
is about 700 units, as indicated by the text
This text is broken, as it seems
because each pixel has
a slightly different distance from the camera
So these are the pixels
And they each have different values
That's why we're seeing some broken text
As the distance decreases, the overlap becomes more pronounced
Below here are the decimals
So with a lot of distance, let's see
The system can show values like 500, 600
or even 800 units for distance
If the distance continues to decrease, the value can go up to four digits
And as we approach it
you can see that the value is changing
We will now apply
Scene Depth and Pixel Depth
For example, consider point A here
and point B over here
The boundary at point B
where Scene Depth and Pixel Depth values meet
is similar to point A, or at least
this boundary with the object
By subtracting Scene Depth from Pixel Depth
point A will give a result of 0 since their values are identical
For point B, located in open space
this Scene Depth
that we see at point B
will consider that this sphere does not exist
that the object here
isn’t visible
So it will detect the distance to the background wall
It's much further away from the camera
The one we just hid
this sphere, it's much further away from this
Thus, the Scene Depth value will be
larger than the Pixel Depth value
resulting in a non-zero difference
This difference, whether it’s 1, 100, or 1000
it will surely be larger
To calculate the difference
between Scene Depth and Pixel Depth
the result is divided by a distance value
which by default is 100
While at a distance of 100 units
the boundary at 0 units should give a result of 0
And the result here will be 1
From here, it'll be by 100 units
Around 100 units from the floor
The depth value will be derived from here
If the point is farther, such as at point B
with this being more than 100
whether it be 2, 3, or 50
the result will be greater, since it's more distanced than 100
So let's try and use
the Depth Fade we actually used
Let's apply it
Remove all other nodes
First create a Scene Depth node
Subtract Pixel Depth from Scene Depth
and then divide the result by the distance value default 100
Let's connect this to Opacity and save
Then this is the exact distance
this boundary area
It's at 0% now, so it isn't too visible
That's why I set it right on here
which is just 100 units from here
So you can see that it's moved by that much
Let's modify the node we made
and compare it with Depth Fade
Let's apply and save as well
Then, the result is the same
If we type in 200 here
it’ll make the distance twice as big
So it'll move to the second tile from here
So of course, let's try typing in 200
connect it, and save
Apply, and it's the same
So, when 3D is rendered, translucent objects
are excluded from the Scene Depth
The Pixel Depth, literally the position values
of the 3D surface, is retained
So, while it is excluded from the entire screen calculation
individual data is maintained
As you can see
we can create effects like Depth Fade
using the difference between these two values
Another interesting symptom occurs
because it’s excluded from the Scene Depth
There are no shadows
Other objects cast shadows
but Translucent objects
don’t produce shadows by default
So the Scene Depth is excluded
in Buffer Visualization
you should remember this
And by leveraging this, you can create
more interesting effects
Now, let’s return the material to its original form
and go back to our Energy Shield
We’ll try increasing the scale a bit
If you pull it back far enough
as you scale the object
you’ll notice the boundaries of the object
becoming more white when it touches other 3D objects
When the scale is reduced
you’ll see interactions with other objects as well
This interaction doesn’t require
any programming
or buttons to be pressed
No need for those
Simply creating a shader like this
allows interaction between surrounding actors
Now, let’s reopen the material
and finish the remaining effects
Visualizing Positions
These two effects overlap, so let's move them a little further back
and then we’ll create a new effect
Typically, energy has a certain wavelength or period
So it is often depicted as flowing downwards
or expressed through smaller representations like lines
To achieve such a depiction
we will use position values
First, we will bring in the World Position node
then use the Dot Product
to make it ripple in a direction we define
We’ll compare this value with a vector parameter
which we will call Direction
Let's create a node based on these two values
Let's set the “Direction” value to the positive Z direction
just for the simplicity
When comparing these results
we will move the node forward to see how it works
There will be more nodes, usually
Connecting this to the Opacity
we observe a half-sphere shape
The same effect is seen with a cube or cylinder
where only half of the original length is visible
As previously explained
the Dot operation’s value range spans from -1 to 1
Since the vector values can vary
we will normalize the vector
to convert it into a unit vector
Similarly, we will normalize the position values
to create unit vectors
Upon zooming in closely
a subtle gradient effect becomes visible
Can you see this?
Since the value range is from -1 to 1
the shallow boundary corresponds to 0
with the visible area being at 1
and values beyond that are either greater than 1 or less than -1
That's why we see this here
By normalizing the result
the gradient smooths out
but it still shows only half of the shape
Back to our sphere mode
It's like a half-sphere, and the shading does look smoother
When we normalize
both the “Up” vector and position values
they are all compared
creating the gradient effect
Finally, we will remap the values between 0 and 1
For this, we usually use the Remap node
However, what we really need
is a value range from 0 to 1
so instead of manually defining separate output values
we will use something designed to handle the 0 to 1 range
The RemapValueRangeNormalized node
For the input Low
and High values, we’ll use Constant nodes
setting the Low to -1
and the High to 1
Once connected to the Opacity
you’ll notice that almost the entire shape of the sphere is visible
The output value smoothly transitions from 0 to 1
Now, we’ll assign the output value to range from 0 to 1
By adjusting
the gradient direction to red
we can make the gradient flow from right to left
which you can observe happening right here
To create a striped pattern
we’ll isolate the calculated area and move it aside
We’ll now use the Sine function
but it’s important to note
that we are using the Sine from trigonometry
which is Sine
not the Sign function, which sounds similar
So make sure you're adding Sine here
This Sine node
will help create a wave-like effect
which will be connected directly to the Remap
The result will show a pattern with the middle section appearing empty
If we change the Direction
for example, by adjusting the values from the vector
the wave-like middle portion
will bend as we modify the Direction
Alternatively, by adjusting the input to B
the pattern will shift to a diagonal direction, see?
However, since there is only one stripe
we’ll multiply the output from the Dot node
and connect it to the Sine
We’ll use a ScalarParameter node
name it lineFreq
and set its default value to 30
As a result, we now have
the striped pattern generated
We will later animate this pattern
this stripe pattern here
Depending on the input
we can adjust the frequency to customize the appearance of the pattern
You can do this as you like
The Sine node
refers to the value commonly discussed in trigonometry
When we talk about trigonometric functions
we usually mention Cosine, Tangent, and finally Sine
which we learned back in middle school mathematics
This is the Sine value we are referring to here
If we graph this
no matter what value is input along the X-axis
the output will range from 1 to -1
Starting from zero, the value increases to 1
then decreases and returns
creating a periodic Sine wave
You might recall from school
that the point where the graph reaches 1 is at pi/2
the point where it returns to 0 is pi
the point where it reaches -1 is at 3/4pi
and it returns to 0 again at 2pi
This periodic behavior of the Sine function
known as a full cycle, is also why the circumference of a circle is referred to as 2pi
No matter what value we input, 100, 1000, or any other
it will still behave in a cyclical manner based on 2pi
and we call this one period
To demonstrate this
we connect the Sine function directly to Opacity
and use a Constant node
This is for illustrative purposes
so there’s no need for you to replicate it at this stage
According to this graph, if you input 0, it will remain 0
which means nothing will be visible
If you want the output to reverse, you would think
that inputting pi/2, which is 1.07
would result in a value of 1
However, take a close look here
When you input 1.07, the value still appears to be outputting
Similarly, when you input pi
you might think it should appear
Values like 1.07, 3.14, or 6.28
will still result in visible output
However, the actual value that outputs 1 is 0.25
If you input 0.5, the output will be 0
and if you input 0.75, it will be -1, which doesn’t appear
If you input 1, it will result in 0
When you input 1.07
although it's not exactly 1
it still appears somewhat translucent, meaning some output is visible
This is how you might have learned
the Sine graph in math class
with each key value memorized
But in Unreal, it works slightly differently
Unreal interprets this as one complete cycle
dividing it into 1/4, 1/2, 3/4
and full cycle points
something like that
So when I input values like 0.25
0.5, 0.75, and 1
when you input 1.07
1.07 is like a full cycle, so it returns to the same value
which will be around here
That's why it was visible
The Sine value in Unreal
works like this
It interprets input based on this cycle
The input values from -1 to 1
multiplied by 5
Since the lineFreq value was multiplied by 5
the range of values now spans from -5 to 5
This multiplication
results in a total of 10 cycles
Starting from -5 and moving through to 4 and then 5
the total of 10 cycles is calculated
Thus, the value you input for lineFreq
essentially determines how many stripes will be created
After reconnecting this value to the Sine node
and removing the Constant node
you can see that, with a value of 5
there are exactly 10 stripes created
However, just having these static stripes
isn’t sufficient, because they need to move
They need to move
Let's use Add node connected
to the Sine node
To enable continuous motion
which means
that the time should pass
So let's connect the Time node to the Add node
So as you see
The stripes moving dynamically in the graph
So the stripes already exist
but the range that's visible
is this entire range that is displayed
So over time, this whole range
moves to a certain direction like so
It's moving continuously, showing the next set of stripes
And these movements are what we're seeing
That's one way of seeing this
Alternatively, you can think of it
as the sphere remaining stationary while the stripe pattern
itself shifts due to Add node
Either way, the end result remains the same
The Time node itself can also be modified
By connecting the Time node to a Multiply node
the default time value, which is measured in seconds
can be adjusted with Multiply
If the multiplier is set to 1, the animation will progress at its normal speed
moving by a certain unit per second
Setting the multiplier to 5
will speed up the animation fivefold
while a value of 0.3 will slow it down to 30% of its original speed
This Multiply node is connected
as a ScalarParameter
named Time Scale
with a default value of 1
This setup can then be integrated into the Remap node
which eventually feeds into the Opacity parameter
Conveniently, both the Dot and Sine nodes
produce output values ranging from -1 to 1
So how do we do this?
By using the Remap node, these values are transformed
into a range of 0 to 1, which is then connected to Opacity
The Remap node, which has been created at this stage
is connected to the output of the Saturate, Fresnel
and Depth Fade nodes via an Add node
I've explained the principle of the Add node, so I'll skip it
Once everything is combined
and connected back to Opacity
the resulting pattern appears too thick, obscuring the original shape
To adjust the thickness of the stripes
the output of the Remap node is passed through a Multiply node
For example, setting the multiplier to 0.5
will reduce the clarity of the lines to 50%
A value of 0.3 will make them
even less pronounced, like this
Additionally, in between here
a Power node can be introduced
to refine the thickness of the stripes further
See how the thickness has changed?
By manipulating the exponent value, such as 1 and 5
the line thickness can be adjusted, resulting in much thinner stripes
Through this process
you can create more dynamic
and diverse effects when designing energy shields
Using the Power node for line thickness and
the Multiply node for transparency
can both be parameterized for flexibility
The thickness from the Power node can be extracted
as a ScalarParameter named lineWidth
with a default value set to 2 for thinner lines
It can be either 1.2 or even 0
which creates band-like visuals like this
Similarly, the Multiply value from the Remap output
can be extracted as another ScalarParameter named lineOp
with a such as the default value of 0.3
The completed effect can be instantiated
to ensure dynamic adjustments
in the world, which we'll try right now
Open the instance, and let's see it here
It's moving like this
We're using parameters for this
Let's apply the instance to the sphere
Drag and see, to this sphere
make sure the parameters are well connected
And over here at this parameter
The thickness of Depth Fade and Fresnel seems similar
but the line is too thick
So go to lineWidth
increase the exponent value of lineWidth
This will make it thinner
now visually consistent with Depth Fade
You can also modify the Time Scale parameter
to adjust the speed of motion
Four times is too fast
Let's just do 2
It can move twice as faster
The Direction parameter
Let's apply negative values to red
This allows for adjustments such as reversing directions
You can add red to this too
Parameters like Inner Color
and Side Color can be adjusted dynamically, let's use orange
Let's brightening it further by setting values above 1
such as red 8 or blue 0.2
Now this will look brighter
These customizable parameters
allow you to fine-tune the visuals based on the object’s size
and other contextual requirements
Understanding the purpose of each parameter
and how they interact is crucial for accurate
and effective shader customization
In this lesson, we explored the principles of translucent shaders
which allowed us to understand the rendering mechanism
We also learned about the visualization techniques
and time-based movements
This approach differs significantly from traditional PBR shaders
While achieving visually diverse effects
requires some mathematical understanding
But it's not too difficult
The process has been simplified
thanks to Unreal Engine’s Material Editor
making complex functionality accessible and intuitive
Don’t let the mathematical aspect intimidate you
You can improve yourselves by practicing different effects
Let's summarize what we've learned today and call it a day
Thank you
Fresnel and Depth Fade
Material Setup: Create an EnergyShield folder in the content folder Generate the M_EnergyShield material
Set to Translucent to enable transparency
Fresnel Effect: Outputs values between 0 and 1 by comparing the camera view angle and the vertex normal vector
Lerp Configuration: A: 0.3, B: 1, Alpha: Connect the Fresnel value, then link to Opacity
When the preview is set to a sphere, the center will have 30% transparency, and the edges will be 100%
Depth Fade Visualizes boundaries where 3D objects meet
Processes with OneMinus, and adds to Fresnel
Apply Saturate to the added result and connect to Lerp Alpha
Emissive Parameters Configure Lerp A: Inner Color and B: Side Color
Opacity Lerp A: InnerOp and B: SideOp
Fresnel Exponent: FresnelExp
Depthfade FadeDistance: FadeDist
Position Visualization Normalize the Absolute World Position values
Vector Parameter Create a Direction parameter and normalize it
Dot Node Connect A: the normalized World Position and B: the normalized Direction
Create a RemapValueRangeNormalized node
set Input Low: Constant(-1) and Input High: Constant(1)
Create Multiply Node, Connect A: the Dot result and B: the ScalarParameter lineFreq
Create Sine Node, Input the Multiply result into Sine and connect its output to the Remap Input
Create Time and Multiply, Create Multiply, A: Time node, and B: ScalarParameter TimeScale
Create Add, Input A: the lineFreq multiplication result and B: the Time multiplication result, and link to Sine
Create Power, Configure Base: Sine and Exp: ScalarParameter(linewidth, 1)
Remap result and B: ScalarParameter lineOp (line thickness)
Create Multiply, Connect A to the Remap Result, and B to a ScalarParameter(lineOp, 0.3) (line transparency)
Create Add, Connect A to the combined result of Fresnel and Depth Fade, and B : lineOp
Link the output of the Add node to the Saturate node