Create a Highlight shader

Highlight shaders are visual effects that emphasize GameObjects by creating a glowing outline or edge. This technique is widely used in games to indicate interactive GameObjects like quest items or points of interest.

The highlight effect you'll create uses the Fresnel effect, a phenomenon where surfaces become more reflective or visible at glancing angles. In shader terms, this means the edges of a GameObject will glow brighter than the center.

Important: This tutorial is part of the Get Started with Shader Graph course, which covers different units focused on different types of shaders. In case you haven't downloaded the project files, follow these instructions on how to create a new project and import the project assets.

Before you create the shader logic, you need to create the shader graph asset itself. Unity offers different shader types depending on how you want the shader to interact with lighting. For this highlight effect, you'll use a Lit Shader Graph, which means it will respond to scene lighting.

To create the Highlight shader graph, follow these instructions:

1. Create a new Lit Shader Graph

• In the Project window, open the _GetStartedWithShaderGraph > Shaders folder.
• To create the new shader, right-click the Shaders folder and select Create > Shader Graph > URP > Lit Shader Graph.
• Rename the new shader graph "Highlight".
• Double-click the Highlight shader to open it in the Shader Graph window.

You're now ready to start building your Highlight shader.

Shaders define the rendering instructions, but they can't be applied directly to GameObjects. To use a shader on a GameObject, you need to create a material: an instance of the shader with specific parameter values.

Note: Unity creates an auto-generated material when you create a Shader Graph, but it's better practice to create your own material manually because the auto-generated material isn't always fully editable.

To create a material from the shader, follow these instructions:

1. Create a new material

• In the Project window, right-click the Highlight shader and select Create > Material.
• Rename it "Highlight_Lightbulb".

The GameObjects used for this tutorial is a lamp’s lightbulb, allowing the shader to simulate the appearance of emitted light.

Note: When you create a material directly from a shader, Unity automatically assigns that shader to the new material. If you can’t see the shader assigned in the material’s Inspector window, you can drag the shader and drop it onto the material to assign it.

The material is now using your Highlight shader. Even though the shader is empty right now, the material is ready to receive the shader properties you'll create in the following steps.

Now you'll bring a GameObject into your scene and apply the Highlight_Lightbulb material to it. This lets you see your shader working in real-time as you build it.

To add the GameObject to the scene and apply the Highlight_Lightbulb material to it, follow these instructions:

1. Open the Development_Scene

• In the Project window, open the _GetStartedWithShaderGraph > Scenes folder.
• Double click the Development_Scene to open it.

2. Add the object to your scene

• In the Project window, locate the VintageLamp prefab inside the _GetStartedWithShaderGraph > Prefabs folder.
• Drag the VintageLamp prefab into the Hierarchy window.
• In the Scene view, position the VintageLamp GameObject over the small table that's already placed in the scene.

The VintageLamp GameObject has an ObservableObject script attached to it.

The ObservableObject script (located in _GetStartedWithShaderGraph > Scripts) enables players to interact with any GameObject it’s attached to. When the player is close enough to a GameObject with an ObservableObject script attached to it, they can press E to bring the GameObject in front of the camera and rotate it and left-click to shake it side to side.

3. Verify the ObservableObject script

• In the Hierarchy window, select the VintageLamp GameObject.
• In the Inspector window, locate and verify that the ObservableObject script is present.

Important: If you're using a custom GameObject instead of the provided prefab, you'll need to manually add this script and a collider.

4. Apply the highlight material

• Select the Lightbulb child GameObject of the VintageLamp GameObject.
• In the Inspector window, locate the Mesh Renderer component.
• Use the foldout (triangle) to expand the Materials section if it's collapsed.
• Drag the Highlight_Lightbulb material from the Project window into the Material property box.

Note: Another GameObject suitable for this effect is the CaseHeart GameObject. If you choose to use it, assign the highlight material to the Heart child GameObject and rename the Highlight_Lightbulb for consistency. The GameObjects provided with this course are specially crafted to showcase shader effects effectively. If you use your own custom GameObjects, the shader will still work, but the visual results may look slightly different depending on the GameObject's shape and UV layout.

The Highlight_Lightbulb material is now applied to the Lightbulb GameObject. However, the Lightbulb GameObject currently looks plain because the shader is empty, but as you build the shader in the following steps, you'll see the highlight effect develop in real-time.

Shader properties are variables that can be adjusted outside the Shader Graph window. They appear in the Blackboard and can be connected to nodes throughout your shader graph.

The first property you’ll need to add is a texture: the base image that gives your GameObject its color and surface detail.

To Create the MainTexture property, follow these instructions:

1. Add a Texture2D property

• In the Shader Graph window, locate the Blackboard.
• Select the Add (+) button.
• From the dropdown, select Texture2D.
• With the new property selected, rename it "MainTexture".

Texture2D properties store 2D image data (textures) that can be sampled by shader nodes. This is the most common texture type for surface materials.

Property attributes

When you create a property in Shader Graph, it stores different pieces of data known as attributes. Each property type has its own specific attributes, but some of them are shared across all property types, such as the following:

• Name: This is the name used to identify the property inside Shader Graph. It’s the label you see and use when working within the graph.
• Reference: This is the name used to reference the property from outside Shader Graph, such as through scripts.

2. Set the texture attribute

• With the Texture2D property still selected, go to the Node Settings section of the Graph Inspector.
• Select the Default Value property picker (⊙) field and assign the VintageLamp_Albedo.

Your property is now defined, and the corresponding texture has been assigned to it, allowing it to be used within the shader.

Properties store data, but nodes perform operations. To actually use your MainTexture, you need a Sample Texture 2D node, which reads the information from the texture.

To add and connect the Sample Texture 2D node, follow these instructions:

1. Create a Sample Texture 2D node

• In the Workspace, press Spacebar or right-click and select Create Node to open the Create Node menu.
• In the search box, search for and add a Sample Texture 2D node.

The Sample Texture 2D node samples color data from a texture using UV coordinates. UV coordinates define which area of the 2D texture is displayed on each part of the 3D model. By using the provided UVs, the node reads the texture at those positions and outputs the corresponding color values.

2. Connect the MainTexture property to the node

• In the Blackboard, locate your MainTexture property.
• Click and drag the MainTexture property into the Workspace (this creates an instance node of that property.
• Connect the output of MainTexture to the Texture(T2) input of the Sample Texture 2D node.

3. Connect the Sample Texture 2D to Base Color

• Locate the Master Stack on the right side of the Workspace.
• Find the Base Color node block on the Fragment stack.
• Connect the Sample Texture 2D RGBA(4) output to the Base Color input.

The Base Color node block of the Master Stack defines the main surface color of your material before lighting calculations are applied. By connecting your texture here, you're telling Unity to use your texture's colors as the object's base appearance.

4. Test your shader

• Save your shader using the Save button or by using the shortcut Ctrl+S (macOS: Cmd+S).
• With the Highlight_Lightbulb material selected, re-assign the correct texture to the MainTexture property.
• Return to the Scene view and observe your GameObject. The object should now display the assigned texture.

Important: Even though you can set default values for properties in the Shader Graph, textures and other asset references must be manually assigned in each material's Inspector window. Default values set in Shader Graph define the initial state, but they can be lost during certain operations, so always verify your materials have all properties correctly assigned.

Remember, all the logic you create in Shader Graph can only be visible in the scene once you connect it to the Master Stack and save the changes.

The Fresnel effect needs a power value to control the intensity of the edge glow. You'll create a Float property for this, configured as a slider. Slider mode constrains the property to a specific range and displays it as a slider in the Inspector window.

To create the FresnelPower property, follow these instructions:

1. Add a Float property

• In the Blackboard, select the Add (+) button.
• Select Float from the dropdown.
• Rename it "FresnelPower".

Float properties store single decimal number values (like 0.5). They're used for any continuous numerical input like intensities, multipliers, or timing values.

2. Configure the property as a slider

• With the property still selected, go to the Node Settings section of the Graph Inspector.
• Open the Mode property dropdown and select Slider.
• Set the slider range as follows: Min = 0, Max = 6, and Default Value = 1.

Note: The slider range values were chosen based on our own experiments and aren’t definitive. You can adjust it if you find a range that gives you better results.

The FresnelPower property is now ready to control the intensity of your highlight effect.

The edge glow needs a color. You'll create a Color property and enable HDR. HDR (high dynamic range) mode allows colors to have intensity values greater than 1.0, creating colors brighter than pure white. This is essential for emission and glow effects, where you want colors to bloom and appear to emit light.

To create the FresnelColor property, follow these instructions:

1. Add a Color property

• In the Blackboard, select the Add (+) button.
• Select Color from the dropdown.
• Rename it "FresnelColor".

Color properties store RGBA color values (Red, Green, Blue, and Alpha). They're used whenever you need to define or modify colors in your shader.

2. Enable HDR mode

• In the Blackboard, select the FresnelColor property.
• In the Graph Inspector, open the Mode property dropdown and select HDR.
• Set the Default value to any color you want your preview to show. Don’t worry about choosing the perfect color right now, as you can adjust it later.

The FresnelColor property is now configured to create vibrant, glowing highlights.

The Fresnel Effect node is the core of this shader. It calculates how much an edge should glow based on the viewing angle between the camera and the surface.

To create and connect the Fresnel Effect node, follow these instructions:

1. Create a Fresnel Effect node

• Right-click in the Workspace, select Create Node, and search for and add a Fresnel Effect node (Math > Vector > Fresnel Effect).

The Fresnel Effect node outputs a value between 0 and 1 based on the angle between the camera’s view direction and the surface normal (the direction the surface is facing). This is calculated using the dot product between the surface normal and the view direction.

When the surface is viewed head-on, the output value is closer to 0. When the surface is viewed at a glancing angle, such as along the edges, the output moves closer to 1. This behavior creates the look of darker in the center and brighter around the edges of a GameObject.

2. Connect FresnelPower to the node

• Drag the FresnelPower property from the Blackboard into the Workspace.
• Connect the FresnelPower(1) output to the Power input of the Fresnel Effect node.

The Power input controls the intensity and sharpness of the Fresnel falloff. Higher power values create sharper, more intense edge highlights. Lower values create softer, more gradual glows.

The Fresnel Effect outputs intensity values (grayscale), but we want a colored glow. To achieve this, you'll multiply the Fresnel output with your chosen color.

To multiply Fresnel with color, follow these instructions:

1. Create a Multiply node

• Right-click in the Workspace, select Create Node, and search for and add a Multiply node (Math > Basic > Multiply).

The Multiply node takes two inputs (A and B) and multiplies them together. In this case, where the Fresnel value is high (at edges), the color will be bright. Where it's low (at the center), the color will be dim or absent.

2. Multiply the Fresnel effect with the color

• Drag the FresnelColor property from the Blackboard into the Workspace.
• Connect the FresnelColor(4) output to the A input of the Multiply node.
• Connect the Fresnel Effect Out(1) output to the B input of the Multiply node.

The Multiply node now combines your chosen color with the Fresnel intensity pattern. You can see in the preview of the Multiply node how it creates a colored edge glow that's ready to be applied to your object.

To make the GameObject actually glow, you need to connect your logic to the Emission block node of the Fragment Stack.

To connect your logic to the Emission block node of the Fragment Stack, follow these instructions:

1. Connect to Emission

• Locate the Fragment Stack.
• Find the Emission input.
• Connect the Multiply Out(4) output to the Emission input.
• Save your final shader with Ctrl+S (macOS: Cmd+S).

Emission adds color to a surface that appears to glow or emit light. Emission is always visible at full brightness regardless of the lighting in your scene. This makes it perfect for glowing effects like your Highlight shader.

When you connect the logic you’ve created to the Emission block node, the Fresnel-colored glow is added on top of your base texture, creating the highlight effect. You can now see this effect in the model of the Main Preview.

Your basic Highlight shader is now complete and functional.

The current shader creates a highlight around the edges while the center shows the base texture. If you want more control over the interior appearance, you can add an InnerColor property that adds a colored tint to the entire GameObject, creating more contrast with the edge highlight.

Important: This step is optional. If you're satisfied with your current highlight effect, you can skip to the next step.

To add InnerColor to your shader, follow these instructions:

1. Create the InnerColor property

• In the Blackboard, select the Add (+) button and select Color.
• Name it "InnerColor".
• In the Graph Inspector, open the Mode property dropdown and select HDR.
• Set the Default Value property to any color you want your preview to show. Don’t worry about choosing the perfect color right now, as you can adjust it later.

2. Create an Add node

• Right-click in the Workspace, select Create Node, and search for and add an Add node (Math > Basic > Add).

The Add node combines two inputs by adding their values together. This is useful for combining a base texture with an additional color tint or glow.

3. Add the new color to your effect

• Drag InnerColor from the Blackboard into the Workspace.
• Connect the InnerColor(4) output to the A input of the Add node.
• Connect the Multiply Out(4) output to the B input of the Add node.
• Connect the Add Out(4) output to the Emission input (replacing the previous Multiply connection).
• Save your final shader with Ctrl+S (macOS: Cmd+S).

This configuration adds an InnerColor tint to the entire GameObject while maintaining the Fresnel highlight on the edges.

Important: Don't forget to save your shader graph and adjust the new parameter in the Inspector window.

You can now fine-tune the highlight effect by adjusting the shader parameters exposed in the material’s Inspector window.

To adjust the shader parameters, follow these instructions:

1. Ensure the material is selected

• In the Project window, select the Highlight_Lightbulb material.

2. Confirm the texture property value

• In the Inspector window, locate the MainTexture property.
• Make sure it’s set to VintageLamp_Albedo. If not, assign it using the Select button.

Important: Even though you can set default values for properties in the Shader Graph, textures and other asset references must be manually assigned in each material's Inspector window. Default values set in Shader Graph define the initial state, but they can be lost during certain operations, so always verify your materials have all properties correctly assigned.

3. Adjust other shader parameters

• In the Inspector window, locate the FresnelPower and FresnelColor properties you defined for the shader.
• Position your Scene view or Game view camera to see the VintageLamp GameObject from different angles.
• Continue adjusting FresnelPower and FresnelColor until you achieve the desired highlight appearance.

Tip: Bright cyan, electric blue, bright green, or vivid purple work well for sci-fi highlight effects. Warm oranges or yellows work well for magical or fiery effects.

Once your Highlight shader is finished, save your work and create a prefab so the VintageLamp GameObject can be reused easily.

To create a prefab and save your work, follow these instructions:

1. Create a prefab of your object

• In the Project window, locate the Prefabs > _My Objects folder.
• Drag the VintageLamp GameObject from the Hierarchy window into the _My Objects folder. This creates a prefab that stores the GameObject, its material, and its components.
• In the Hierarchy window, select the VintageLamp GameObject and, in the Inspector window, disable the checkbox in the GameObject header to deactivate it. This helps keep the scene organized.
• From the main menu, select File > Save.

Important: Saving (Ctrl+S (macOS: Cmd+S)) with the Shader Graph window open only saves the shader. Scene changes must be saved separately.

The prefab is now saved and ready to reuse, and the shader can be applied to any other GameObject by creating new materials from it.

Take a moment to review the final shader graph created in this tutorial and compare it with your own. Make sure all nodes are properly connected and that all properties are correctly declared.

Congratulations!

You've created a complete Highlight shader using the Fresnel effect and emission. You now understand how to create shader properties, how to use nodes like Sample Texture 2D, Fresnel Effect, and Multiply, and how to connect them to create glowing edge effects. In the next tutorial, you'll create an X-ray shader that uses transparency and depth testing to create see-through effects.