Alpha Channel is showing up correctly in editor, but as dark red in game mode

Graphics Shaders & Materials
,
1

Hello! I’m trying to make a shader in shader graph that will allow me to “pixel dissolve” a UI element (an Image) based on a parameter I control with a script. Below is my implementation, which I believe should work. Note that the blending mode is set to alpha.

It shows up correctly in the editor view.


However, in the game preview and when I test the game, it shows up instead as dark red.

I feel I am missing something here. Is there an additional step required for elements on a canvas?

2

I have the same problem. Did you get it fixed?

3

For whatever reason, if you set the blending mode to premultiply, it works. However, I don’t understand why.

EDIT: No wait, now the white doesn’t fade out? I can make this work since all my images are 1-bit black and white, but it isn’t a general solution.

4

Shader graph does not support UI right now.

5

I’ve noticed the same thing after importing my project in Unity version 2021.3.5.

To be precise, when a CanvasGroup’s alpha value is set below zero, any unlit sprite shaders show transparency incorrectly as opaque. I am unsure where the color of the opaque pixels is derived from, mine are dark red or stark white-blue for some reason. The shaders in question are all either animated noises with transparency, or noises in combination with smoothsteps, without any alpha applied to the shaders themselves.

Any word on a fix? This kinda sucks for my project as a lot of UI elements are animating in and out using CanvasGroup alpha values. I can still work on it but this isn’t suitable for production.

6

Shader Graph worked fine for me for UI (at least on PC), but I’ve used regular Unlit shaders instead of Unlit Sprite. Keep in mind thought that in this case you should manually add vertex color to the shader (multiply it with color and alpha) for it to work as expected.

7

Thanks for the hint! Can you show how to achive this?
I’m trying but probably missing something…
I want to achive this dissolving effect, but since I can’t figure out how to handle it with a TextMeshPro, I dissolve an image that is above the text and has the same texture as the background (the paper scroll). So I made some shaders with Shader Graph.
Here when Unlit Sprite Shader is used:
8964249--1231782--upload_2023-4-21_10-41-15.png
As @hossboyz said, alpha gets filled with dark red, but the editor view looks fine.
So I switched to Unlit Shader but the image is not rendered at all, while the editor view still looks as intended:
(You can see the Unlit Shader, is a very basic one)
8964249--1231785--upload_2023-4-21_10-44-5.jpg

Can someone help me?

8

Same issue here

9

Hi, switching the canvas render mode to “Screen Space - Camera”, solved the issue for me

10

Sismach, thank you for suggetion. It worked forme. After changing the screen space of canvas, change plane distance to showing up the UI

11

Stumbled upon this issue tonight, and figured I might as well help people encountering the same issue in the future.

It’s as easy as turning “Alpha Clipping” on, though I gotta admit I stumbled upon it while I was just kind of playing with the editor lol

image
image337×759 33.7 KB

12

That’s cool Ariastroke!!

13

It’s probably irrelevant to the discussion, but for me the fix was the most stupid thing ever. I’d share that with you just for giggles.

I had the video with alpha channel etc but for some reason areas with 0 alpha were showing white. I figured it has to do something with incorrect encoding as I was getting errors about that. I went as far as switching my project to URP and making shader graph that gets 2 inputs (alpha and texture) - still nothing. I checked everything in different videos and this thread to no avail. And then I noticed something.

Turns out because I had placeholder where now is animation, they share canvas panel and I turn them both on with panel, the raw image was rendering WHITE BEHIND THE ANIMATION. And as it’s blocking entire scene in editor I made it invisible there. Moved it and wow! Everything is fixed. I honestly burst out laughing over the fact that I spent 3 hours trying to fix that and the fix was the most surface level. But I guess it’s experience (it’s actually my first project), I got some with making and managing shaders.

14

I found an insanely helpful video from this comment on Reddit which completely fixed this problem while still allowing me to use my transparent Shader Graph with a Screen Space Overlay Camera:

In case the video goes away at some point, I’ll briefly summarize the steps:

  1. Right click in Project → Create → Shader → (any Shader, it doesn’t matter since we’ll be writing over it).
  2. Click your Shader Graph asset then click “View Generated Shader”.
  3. Copy all of the code then paste it into the Shader you created in step 1.
  4. Search for all of the Pass sections in the shader (you can use this regex: \s\sPass[.\n\r\t\S\s]+?\{ )
  5. Delete all of the Passes after the first one.
  6. In the first Pass, delete this “Tags” block just below the “Name”:
Tags
{
    "LightMode" = "Universal2D"
}
  1. Go back to the Project view, right click your new Shader and click “Refresh”.

That’s it! It should work now. Huge shout-out to the guy who figured this out.

15

In my case it helped to change the material.

— Fix —
Shader graph → Graph Inspector → Graph Settings → Universal → Material

Changed the Material from “Sprite Unlit” to “Canvas”.

— Context —

I’m using the shader for a GUI Image, to render the image as monochrome, using the node “Saturation” on the colors of a “Sample Texture 2D” node.

— other Solutions —
The answer from @Ariastroke reduced the dark red color, but not completely. Especially if you have a CanvasGroup somewhere in a parent and reduce its Alpha, then the red color returns.

My Shader Graph:

Screenshot
Screenshot2349×1174 137 KB

16

Thanks! that fixed it for me.

Shader Graph Settings → Changed the Material from “Sprite Unlit” to “Canvas”.