Behaviour of alpha in fragment shaders

[yloquen]

I made a playground example to illustrate my issue.

When setting the output values of the fragment, the alpha seems to be ignored when I use a constant value instead of the sampled one.

If you uncomment the last line of the shader you will see my issue - how can I avoid showing the colour where alpha is zero ?

[ivan.popelyshev]

because its premultiplied in most cases in pixi. Its not (R,G,B,A), its (Ra, Ga, Ba, a)

[yloquen]

16 minutes ago, ivan.popelyshev said:

because its premultiplied in most cases in pixi. Its not (R,G,B,A), its (Ra, Ga, Ba, a)

Is there a way to avoid this ?

[ivan.popelyshev]

You can specify "texture.baseTexture.pmaMode = PIXI.PMA_MODES.NPM;" and get not-premultiplied texture data in "texture2D".

However its possible only with Mesh-shaders and not filters. All results of rendering in the middle are in PMA.

Btw, if you want to just tint everything the same color, you can use pixi-heaven double-tint stuff.

Better to learn how to do your stuff with PMA  Also, you can just use tricks like in https://github.com/pixijs/pixi-picture/blob/master/src/ShaderParts.ts#L8 (its my NPM filter blending)

Edited October 22, 2020 by ivan.popelyshev

[yloquen]

8 hours ago, ivan.popelyshev said:

You can specify "texture.baseTexture.pmaMode = PIXI.PMA_MODES.NPM;" and get not-premultiplied texture data in "texture2D".

However its possible only with Mesh-shaders and not filters. All results of rendering in the middle are in PMA.

Btw, if you want to just tint everything the same color, you can use pixi-heaven double-tint stuff.

Better to learn how to do your stuff with PMA  Also, you can just use tricks like in https://github.com/pixijs/pixi-picture/blob/master/src/ShaderParts.ts#L8 (its my NPM filter blending)

Ok, thanks. I can almost get what I want with PMA. It's just the blending on the edges that's a bit off. I'm using a texture as a mask for the filter.

Btw, I get the same thing when experimenting on Shadertoy, so I'm guessing it's the way WebGL works.

[ivan.popelyshev]

> It's just the blending on the edges that's a bit off.

> I'm using a texture as a mask for the filter.

give me more info, i'm proficient with those kind of issues. I can help with it in weekend if you give me full demo

[yloquen]

4 hours ago, ivan.popelyshev said:

> It's just the blending on the edges that's a bit off.

> I'm using a texture as a mask for the filter.

give me more info, i'm proficient with those kind of issues. I can help with it in weekend if you give me full demo

I've updated the playground example with my exact shader. The undesired effect that happens is the black border on the edges - I think it's not PMA issue, because I changed the texture to have alpha 1.0 for all pixels and I use the other channels. Looks more like a blending issue and I tried playing with the blend mode of the sprite, but that does not seem to affect it.

[ivan.popelyshev]

I'm sorry, I dont understand what are you trying to do in this shader  Can you elaborate please?

vec4(c,c,c,1.0) even if you dont multiply it by red color of texture gives you black on edges, of course. What exactly do you want to do with it?

[yloquen]

33 minutes ago, ivan.popelyshev said:

I'm sorry, I dont understand what are you trying to do in this shader  Can you elaborate please?

vec4(c,c,c,1.0) even if you dont multiply it by red color of texture gives you black on edges, of course. What exactly do you want to do with it?

I want the colour to be the same everywhere, the problem is that if I do :

gl_FragColor = vec4(1.0, 1.0, 1.0, a);

I expect to have transparency where the texture is black, but I don't.

[ivan.popelyshev]

Does that work for you? If not, please describe how should it look

vec4 fc = vec4(c, c, c, c);

Edited October 24, 2020 by ivan.popelyshev

[ivan.popelyshev]

How masking is done , regularly: 

vec4 color = texture2D(...)
float mask = ...
gl_FragColor = mask * color;

 

[yloquen]

 

3 hours ago, ivan.popelyshev said:

Does that work for you? If not, please describe how should it look

vec4 fc = vec4(c, c, c, c);

Yes, this looks the way I want it to, for white, only I can't seem to make it work this way for different colours.

I tried :

            fc *= vec4(.2, .6, .1, 1.0);

This gives black borders.

            fc *= vec4(.1, .5, .1, 0.5);

No black borders, but the colors are a lot brighter.

Btw, I understand it's not a pixi issue, I get exactly the same on Shadertoy. If I might summarize my question it would be :

Why fragColor = vec4(1.0, 1.0, 1.0, 0.0) outputs white? I think that's the crux of the issue.

Edited October 24, 2020 by yloquen

[ivan.popelyshev]

because it should be premultiplied alpha . http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/ Blending function assumes that you already multiplied colors by alpha, so it doesnt multiply it, just adds your result.

[yloquen]

2 hours ago, ivan.popelyshev said:

because it should be premultiplied alpha . http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/ Blending function assumes that you already multiplied colors by alpha, so it doesnt multiply it, just adds your result.

Ok, thanks for the help. I found the mistake I was making.

I wasn't clamping the value of "c" so it could be more than 1 and the result of that was that the correct colors look like shadow next to the bright values resulting from the areas with initial value larger than 1.

Here's what I was after. You can comment this:

c = clamp(c, 0.0, 1.0);

to see the difference.

Edited October 24, 2020 by yloquen
Edit : Wrong link