This repository will give detailed instructions on how to apply a Shader created with the Shader Graph window to an element on a Canvas with the render mode set to screen space : overlay. This repository will also be used as a supplement for the YouTube video.
1 Initial Setup and Details
    1.1 Disclaimer
    1.2 Details
    1.3 Before continuing you should have
2 Instructions
    2.1 Issue Discussion
    2.2 The Guide Was Too Long, And I Did Not Want To Read It All
    2.3 Scene Setup
    2.4 Unity Editor Setup
    2.5 Create A Shader Graph
    2.6 Setting Up The Shader Graph
    2.7 Converting A Shader Graph Into A Shader
3 Conclusion
To the best of my knowledge, this walkthrough and all content inside of it has been typed with no errors or misinformation. That being said, neither I, nor Nichathan Gaming owns, has affiliation to, or any form of control over Unity. All information in this walkthrough is subject to become obsolete at any moment and there are no guarantees that anything inside of this walkthrough will work. By continuing to follow this walkthrough, you understand that neither Johnathan Nichols nor Nichathan Gaming are responsible for whatever may happen. That being said, I put a lot of time and effort into this walkthrough and I sincerely hope that it can help you.
Back To Top
This walkthrough was typed by Johnathan Nichols of Nichathan Gaming on May 14th 2024. The walkthroughs purpose is to supplement the lack of documentation by Unity which claims that it is impossible to apply a Shader created with Shader Graph to an element on a Canvas with the render mode set to screen space - overlay.
Back To Top
- The Unity Hub.
- A LTS Unity Editor version 2022.3.5f1 or later. This solution should work with previous and later versions of Unity but layouts may change
Back To Top
The issue with adding a material that is of a Shader Graph type to a Canvas with a render mode set to screen space - overlay is that the Shader Graph is not rendered and you will only see a large black rectangle in the place of your UI element. This is because of how Unity exports their Shader files for Shader Graphs. We overcome this issue by copying and pasting the Shader code that Unity generates and removing a few sections that end up causing Shader Graph files to not function on the Canvas.
The simple solution to this problem is to create a functioning Shader Graph using a 2D Sprite Renderer for testing. Then you view the generated shader and copy the entire contents to an empty Shader file. Next, you want to remove all but the first Pass block and then remove the Tags block from the first Pass. The resulting code will work perfectly fine on any element in a Canvas with a render mode set to screen space - overlay.
In this guide, I used 2 different Sprite (2D and UI) images to demonstrate that it works. Any image file that you have will work just fine if you wish to follow allong. You may even use no image or default Unity images.
Start with a blank scene which contains a Main Camera, an EventSystem, a Sprite Renderer (with a scale set to 0.2f, 0.2f, 0.2f so it may display on the Game window nicely), a Canvas (with a Render Mode set to Screen Space - Overlay), and an Image (set as a child of the Canvas)
| Hierarchy | Canvas | Canvas Image | Sprite Renderer |
|---|---|---|---|
 |
 |
 |
 |
To continue, you must have Shader Graph installed.
2.4.1 Open the Package Manager.
2.4.2 Go to the Unity Registry Packages tab.
2.4.3 Scroll down to Shader Graph. Ensure that it is installed or install it.
| 1 | 2 | 3 |
|---|---|---|
 |
 |
 |
2.5.1 Create a Shader Graph.
| Inner Steps | Visual Guide | |||||
|---|---|---|---|---|---|---|
|
 |
2.5.2 Create a Material from the Shader Graph
| Inner Steps | Visual Guide | |||
|---|---|---|---|---|
|
 |
2.5.3 Apply the Material to the Sprite Renderer by dragging the Material from the Project/Assets folder onto the Image/Sprite Renderer/Material section. This will allow us to see the changes made to our Shader Graph whenever we save it.
2.5.4 Open the Shader Graph.
2.6.1 Create the parameters: MainTex (Texture2D) and Gradient (Gradient). MainTex must be spelled exactly as this parameter will capture the sprite attached to the Image and Sprite Renderer.
| MainTex | Gradient | End Result |
|---|---|---|
 |
 |
 |
Note : The next few steps will be to set up the MainTex section of the Shader Graph. To create a new Node, one may right click on an open section of the Shader Graph window or drag a line to an open section of the Shader Graph.
2.6.2 Drag the MainTex parameter onto the window.
2.6.3 Create a Sample Texture 2D and connect MainTex to the Texture(T2) input of the Sample Texture 2D.
2.6.4 Create a Multiply and connect the RGBA(4) of the Sample Texture 2D to the A(4) input of the Multiply.
2.6.5 Create a Vertex Color and connect the Out(4) of the Vertex Color to the B(4) input of the Multiply. (The Vertex Color captures the Color parameter of the Sprite Renderer or Image that the material with this shader is applied to.)
2.6.6 Create another Multiply and connect the Out(4) of the first Multiply to the A(4) input of the second Multiply.
Note : The next few steps will be to set up the *Gradient section of the Shader Graph. This section is editable to fit the needs and wants of the Shader.
2.6.7 Drag the Gradient parameter onto the window. (Clicking on the Gradient parameter and then on the image to the right of the Default property in the Graph Inspector will allow one to set the Gradient values.)
2.6.8 Create a Sample Gradient and connect the Gradient to the Gradient input of the Sample Gradient.
2.6.9 Create a UV.
2.6.10 Create a Split and connect the Out(4) of the UV to the In(4) of the Split.
2.6.11 Connect the R(1) of the Split to the Time(1) of the Sample Gradient. (The gradient image should now be visible in the Sample Gradient dropdown. Also, one may see the outputs R(1), G(1), B(1), A(1). R-Horizontal Gradient, G-Vertical Gradient, B-Left Color, A-Right Color)
| Horizontal Gradient | Vertical Gradient | Left Color | Right Color |
|---|---|---|---|
 |
 |
 |
 |
2.6.12 Create a Multiply and connect the Out(4) of the Sample Gradient to the A(4) and B(4) of the Multiply. (This will deepen the color of the gradient and make it closer to an actual gradient as the default Shader gradients are too soft.)
Note : The next few steps will combine steps 2-7 and 8-12 and make the Sprite Graph display on the Sprite Renderer.
2.6.13 Connect the Out(4) of the Gradient's Multiply (step 12) to the second Multiply (step 6) from the MainTex section. (This will add the color of the gradient to the image and color of the Sprite Renderer and UI Image.)
2.6.14 Create a Split and connect the Out(4) of step 6's Multiply to the In(4) of the Split. (This allows us to get the Alpha value from the color.)
2.6.15 Connect the Out(4) of step 6's Multiply to the Base Color(3) of the Fragment.
2.6.16 In the Graph Inspector, in the Graph Settings tab, change the Built-In Surface Type from Opaque to Transparent. (The parameter Blending Mode should be automatically added and set to Alpha.)
2.6.17 Connect the A(1) of the Split to the Alpha(1) of the Fragment.
2.6.18 Everything is all connected. Click Save Asset in the top left of the Shader Graph window to apply the changes and see them in the Sprite Renderer. (Pressing Ctrl+s does not save a Shader Graph file.)
| Unsaved File | Saved File |
|---|---|
 |
 |
Note : One may notice that while the Sprite Renderer is currently displaying the Shader correctly, the UI Image will just be a black rectangle.
| Sprite Renderer | UI Image |
|---|---|
 |
 |
This section will detail the last few steps needed to take the Shader Graph code generated by Unity and convert it into a Shader which can be applied to UI Elements on a Canvas with a render mode set to screen space - overlay.
2.7.1 Create a new Unlit Shader. (Create -> Shader -> Unlit Shader)
2.7.2 Select the Shader Graph that you want to convert into a Shader in the Project/Assets window. Then click View Generated Shader in the Inspector.
2.7.3 Return to the Unity Editor and open the Unlit Shader file from step 2.7.1. Then delete all of the contents within. (You should now have the Generated Shader and Unlit Shader files open in your text editor.)
This sub-section will talk about the parts in a Shader as created by the Unity Shader Graph.
2.7.4.1 The first part of a Shader will be the File Name. This name will be how you find your Shader when you apply it to a Material. Shader "Folder/File Name"
Note : A Shader must have a file name but it can have between no folders to many folders. Using or not using folders for your shaders can be an effective way to keep your Shaders organized.
| No Folder | One Folder | Many Folders |
|---|---|---|
  |
   |
    |
2.7.4.2 The second part of a Shader will be the Properties. This is where we see MainTex, without these properties you may receive errors.
2.7.4.3 The third part of a Shader will be the SubShader. This will hold the Tags and Pass sections of the Shader.
2.7.4.4 The SubShader will have Tags. These should not be touched as they help describe how the Shader is displayed.
2.7.4.5 The final part of a Shader will be the Pass sections. These sections detail how exactly to display and handle the Shader and they are also why the Shader Graph does not work on a Canvas with the render mode set to screen space - overlay. (A Pass begins with Pass { and ends with ENDHLSL }.)
Note : Aside from the file name, this is the only part of the generated shader that we should edit.
2.7.5 Copy everything from the Generated Shader file from Shader "FolderName/FileName" to the end of the very first Pass ENDHLSL }. (When you copy this over, you should add 2 more curly brackets } to close off the Shader.)
| Start | End |
|---|---|
 |
 |
In conclusion, to add a Unity Shader Graph to a Canvas with a render mode set to screen space - overlay one should create the Shader Graph using a Sprite Renderer for testing then create an empty Shader file and copy the contents over removing all but the first Pass.