Negative ui image shader

Hello
I have an UI image that look like this

I’m using the standard UI image shader as a base and this is what my frag function looks like :

fixed4 frag(v2f IN) : SV_Target{
    half4 color = tex2D(_MainTex, IN.texcoord);
    return color;
}

What I want to do is make the black part transparent and the inverse of what’s behind it on the white part using the blend factors.
The closest I found was Blend OneMinusDstColor Zero but the black part isn’t transparent. I also tried with a transparent texture but couldn’t make it work.

bump

Try this:

Blend One SrcAlpha

half effect = color.g;
return half4(effect, effect, effect, 1.0 - 2.0 * effect);

If the image is black, 0.0, the output is (0, 0, 0, 1), which means no change.

If the image is white, 1.0, the output is (1, 1, 1, -1), which mean 1 minus the original color.

As long as clamping to the 0 to 1 range is no problem, this should work fine. (So it might need a HDR target.)

I made a configurable ui shader that should help you with the task without the need of writing a new shader for that one specific purpose: https://github.com/supyrb/ConfigurableShaders/blob/master/Assets/Shaders/ConfigurableUi.shader
Just set the blend modes to SrcColor and OneMinusSrcColor:

Then black will become transparent and white will stay visible.

Thanks a lot!!