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.

1 Like

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:
7683259--960529--upload_2021-11-24_12-2-10.png

1 Like

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.

3 Likes

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

1 Like

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.

8 Likes

[SHADER GRAPH] SHADERS FROM SHADER GRAPH DON’T WORK ON UI WITH CANVAS “RENDER MODE” SET TO “OVERLAY”

“BY DESIGN”…?

2 Likes

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: Unity Issue Tracker - [ShaderGraph] Alpha is shown as black when using a custom Shader Graph material on an Image component

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.

2 Likes

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.

4 Likes

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!

7914250--1009525--upload_2022-2-21_15-49-5.png

3 Likes

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.

5 Likes

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.

1 Like

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

2 Likes

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

2 Likes

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.

1 Like

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.

2 Likes

@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…

1 Like

Unfortunately, the only solution is setting the canvas screen space to ‘Camera’. :frowning:

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

3 Likes

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.