Shader Graph in Unity for Beginners

Navigating the Interface

Although you only have a couple of nodes in your graph, now is a great time to get accustomed to the Shader Graph interface.

Drag the nodes around and notice that the edge stays connected between the Color’s output port and the PBR Master’s input port.

Nodes can contain different types of data. As you created a node that holds color input, you can also create a node representing a single number by selecting Create Node ► Input ► Basic ► Integer. You won’t actually do anything with this new node— it’s for illustration purposes only.

Connect the Integer Out port to the Alpha port of the PBR Master.

Your graph is still tiny, but now you have enough nodes to try out a few hotkeys. Select a couple of nodes and press these hoykeys:

• F: frame the selected node or nodes.
• A: frame the entire graph.

You can also use the buttons at the top of the window to toggle the Main Preview and Blackboard. The Show in Project button will help locate the current shader graph in the Project window.

Once you’re comfortable navigating your graph, do some cleaning. You only need the Color node and PBR Master node.

Right-click over the connection between the Integer and Master node and select Delete. That lets you disconnect the node from the graph.

Likewise, you can delete the Integer node entirely. Right-click over the node and select Delete.

Once done, click the Save Asset button in the top left of the interface. Unity will save all your changes, then it will compile and activate the shader. This step is required every time you want to see your latest changes in the Editor.

Now, return to the Project window, then select the Glow_Mat material.

Because the shader is propagating to the material, the sphere in the Inspector preview should show up as red.

Now, drag the Glow_Mat material over one of the tangram pieces in the Scene window.

As you expected, your material and shader turn the mesh a nice, uniform red.

Adding a Glow Effect

If you want Glow_Mat material to have a more dramatic glow, edit the shader graph again.

Currently, you have the Color‘s output feeding into the Albedo of the PBR Master.

You can also drag another edge from the Out to the Emission. Now that same color is being used twice: Once for the base color and again for the emission color.

Output ports can have multiple edges, but input ports can only have one.

Now, switch the Mode dropdown in the Color node to HDR. This taps into the high-dynamic range of colors.

Next, edit the color chip. In HDR Mode, you get an extra option for Intensity. Click the +1 in the bottom swatch a couple of times or drag the slider to about 2.5. Then, save your changes and return to the Editor.

In the Editor, your game piece glows a bright red-orange. The post-processing in your scene is already set and enhances the high-dynamic range color.

Now, select the PostProcessing game object in the Hierarchy. The glow stems from the Bloom effect.

Next, open the Bloom parameters and adjust the Intensity, or how strong the glow appears, and Threshold, or cutoff to start glowing. This example shows a value of 3 and 2, respectively.

Wow, that’s a pop of color!

Making the Highlighter Script

You don’t want the game piece to glow all the time. You only want to enable it depending on the mouse position.

When the mouse hovers over a game piece, you’ll switch to the Glow_Mat material. Otherwise, the game-piece will display the default Wood_Mat material.

First, create a new C# script in RW/Scripts called Highlighter. This will help you swap between the two materials at runtime. Replace all the lines in your script with the following:

using UnityEngine;

// 1
[RequireComponent(typeof(MeshRenderer))]
[RequireComponent(typeof(Collider))]
public class Highlighter : MonoBehaviour
{
    // 2
    // reference to MeshRenderer component
    private MeshRenderer meshRenderer;

    [SerializeField]
    private Material originalMaterial;

    [SerializeField]
    private Material highlightedMaterial;

    void Start()
    {
        // 3
        // cache a reference to the MeshRenderer
        meshRenderer = GetComponent<MeshRenderer>();

        // 4
        // use non-highlighted material by default
        EnableHighlight(false);
    }

    // toggle betweeen the original and highlighted materials
    public void EnableHighlight(bool onOff)
    {
        // 5
        if (meshRenderer != null && originalMaterial != null && 
            highlightedMaterial != null)
        {
            // 6
            meshRenderer.material = onOff ? highlightedMaterial : originalMaterial;
        }
    }
}

Let’s take a closer look at the script:

1. The script can only be applied to an object that contains a MeshRenderer and a Collider component. This is controlled by adding [RequireComponent] attributes to the top of the script.
2. These are references to the MeshRenderer, originalMaterial and highlightedMaterial. The materials are tagged with the [SerializeField] attribute, making them assignable from the the Inspector.
3. In Start, you automatically fill in your MeshRenderer with GetComponent.
4. You invoke EnableHighlight(false). This ensures that your non-highlighted material shows by default. The public method called EnableHighlight that toggles the renderer’s material is right below. It takes a bool parameter called onOff to determine the highlight’s enabled state.
5. You guard to prevent any NullReference errors
6. You use the ternary operator to save space.

Adding Mouse Events

Because you’ll apply this to game pieces with MeshColliders attached, you can take advantage of the built-in OnMouseOver and OnMouseExit methods. Add following after the EnableHighlight method:

    private void OnMouseOver()
    {
        EnableHighlight(true);
    }

    private void OnMouseExit()
    {
        EnableHighlight(false);
    }
 

When the Mouse is over a game piece, it will invoke EnableHighlight(true). Likewise, when the mouse exits the Collider, it will invoke EnableHighlight(false).

That’s it!

Save the script.

Highlighting the Game Piece

If you applied the Glow_Mat to any of the pieces in the previous sections of the tutorial, you need to switch all game pieces back to the Wood_Mat material in the Editor. You’ll use the Highlighter to enable the glow at runtime instead.

First, select the seven objects inside the Tangram transform that represents the individual game piece shapes. Then, add the Highlighter script to all of them at once.

Next, in the Original Material field, drag in the Wood_Mat material. Then, in the Highlighted Material field, drag in the Glow_Mat material. Finally, enter Play mode and check out your handiwork.

Not bad! When you hover the mouse over a tangram piece, it glows a bright, hot red. Move the mouse away from it and it returns back to its original wooden state.

You can still play the game normally, but now the highlight effect adds a little bit of visual interest, focusing the user’s attention.