Resolved Shader Graph UI Image Shader does not work

Unity 2021.2.3f1
Shader Graph 12.1.1

This is a simple Shader Graph shader.

Screenshot1. Universal - Material - Sprite Unlit: Alpha is wrong.



Screenshot2. Universal - Material - Unlit: Something weird texture.

 

I don't think Sprite Unlit shader is supposed to work in UI, plus I think _MainTex should not be exposed if you want to use image set in Image component.

Meanwhile I just tested how it works in my project and Unlit shader graph does not work at all in game view - there is just black square and ironically Sprite Unlit displays something, but it's broken:

 

I just updated my project from 2020 LTS to 2021.2 and have the same problem.

All my UI elements which use a shader graph material now have a black background where they should be transparent. It works fine when setting the canvas screen space to 'Camera' (so that's something you could do for now, @Seromu) but I need my canvas to be 'Overlay'.



Really hope this gets fixed otherwise I'll need to roll back to 2020 LTS.

Edit: I've submitted a bug report, I'll come back with the link once it's up on the Issue Tracker.

 

@ali_mohebali Do you mind looking into this? I've submitted a bug report but haven't heard anything back.

 

For anyone wanting to use an Overlay canvas and having the same issue, a workaround is to create a new layer and assign your UI to said layer. Then create a new 'Render Objects' Renderer Feature and set its Event to 'After Rendering'. You'll need to set the Queue to 'Transparent' and Layer Mask to your newly created layer.

The canvas Render Mode will also have to be set to 'Screen Space - Camera' but it will still be treated as an Overlay canvas.

 

[SHADER GRAPH] SHADERS FROM SHADER GRAPH DON'T WORK ON UI WITH CANVAS "RENDER MODE" SET TO "OVERLAY"

https://issuetracker.unity3d.com/is...-on-ui-with-canvas-render-mode-set-to-overlay

"BY DESIGN"...?

 

I finally got an email saying they were able to reproduce the bug and it's now up on the issue tracker. You can vote for it here: https://issuetracker.unity3d.com/product/unity/issues/guid/1383356

It might be that they'll end up saying it's "by design" again but you never know. Even so, voting for this could raise more attention and maybe they'll push this issue up on their priority list.

 

Seems so weird that we even need a vote-based issue tracker. This is quite clearly a fundamental need.

This issue has been known since before November 2021. It's February 2022. Four months. And that's just since this forum post.

So bored of basic features being ignored. Beyond frustrated.

 

I think that transparency will start working with a Sprite Unlit shader if you set the Canvas component to Render Mode Screen Space - Camera and assign the MainCamera as the Render Camrera.

I hope it helps!

 

I appreciate the attempt to help, but, Screen Space - Overlay exists for a (very good) reason.

Whilst it's great that Camera works, for as long as Overlay doesn't work this feature is not finished, and the absolute lack of communication (or progress) from the ShaderGraph team is not up to par.

 

We just upgraded from 2021.1.20f1 to 2021.2.12f1 and experienced this very issue. All UI images that use custom ShaderGraph materials, to for instance animate a shine-effect onto the image, now render black where they should be rendering transparent. Within the scene view everything looks fine, but in the Game view the issue appears.

This seems like a very annoying bug, which now seems to exist for months without any updates. The devised workaround to set the Canvas mode to "Screen Space - Camera" and put all UI elements on a layer that is referenced within a URP RenderFeature set to AfterRenderingPostProcessing DOES work for us. Although this pretty much defeats the purpose of Overlay Canvases altogether and intoduces additional overhead due to the extra RenderFeature needed.

Please don't forget to vote the issue up, so that it might get fixed soon!

I added a comment to the issue and cross-referenced this thread, in hopes anyone reviewing it might get an immediate sense for the scale of the problem, given the screenshots that appeared within this thread.

 

No replies from a Unity dev in the ShaderGraph forum since July, it's not looking good friends

 

Update: The issue has been set by Unity to "By Design", giving the following reason:

...hopefully this "coincidence" comes back a few package versions down the road.
But hey, at least there is yet another page to vote for the issue, so I guess in the meantime let's do that

 

Welp, that's disappointing.

I guess all we can do now is mark it as "Critical" on the product board then. Or use Amplify Shader Editor, they seem to support UI.

 

Hi - had a similar issue with shadergraph material not working on a UI image.
What eventually worked for me is:
- ScreenSpace Overlay
- Additional Shader Channels: TexCoord1

The "TexCoord1" Channel by itself is critical and please check it doesn't change on runtime.

On my other canvas TextMeshPro triggers the tangent and normal channels which made the material not appear. Please note that those are automatically triggered by TextMeshPro even if unselected before pressing Play.

 

@uzisho your solution did not work for me. Really disappointed in Unity with this. I can't believe it's been known about for months and the problem still exists on an LTS version...

 

Unfortunately, the only solution is setting the canvas screen space to 'Camera'.

 

This is horrendous. How is this not just a basic feature of Shader Graph? Does Unity think that no one would want to use a shader on a UI object? That seems extremely obvious to me.

 

Alright, this is my workaround.

• Create a new Camera and set the Render Type to Overlay and Projection to Orthographic
  
• Set the Culling Mask to UI
  
• Go to the base Camera and find the "Stack" option, and add the new Camera to the Stack.
• Put the UI elements with all the Shaders onto a Canvas set to Screen Space - Camera, and set the Camera to the Overlay camera

For me it's working identically to Render Mode. I'm not smart enough to know the differences between this and the Canvas Overlay mode. This is a bit ridiculous though

 

remove source image only use material,
you are displaying 2 image, one source image second one base_Texture with shader this is what's wrong.

 

So far MiguelBest's was the most stable fix. But I hope they find a workaround (despite being 3 months late) because having to create a new layer and a RendererObject every project is not very scalable. I did vote for now.

 

'Source Image: None' doesn't works for me.

Sprite Unlit


Unlit

 

Other possible workarounds...

Mask the sprite to eliminate the black areas
Check UseSpriteMesh can also remove some of the black areas

These are entirely dependent on the shape of the sprite and don't address partial transparency
In my case I have a simple solid circle

 

Did anyone get a workaround other than making two cameras and removing the canvas from overlay mode?

I "mistakenly" versioned up my unity, used much good stuff from it, and after a month of hard work I see that many of the UI shaders such as these nice clouds got all fudged up :\

And it's all good in the viewport, that's the funny part...

 

I couldn't get the above suggestions working for me, so tried something else. It's not an ideal solution, but if you're not using many UI shaders maybe it'll do.

I noticed that the generated code from the 2020 version of one of my Shadergraphs seems to behave properly in 2021. Looking at the difference in generated code between the two, it looks like 2021 introduces two extra passes - titled SceneSelectionPass and ScenePickingPass.

I copied the generated code from one of my Shadergraphs into a standard surface shader doc, deleted those two passes out, saved it, and now my UI alpha is rendering properly again. I'm yet to do a build so YMMV (though it displays fine in both Scene view and Game/Device Simulator view), but I'm tentatively hopeful it'll do the trick.

Specifically, the sections I deleted are:

Pass

        {

            Name "SceneSelectionPass"



..........



#include "Packages/com.unity.render-pipelines.universal/Editor/ShaderGraph/Includes/SelectionPickingPass.hlsl"

       

            ENDHLSL

        }

        Pass

        {

            Name "ScenePickingPass"



............



#include "Packages/com.unity.render-pipelines.universal/Editor/ShaderGraph/Includes/SelectionPickingPass.hlsl"

       

            ENDHLSL

        }

The resulting shader code only has two passes - both titled "Sprite Unlit" (one for Lightmode Universal2D and the other for Lightmode Universal Forward).

 

It is really bad that this has not been fixed.

Thank you jessmwoodward for your suggestion. It does work in a build as well. Clearly not a practical solution for many, but it's a life saver in my use case.

 

Camera stacking solves the issue - until you want to use dynamic resolution (or post processing excluding the UI...), which affects all cameras in a stack. It's all circular depending "by design" unusable systems all the way.

 

I had this issue earlier today. The way I fixed it was by replacing the Image element with a Raw Image. If you also end up getting a weird red background, just reopen the project. It can happen during Redo and Undo actions.

 

THANK YOU ! This worked for me!
I couldn't use stacking cameras because I'm using Pixel Perfect Camera component, so this solution is a lifesaver.
Just save all graph-generated shaders as regular shaders and delete the sections mentioned by jessmwoodward

 

Building on jessmwoodward's suggestion, I thought I'd post this a simple template of a HLSL shader for UI.

Code (CSharp):

1. Shader "URP/UI/PolarShader"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" {}
6.         _Alpha ("Transparency", Range (0, 1)) = 0.5
7.     }
8.     SubShader
9.     {
10.         Tags
11.         {
12.             "RenderPipeline"="UniversalPipeline"
13.             "RenderType"="Transparent"
14.             "Queue"="Geometry"
15.         }
16.  
17.         Pass
18.         {
19.             Cull Back
20.             Blend SrcAlpha OneMinusSrcAlpha
21.             ZTest LEqual
22.             ZWrite On
23.  
24.             HLSLPROGRAM
25.             #pragma vertex vert
26.             #pragma fragment frag
27.  
28.             #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
29.  
30.             // user defined variables
31.             sampler2D _MainTex;
32.             float4 _MainTex_ST;
33.             half _Alpha;
34.  
35.             // vertex input
36.             struct appdata
37.             {
38.                 float4 pos : POSITION;
39.                 half2 uv : TEXCOORD0;
40.             };
41.  
42.             // vertex output
43.             struct v2f
44.             {
45.                 float4 pos : SV_POSITION;
46.                 half2 uv : TEXCOORD0;
47.             };
48.  
49.             v2f vert (appdata v)
50.             {
51.                 v2f o;
52.                 o.pos = TransformObjectToHClip(v.pos);
53.                 o.uv = v.uv;
54.                 return o;
55.             }
56.  
57.             half4 frag (v2f i) : SV_Target
58.             {
59.                 half2 scale = half2(1, 1);
60.                 half2 position = _MainTex_ST.xy;
61.                 half2 polarScale = half2(1, 1);
62.                 half2 polarPosition = _MainTex_ST.zw;
63.  
64.                 // UVs
65.                 half2 offset = half2 (0.5, 0.5) + position;
66.                 half t = atan((offset.x - i.uv.x * scale.x) / (offset.y - i.uv.y * scale.y)) / 3.14159265359f;
67.                 half r = distance(offset, i.uv * scale);
68.  
69.                 half4 tex = tex2D(_MainTex, half2 (t, r) * polarScale + polarPosition);
70.  
71.                 return half4(tex.rgb, _Alpha);
72.             }
73.             ENDHLSL
74.         }
75.     }
76. }

 

@jessmwoodward Thank you, this is working in Unity 2021.3.16.
Unity said "Making this a reliable and supported feature will require a bit of cooperation from a few other teams," ...
I wonder how hard is it to write a script that removes those two passes automatically and how many teams are needed for that xD

 

Hello, how did you make it work? I tried copying the generated code from shadergrapg into a standard surface shader and delete those sections @jessmwoodward mentioned but it still doesnt work for me. I think i could have gotten wrong what sections need to be deleted were, can you please elaborate a little? Thank you

 

Removing those two sections did work for me as well.
For those who do not know how to do it:
1. select your `.shadergraph` asset inside Unity
2. on Inspector, click the button View Generated Shader
3. Copy the `.shader` script to your assets folder and then remove the sections described by @jessmwoodward
4. Find all the materials using the original shader and replace them with that copy

 

You guys have saved my project, an eternal thanks.

 

@jessmwoodward @sandolkakos Thanks guys ! <3

 

Unfortunately @jessmwoodward @sandolkakos your fix didn't work for me. Without this sections shader still compiles and works just the same as before but is still bugged and black in Game view.

 

I do not have experience with shader to try to help you

 

I'm so glad my fix was helpful! I'm chatting with @oskar_s separately but for anyone else who has trouble with that fix, some things you could look into (please take these with a grain of salt, I'm still pretty new to shaders and VERY happy to be corrected by someone who actually knows what they're doing!):

• What Passes are in your shader? Are there any you can get rid of? If your Shadergraph is just one graph with no subgraphs there's a good chance you can get rid of all of them after the first one. (Save a backup copy first to be safe - we tried this on Oskar_s' shader and deleted too many passes, oops!)

• Deleting any Light/Shadow stuff in the Properties section might help (I'm not sure if the way Unity does UI can use Lightmaps & ShadowMasks so may as well delete it if you're not deliberately using it).

• I've also found that when I have only one Pass, moving the Render State section from inside the Pass to just before the Pass has worked.

.......

// Render State

        Cull Off

        Lighting Off

        Blend SrcAlpha OneMinusSrcAlpha

        ZTest [unity_GUIZTestMode]

        ZWrite Off



Pass

{

Name "Default"

.......

• When all else fails: Open the Default Unity UI shader and run both it and your shader through DiffChecker. Try make your file as consistent with the Default one as possible except for your custom Properties, and the stuff between the first HLSLPROGRAM and the first ENDHLSL (which is where your custom shadergraph stuff is).

 

Thank you so much for this fix, this worked for my project as well (Unity 2021.3.14f1)! A bit tedious to do by hand though, and definitely not what the Shader Graph is all about: being easy and fun to use.

Someone at Unity should alter the shader generator script to exclude these two passes for a "UI Unlit" Shader Graph and everyone would be happy.

 

Can confirm it works.

I had an "Unlit" shadergraph (not "Sprite unlit"), set the surface type to "Transparent" and blend mode to "Alpha". I saved it and copied the generated shader code to another file.

I changed the name of the shader in that file (name is on the top line) so it's unique and easier to find (because I want to keep my original shadergraph and don't want same names)

Then I scrolled all the way down and had to delete 4 different "Pass" sections related to lighting and shadows. Saved the changes and used it for my UI material.

It now works both for overlay and world-space canvases both in-scene and in-game. Also tried building the game for PC and still worked. I tested this on Unity 2023.1.0b7.

 

Can confirm that jessmwoodward's solution of deleting these two passes from the generated shader code works.

I tested this on Unity 2021.3.21f1 LTS

Code (CSharp):

1.    
2. Pass
3. {
4.     Name "SceneSelectionPass"
5.  
6.     ........................
7.  
8.     #include "Packages/com.unity.render-pipelines.universal/Editor/ShaderGraph/Includes/SelectionPickingPass.hlsl"
9.  
10.     ENDHLSL
11. }
12.  
13. Pass
14. {
15.  
16.     Name "ScenePickingPass"
17.  
18.     ........................
19.  
20.     #include "Packages/com.unity.render-pipelines.universal/Editor/ShaderGraph/Includes/SelectionPickingPass.hlsl"
21.  
22.     ENDHLSL
23. }
24.  

 

I just run into the same problem and I digged into the frame debugger where all the passes that your guys mentioned where showing up and screwing up the sprite:



I don't want to update the generated shader code each time I change the shader graph so I suppose I'll go with an old school hand written shader. This is the base shader I am using (I'll include all the effects I need here):

Code (CSharp):

1. Shader "Unlit/UIActionButton_shader"
2. {
3.     Properties
4.     {
5.         _MainTex ("Texture", 2D) = "white" { }
6.     }
7.     SubShader
8.     {
9.         Tags { "RenderType" = "Transparent" "Queue" = "Transparent" }
10.         LOD 100
11.         Blend SrcAlpha OneMinusSrcAlpha
12.  
13.         Pass
14.         {
15.             CGPROGRAM
16.             #pragma vertex vert
17.             #pragma fragment frag
18.  
19.             #include "UnityCG.cginc"
20.  
21.             struct appdata
22.             {
23.                 float4 vertex : POSITION;
24.                 float2 uv : TEXCOORD0;
25.             };
26.  
27.             struct v2f
28.             {
29.                 float2 uv : TEXCOORD0;
30.                 float4 vertex : SV_POSITION;
31.             };
32.  
33.             sampler2D _MainTex;
34.             float4 _MainTex_ST;
35.  
36.             v2f vert(appdata v)
37.             {
38.                 v2f o;
39.                 o.vertex = UnityObjectToClipPos(v.vertex);
40.                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
41.                 return o;
42.             }
43.  
44.             fixed4 frag(v2f i) : SV_Target
45.             {
46.                 fixed4 col = tex2D(_MainTex, i.uv);
47.                 return col * col.a;
48.             }
49.             ENDCG
50.         }
51.     }
52. }
53.  

 

Is this still not fixed? I keep getting alerts for this thing.

Actually I've been using a seperate overlay camera for my ui ever since. I found that it's much better to manage than having a humongous overlay canvas hanging around your scene. But I also understand the comments that don't want to switch to that workflow.

Even so... won't Unity fix this? This still seems very basic and I'm still getting alerts and complaints. Like I said, I don't think copying the default shader and editing to fix it is a very scalable solution. I'm unfollowing this thread but please be aware of this issue, the staff who are responsible.

 

I ran into another quirk with this today, so thought I'd link here in case it's relevant to anyone else.

In short, on Android devices my custom UI shader was disappearing whenever an OnApplicationFocus(false) event occurred. Had to weed out a few more chunks of shader code to stop it from happening:

https://discussions.unity.com/t/ui-...he-application-is-sent-on-background/251770/2

I'm with sonolil - I would love it if Unity either made Sprite Unlit compatible with UI again, or made an official UI Shadergraph version. Surely UI shaders would be a pretty popular use for Shadergraph.

 

For me the texture works fine rather, does anyone know how to access the color parameter from Shadergraph?




I tried with _MainColor and _Color but it doesn't work.

 

Try vertex color

 

Thank you so much!!!

 

UI Integration with Shader Graph - Unity Platform - Rendering & Visual Effects | Product Roadmap (productboard.com)

Finally!!!

Spoiler

Beginning in 2023.2 beta 16, you can now select Canvas as a new Material Type in the Graph Inspector for HDRP, URP, and Built-In. This new Material Type creates shaders that are compatible with UGUI Canvas elements, such as Image. Using Shader Graph for UGUI Canvas elements allows users to create an infinite array of animated effects and tune the behavior and appearance of the UI while also reducing performance and memory costs.

Unity 2023.2.0a18

• Shadergraph: Enabled Shader Graph Canvas Master Node to allow users to create UI shaders for Canvas in HDRP, URP, and Built-in.
  

 

I think I ran into the same issue some here have reported.

My custom Sprite Unlit ShaderGraph was rendering transparency correctly in the scene view.

Scene View:


But in game view, transparency seemed to revert to some serialized solid colour (in my case red):


Even though I was using the "Sprite Unlit" Material in my ShaderGraph, it seems the serialized "Alpha Clipping" property of the "Unlit" Material was causing the failure.

I managed to get this working by doing the following:
1. Switch your ShaderGraph to use "Material: Unlit" in the Graph Inspector.
2. Activate "Alpha Clipping"
3. Switch back to using "Material: Sprite Unlit"
4. Save Asset

Check out this recording I made of the issue: