Getting started with Unity's new Shader Graph Node-based Shader Creator/Editor (tutorial 5 - Exploring Fresnel/Color Rim and Update on Vertex Displacement Attempts)

Introduction (to the Tutorial Series):

I will be writing about my own experiences using Unity's new beta Shader Graph, part of its upcoming 2018 release (also in beta). The Shader Graph lets you create a variety of Unity shaders using nodes - not requiring you to write code.

I will be writing about this journey over multiple posts, usually spaced about a week apart. Each post will be a short tutorial on how to use various node types to create different shader effects. And will include brief discussions on types of shaders and their uses, and later, how the Shader Graph compares with code-based shaders. I will try not to get overly technical, but will try to give you an idea of the complexity involved in shaders, from lighting to vertex and fragment manipulation.

Given the nature of beta software, expect the Shader Graph (and later tutorials) to vary from earlier ones that you can now find online. Even within my tutorials there will be changes if/when the beta evolves - including, if necessary, going over the basics again if something in the editor changes significantly.

I hope you find this tutorial useful. If you do, please be kind and click an interesting ad to help support this site. It really does help, believe me. And thank you, I'm grateful to you!

If you have any questions or comments, please leave a comment and I'll try to respond with a day or so. I'm writing these tutorials in my spare time and each one takes several hours to a full day to put together. And I prefer to write them, instead of doing a quick video sequence. A written tutorial is more easily translated by those who do not speak English.

I am using Windows 8.1.

Requirements:

You need Unity's 2018.1 beta. I am using 2018.1.0b12 in this tutorial. You also need the latest Shader Graph Editor (1.1.2-preview) and Lightweight Render Pipeline (1.1.2-preview). And we will start with the same Lightweight-Preview project from tutorial 1 but will be creating a new shader graph called FresnelShader. You should have a sphere object using FresnelShaderMat.

For more information on setting up the beta and updating to the latest Shader Graph Editor, please see tutorial 1.

Note: Update - Since these tutorials began an important procedural change that has happened since earlier Shader Graph betas is that you now create shader graphs by Assets->Create -> Shader->PBR Graph (or Sub Graph or Unlit Shader) instead of Assets->Create->Shader Graph. At the end, I added an update about my experiences with 0b10.

Update - What Happened to Doing Displacement?

I've been trying to figure out if doing vertex (or fragment) displacement was possible with the Shader Graph system. For those that aren't familiar with these terms, basically, can I manipulate the position of vertices on the object using a shader. With code-based shaders (or other visual shader editors, for that matter) you can write displacement shaders. But so far, despite looking at some interesting nodes available, there does NOT seem to be a way to do this with Unity's Shader Graph system.

I even took advantage of the ability to create CUSTOM Shader Graph nodes using C#. I was hoping I could "trick" the graph into modifying the vertex's position. After all, there is a Position node already - assumed to be the Vertex Position. But it only has an Output (no Input). I was hoping that if I input the Position then modified it, it would update the Position on the Vertex.

I tried it and failed. Apparently, Unity must make a copy of the Position - so it's not a direct link to the actual vertex position. So my modifications only stay within the custom Node (or as an Output, if I choose.) But without the ability to update (input) the Position to the PBR Master node or Somewhere, then I appear to be out of luck. Without using a code-based editor, or a visual shader editor that allows for displacement, I can't find a way to do displacement.

Shader Forge and other visual editors (Amplify?) do allow this, I believe. I hope Unity will add this ability before they ship their Shader Graph Editor system.

For those interested, here is my DisplacementTestNode.cs code which creates a custom node you can use in the Shader Graph Editor. You'll notice that building the basic Node is easy, and within the quotes in the custom function is the HLSL shader language code that is doing the real shading work.

using UnityEngine;

using UnityEditor.ShaderGraph;

using System.Reflection;



[Title("Custom", "Displacement Node")]

public class DisplacementTestNode : CodeFunctionNode {



 public DisplacementTestNode() {

  name = "Displacement Node";

 }

 protected override MethodInfo GetFunctionToConvert()

 {

  return GetType().GetMethod("MyCustomFunction",

   BindingFlags.Static | BindingFlags.NonPublic);

 }



 static string MyCustomFunction(

  [Slot(0, Binding.None)] Vector3 Normal,

  [Slot(1, Binding.None)] Vector3 DisplaceMultiplier,

  [Slot(2, Binding.None)] Vector3 Position,

  [Slot(3, Binding.None)] out Vector3 Out)

 {

   Out = Vector3.zero;

  return

   @"

{

 Out = Normal*DisplaceMultiplier;

 Position = Position + Out;

} 

";

 }

}

Hopefully, this will change before they release it.

For information on creating custom shader graph nodes, see the new tutorial resources list below - namely, the Creating Custom Shader Graph Nodes Blog Post.

New Tutorial Resources From Unity:

A large Shader Graph library example from Unity and Unity Global Content Evangelist, Andy Touch - check it out on GitHub, HERE.

Unity's YouTube Channel with GDC presentations HERE.

Unity Evangelist Andy Touch's GDC presentation on the Shader Graph HERE.

Creating Custom Shader Graph Nodes Blog Post HERE.

Creating a Color Fresnel (Color Rim) Effect (Step 1):

It turns out Unity has made it easy to create a Rim effect. That is where you see a 'glow' around the edges of the object. If you want to see how to create a Color Rim effect without using the supplied Fresnel node, then look at the ColorRim shader in Andy Touch's Shader Graph library (see New Tutorial Resources From Unity section above).

If you haven't done so already, create a new Shader Graph called FresnelShader and a new Material called FresnelShaderMat and set FresnelShader as that material's shader. Open up the FresnelShader in the Shader Graph Editor (double click or single click select the shader and then click Open Shader Editor in the Inspector.)

Note: Remember, now you use Assets->Create->Shader->PBR Shader to create a shader graph for PBR.

Create two properties in the Blackboard. RimPower (a Vector1, Slider, with a Default of 1, a Min of 0 and a Max of 5). And RimColor (a Color, with the color of your choice. I used a Lime Green.)

Drag the properties into the workspace. They are now nodes.

Right-Click and select Create Node. Type Fresnel in the search window. Select "Fresnel Effect" to create a Fresnel Effect node.

Right-Click and Create Node again. This time type Multiply into the search window. Create a Multiply node. We are going to multiply our RimColor and the output of the Fresnel Effect node to get a colored Fresnel effect.

Now, connect the RimPower to the Fresnel Effect input, Power(1).

Connect RimColor to the Multiply input A(1). It will change to A(4). The inputs are 'dynamic', they will update to reflect the Vector type.

Connect the Fresnel Effect output Out(1) to the Multiply input B(1). B(1) changes to B(4). Out(1) stays the same - odd, but that's beta software, I guess.

Connect the output of the Muliply node to the Emission input of the PBR Master.

You've just created a colored rim effect. Congratulations! That was easy, wasn't it?

Now let's turn this into a subgraph that we can use in other shader graphs.

Adding Normal and View Direction as Properties (Step 2):

To turn our colored version of the Fresnel effect into a usable subgraph, we need to remember that only Properties will be exposed in the subgraph. Right now, the Fresnel Effect node is using default values for the Normal and View Direction (View Dir). So we need to have properties to expose those values in the subgraph.

Create two more properties in the Blackboard and drag them into the workspace. The first property is Normal (a Vector3) and the second is View Direction (a Vector 3). The default values for each Vector3 are fine.

Connect those properties to their corresponding input on the Fresnel Effect node.

You will immediately notice that our color rim effect disappears. That is because we are using zeros (0) as our defaults for Normal and View Direction. The Fresnel Effect uses both vectors to determine where there is an 'edge' and colors it using the Power (and in our case, the RimColor). Right now, it sees edges everywhere on the surface.

Converting Color Fresnel into a Subgraph (Step 3):

First, Left-Click and Drag a Selection Rectangle around all four (4) properties, the Multiply node and the Fresnel Effect node. In other words, everything except for the PBR Master.

With those six (6) nodes selected, Right-Click to bring up the context menu and select, Convert To Sub-graph. The Save Subgraph file dialog will open. Name it ColorRimFresnel.ShaderSubGraph.

You now have a subgraph that let's you input the RimColor, RimPower, Normal to use, and View Direction to use. You will now find this subgraph in the Sub-graph Assets of the Create Node dialog (Right-click then select Create Node to bring up the dialog/context menu)

Using Color Fresnel Subgraph (Step 4):

It is likely that when you did the conversion to a subgraph, the nodes were replaced by the subgraph. So it is still connected to the Emission input of the PBR Master. If not, go ahead and do that now.

Since you don't need the properties Normal and View Direction anymore, go ahead and delete them from the Blackboard. We only created them for proper subgraph creation. Now the subgraph has them internally and exposes them as inputs.

However, we still need RimPower and RimColor since we want to use those properties as inputs to our new subgraph. Drag out those properties into the workspace and connect them to their corresponding inputs on ColorRimFresnel.

Next, Right-Click and Create Node. Go to Input->Geometry and select Normal Vector. Repeat the same steps to and also create a View Direction node. (Input->Geometry->View Direction).

These nodes give you the Normal vector for the vertex and it's View Direction vector. The Fresnel Effect node uses (in a sense) these same nodes internally as defaults, using World coordinates. You'll notice that both nodes have a dropdown that let's you specify what coordinate space to use. As a default, both use World.

Go ahead and hook up the Normal Vector node to the Normal input and the View Direction node to the View Direction input on the ColorRimFresnel node.

Play around with different settings for the Normal and View direction, such as Object space vs World space. To finish up, I set mine to Object space, just for fun and because I like the effect it generates a bit more than World space.

Assign your FresnelShaderMat material to an object in your scene. Try setting the RimPower all the way to 5 (max) to made for a very fine rim color line on the edges of the object.

Conclusion:

You've finished with the Color Rim effect, and have a subgraph now to use in other graphs. Why not try adding in a texture node and property to change Albedo from it's boring, gray default? Or add this subgraph to another shader to combine effects?

It's up to you. Enjoy! And I hope you find this tutorial useful!

Search This Blog

Augment Your Reality Safely - Reflections on AR and Other Things