Contents

Creating a Fresnel outline effect with Shader Graph

Highlight a model by adding an outline effect.

Overview

Emphasizing the edges of a model with an outline is an effective way to highlight and call attention to it, especially when it’s the target of a person’s gaze or interaction.

One way to add an outline to a model is to approximate the Fresnel effect, wherein the angle between the view direction and the surface normal of a model affects the shading around its edges. Specifically, you can highlight the edges of a model by taking the dot product between the view direction and the surface normal direction and applying an emissive color to the areas where the dot product is close to zero (that is, the vectors are perpendicular). See Loading entities with ShaderGraph materials to download a sample project containing this shader along with many others.

Prepare the Fresnel node graph

Set up a reusable NodeGraph to house your Fresnel logic by following these steps:

  1. Create a custom Shader Graph material (Insert > Material > Shader Graph).

  2. Open the Shader Graph Editor by clicking the Shader Graph button.

  3. Add a NodeGraph node by clicking the New Node button or pressing the tab key and searching for “Node Graph”.

  4. Name the NodeGraph node “Fresnel”.

  5. Add a new input to the Fresnel node graph by selecting it and clicking the New Input button in the Inspector.

  6. Name the new input “Falloff” and give it a type of Float.

  7. Add a new output to the Fresnel node graph by selecting it and clicking the New Output button in the Inspector.

  8. Name the new output “Out” and give it a type of Float.

The following image shows the main body of the Shader Graph material:

[Image]

Compose the Fresnel logic

Approximate the Fresnel effect by taking the dot product between the view direction and the normal direction in the Fresnel node graph:

  1. Add a View Direction node and set its Space to world.

  2. Add a Normal node and set its Space to world.

  3. Take the dot product between the View Direction and Normal with a Dot Product node.

  4. Connect the output of the Dot Product node to the input of a Clamp node and set its high value to 1.0.

  5. Connect the output of the Clamp node to the input of a One Minus node.

  6. Connect the output of the One Minus node to the top input of a Power node.

  7. Connect the Falloff input to the bottom input of the Power node.

  8. Connect the output of the Power node to the Out output.

The interior of the Fresnel node graph is as follows:

[Image]

The following images show the result of each stage of the Fresnel node graph if it were fully connected:

In this case, the view direction and the normal direction are parallel at the center of the sphere, and become more perpendicular to each other toward the edges of the sphere, meaning the dot product ranges from a value of 1 at the center to a value of 0 near the edges. You can flip this by subtracting 1 from the dot product, and increase the rate of falloff by taking that value to a power.

Create an outline effect with the Fresnel node

One way to create an outline effect with the Fresnel node is by employing its output to apply an emissive color around the edges of a model. In the main graph of your shader:

  1. Add a new uniform input of type Float and name it “OutlineFalloff”.

  2. Connect the OutlineFalloff node to the Falloff input of the Fresnel node graph.

  3. Add a new uniform input of type Color3 (Float) and name it “OutlineColor”.

  4. Connect the OutlineColor node to the top input of a Multiply node.

  5. Connect the Out output of the Fresnel node graph to the bottom input of the Multiply node.

  6. Connect the output of the Multiply node to the Emissive Color input of the Preview Surface node.

The resulting graph is as follows:

[Image]

You can adjust the OutlineColor input to change the color of the outline, and you can adjust the OutlineFalloff to control the rate of falloff for the Fresnel effect, as shown in the three examples below:

See Also

Shader Graph