Shader Graph in Unity for Beginners

Using Texture Nodes

Currently, the simple shader is a bright solid red color. You’re going to modify the shader so that it doesn’t lose the original wood texture. Instead, you’ll make the highlight appear as a glowing edge around the surface detail.

First, edit the HighlightShaderGraph by double-clicking it or selecting Open Shader Editor in the Inspector.

Delete the Color node, right-click on it, then select Delete. You’ll create everything from scratch.

Instead of a single color, you will plug in a texture by using the Sample Texture 2D node.

Create a node either from the context menu with a right-click, then select Create Node or by using the spacebar hotkey. Select Input ► Texture ► Sample Texture 2D.

The Sample Texture 2D node reads color information from a texture asset and then outputs its RGB values.

Select a texture from the Texture input port. Click the dot next to the empty field to open the file browser.

Choose the WoodAlbedo texture asset.

Connect the Sample Texture 2D’s RGBA output port into the PBR Master Albedo port.

Voilà! Your preview sphere now shows the wood texture on the surface.

If you add a normal map, you can add some more surface detail. First, create another Sample Texture 2D node by selecting Create Node ► Input ► Texture ► Sample Texture 2D.

Select the WoodNormal texture in the Texture input port.

Adjust the Type dropdown from Default to Normal.

Output the RGBA values into the Normal port of the PBR Master.

The Main Preview sphere should now appear rougher. The normal map fakes small indentations and divots in the surface. This helps sell the appearance of wood grain.

Adding a Fresnel Effect

Now that you have a base texture and normal map replacing the previous solid red color, let’s add the highlight effect using a different method.

Instead of making the entire object glow uniformly, you can confine the glow to only the edges. This can be accomplished with something known as the Fresnel effect.

Create a new node with right-click or using the spacebar hotkey, then select Create Node ► Math ► Vector ► Fresnel Effect.

This new node shows a sphere with a white glowing ring around its circumference. You can adjust the width of its halo using the Power input port. Click and drag the X label to the left of the field or enter specific numbers.

Larger values make the halo very thin, while smaller values make it very wide. You can use a value of 4 for a thinner rim glow.

In order to pass this halo to your material, you connect the Fresnel Effect output to the Emission of the PBR Master.

Your MainPreview now shows a wooden sphere with a bright white halo from the Fresnel Effect.

You can try it on your kitchen table. You’re using Unity’s version of this phenomenon to make the edges of your geometry glow.

Multiplying by Color

Adding some color to the glowing rim is as easy as doing some basic color math.

Create a new color node that will specify the color for the glowing ring. Use right-click
or spacebar to open the context menu, then select Create node ► Input ► Basic ► Color. Switch the color mode to HDR.

Select a color to represent your highlight color. For example, choose a nice bright green here, R:5, G:255, B:5.

Increase the Intensity to 3.5.

You can’t plug the new color into the fresnel effect as it doesn’t have a color input. Instead, you’ll need to combine the fresnel output with the output from the color node. This is achieved by making use of a Multiply node.

Create a Multiply node with right-click, then select Create node ► Math ► Basic ► Multiply.

Delete the existing edge between the Fresnel Effect and the PBR Master. Instead connect the Fresnel Effect Out to the A input of the Multiply node.

Connect the Color node’s Out to the B input of the Multiply node.

Finally, connect the Multiply Out port to the Emission of the PBR Master port. Voilà! You can see the your bright green HDR color surrounding the Main Preview sphere.

Remember you can use the Fresnel Effect Power to grow or shrink the halo. A smaller value of 1.5 gives you a broad green glow.

A value between 4 and 5 will work well for this sample game, but feel free to experiment with your own values.

Save the shader graph and witch back to the Editor, you’re ready to see your HighlightShaderGraph in action.

Enter Play mode.

When you hover your mouse over a game piece, it retains its original wood texture. However, it now has a bright green glow around the edges. Once again, you can now play the game, only with a more subtle highlight.

Adding Blackboard Properites

If you want to modify the look of the glow effect, you have to return to the Shader Graph editor window and make those changes. For example, you might want to grow or shrink the bright halo using the Fresnel Effect Power.

It’s not very convenient if you want to test out various changes. Fortunately, Shader Graph has the concept of Properties.

You can expose part of the graph publicly in the Inspector allowing you to make small changes interactively. This is done by making use of the Blackboard interface.

Return to to the Shader Graph and make sure the Blackboard is visible. Toggle the Blackboard button in the upper right if it is hidden.

Adding Base Texture and Normal Map properties

Now you’re going to expose the both the base texture and normal map to be accessible from the Inspector.

Click the + icon in the upper right of the Blackboard. Select Texture 2D from the dropdown. An entry should appear on the Blackboard. Rename it BaseTexture.

Make sure exposed is checked. If you chose to expose a property, it’s public and available in the Inspector.

To add the property to the graph, simply drag it by the label and drop it into the workspace. Leave it somewhere to the left of the Sample Texture 2D node.

Connect the BaseTexture port to the Texture input port on the SampleTexture 2D that plugs into the Albedo. This will replace the previous set value.

Repeat the same process for the Normal Map as well. Click the + icon and create a new Texture 2D. Rename it Normal Map.

Drag it into the workspace area and plug it into the Sample Texture 2D for the Normal map.

Click Save Asset, and return to the main Editor window.

Select the Glow_Mat material then take not of the two extra fields in the Inspector: Base Texture and Normal Map.

Because they currently have no Textures set, your preview window shows your green highlight over a gray sphere.

Select the WoodAlbedo and WoodNormal textures for the BaseTexture and NormalMap, respectively.

The wood textures now display correctly underneath the glowing edges.

Exposed properties allow the user to input data directly into the shader without needing to edit the shader graph itself. Experiment on your own with choosing different base texture and normal maps.