Shader Graph UI Image Shader

Is it possible to make a shader for an Image(sprite) that does not need a scene light? My shader is black without a light?

 

Figured it out. At least what I figured out works.

 

Could you post what you did that worked?

 

. Haven't worked it any more than this though .

 

I had issues using Shader graph for a UI Image, finally fixed all the issues and decided to make a tutorial about it.
besides of the Canvas render mode issues I also had the "Material doesn't have texture property '_MainTex'" error.

hope you will find it useful

 

For me, Screen Space - Camera was not an option. Setting the canvas distance close to the near clipping plane introduced pixel jitter. Setting it farther made the UI clip with scene geometry.

There are two solutions I have found:
1. Use Screen Space - Camera with custom UI shaders with ZTest set to Always
2. Edit your custom shader Blend properties

First, hop on over to https://unity3d.com/get-unity/download/archive and use the drop-downs to grab copies of the built-in shaders. If you look in DefaultResourcesExtra\UI\UI-Default.shader, you can see how the shaders are usually set up for UI.

Solution 1:
Once you have a copy of UI-Default.shader, go ahead and change ZTest [unity_GUIZTestMode] to ZTest Always. It should be around line 44. You will then need to create a material using this shader and use it for every UI element on the Screen Space-Camera Canvas to prevent clipping. Then you can set the canvas far enough out to prevent jitter. You will also have to set ZTest Always on your Shader Graph shader.

Solution 2:
To create a code version of your Shader Graph, right-click the master node and select, Copy Shader. Then paste it into a new shader file.

In order to make your Shader Graph render correctly in Screen Space-Overlay mode, you will need to set the blend settings as they are in the Default UI shader. As of this writing, Unlit Shader Graphs set Blend at the Pass level: Blend One Zero, One Zero. We need it at the SubShader level: Blend SrcAlpha OneMinusSrcAlpha. (See line 49 in the code below.)

If you want Image tinting to work correctly, keep in mind that the Image component leverages vertex colors. You will have to do the blending in your graph, like so:

Your can also add in some of the features from the default UI shader. Below is the code I am using up until the point where the HLSL starts.

Code (CSharp):

1. Shader "UI/Pulse"
2. {
3.     Properties
4.     {
5.         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
6.         _Color("Tint", Color) = (1,1,1,1)
7.        
8.         [ToggleUI] _Pulse("Pulse", Float) = 1
9.         _HighlightColor("Highlight Color", Color) = (1,0.6412213,0,1)
10.         _HighlightFrequency("Frequency ", Float) = 1
11.         _HighlightStrength("Strength ", Range(0, 1)) = 1
12.  
13.         _StencilComp("Stencil Comparison", Float) = 8
14.         _Stencil("Stencil ID", Float) = 0
15.         _StencilOp("Stencil Operation", Float) = 0
16.         _StencilWriteMask("Stencil Write Mask", Float) = 255
17.         _StencilReadMask("Stencil Read Mask", Float) = 255
18.  
19.         _ColorMask("Color Mask", Float) = 15
20.  
21.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
22.  
23.     }
24.     SubShader
25.     {
26.         Tags
27.         {
28.             "RenderPipeline" = "LightweightPipeline"
29.             "Queue" = "Transparent"
30.             "IgnoreProjector" = "True"
31.             "RenderType" = "Transparent"
32.             "PreviewType" = "Plane"
33.             "CanUseSpriteAtlas" = "True"
34.         }
35.        
36.         Stencil
37.         {
38.             Ref[_Stencil]
39.             Comp[_StencilComp]
40.             Pass[_StencilOp]
41.             ReadMask[_StencilReadMask]
42.             WriteMask[_StencilWriteMask]
43.         }
44.  
45.         Cull Off
46.         Lighting Off
47.         ZWrite Off
48.         ZTest[unity_GUIZTestMode]
49.         Blend SrcAlpha OneMinusSrcAlpha
50.         ColorMask[_ColorMask]
51.            
52.         Pass
53.         {
54.             HLSLPROGRAM

 

Thank you! I followed your second route and I updated the ZTest to "ZTest[unity_GUIZTestMode]" and the Blend to "Blend SrcAlpha OneMinusSrcAlpha".

This worked for an Unlit shader in Unity 2019.3.15f1

 

Thank you, noahabannister, for the explanation!
I also used the second solution and it works correctly for an Unlit shader in Unity 2020.1.17f1.

 

Now it's much easier - just select one of Sprite options here

 

is there anything for HDRP that works?

 

You can make it work with amplify shader when using a legacy UI / Sprite shader and using a sprite input
Keep in mind the alpha channel

 

It would be good if HDRP supported Sprite Unlit, if it means that I can get my Shadergraph UI shaders to work with HDRP and Screen Space Overlay Canvas. Feel this should just work out of the Box.

 

Hi, how to keep it masked by Rect Mask 2D?

Before using custom shader:

After using custom shader:


My shader graph:


Thank you for helping!

 

I did it.
Don't use Rect Mask 2D.
Add Mask and Image to the parent gameobject > set image material using your custom material

 

Can you please describe in more detail how you did it? I repeat everything one to one, nothing works for me, the mask still does not work.

 

I think I found a solution: set the Z position of your shadergraph UI image to 1000.
The image is no longer blocked by the world, but it's still visible and works as intended

(Mics info: canvas is screen space overlay, scales with screen sizel, match width or height, 3d topdown game, unlit opaque shadergraph with alpha-clip, uses the UV to render a noise, unity version: 2022.2.1f1)

 

If you're following the solutions posted here but still running into problems it's because Unity Shader Graph does not support the creation of shaders for rendering with the canvas renderer(UI). Confirmed here by Unity.

If you're like me and desperately want this feature added then please vote on it here.

 

Why do you want to combine a shader with rect mask 2D?
Rect mask 2D is a shortcut for not making a shader
Just add a texture mask to your shader. It looks better and is likely even less expensive