GLSL filters: unexpected alpha glowing

[Red Spark]

Hello there!

 

I'm writing a custom lighting shader that would take a low-frequency lightmap and apply it to sprite / image with 'hard light' algorithm.

 

Here is the relevant code:

"void main (void)","{",	// sampling sprite albedo	"vec4 albedo = texture2D (uAlbedo, vTextureCoord.xy);",	// calculating current fragment's position in lightmap space	// ................... (unrelevant code)	// sampling lightmap with calculated coords	"vec4 lightmap = texture2D (uLightmap, lightmapCoord.xy);",	// per-component 'hard light' blending of albedo with lightmap	"vec3 A = step (vec3 (0.5, 0.5, 0.5), lightmap.rgb);",	"gl_FragColor.rgb = (1.0 - A) * 2.0 * albedo.rgb * lightmap.rgb;",	"gl_FragColor.rgb += A * (1.0 - 2.0 * (1.0 - albedo.rgb) * (1.0 - lightmap.rgb));",	"gl_FragColor.a = albedo.a;","}"

The problem is that even though I deliberately set gl_FragColor.a to albedo.a at the end, I still get these strange artifacts (glowing transparent corners):

 

 

And if I completely set gl_FragColor.a to 0 for debugging purposes, I get this:

 

 

By commenting out I found that glowing corners are specifically caused inside this line:

"gl_FragColor.rgb += A * (1.0 - 2.0 * (1.0 - albedo.rgb) * (1.0 - lightmap.rgb));",

Seems like something inside PIXI WebGL rendering code makes these alphas glow. Any help would be appreciated.

[chg]

Check the alpha blending you are using ( blendFunc() ) you might be setup for premultipled alpha and outputting pixel values as if you expect postmultipled alpha (or something like that)

EDIT: probably more the "something like" case then either blending mode suggested above - as for those you'd see nothing with setting gl_FragColor.a to 0 - thus your actual blend mode is quite possibly something even funkier...

[Red Spark]

Check the alpha blending you are using ( blendFunc() ) you might be setup for premultipled alpha and outputting pixel values as if you expect postmultipled alpha (or something like that)

EDIT: probably more the "something like" case then either blending mode suggested above - as for those you'd see nothing with setting gl_FragColor.a to 0 - thus your actual blend mode is quite possibly something even funkier...

 

Thanks for suggestions. Some updates:

 

1) Setting Phaser.Image.texture.baseTexture.premultipliedAlpha = false; for this sprite makes artifacts just whiter.

 

2) Adding this line in the end of main ():

"if (albedo.a < 0.5) gl_FragColor.rgb = vec3 (0, 0, 0);",

solves this problem, but introduces black sparkle on the edge of the sphere.

 

3) As far as I can see PIXI internally uses only blendFunc (gl.ONE, gl.ONE_MINUS_SRC_ALPHA) aka normal blending. Can't imagine where the problem can be.

[Red Spark]

Ok, I solved it.

 

You just need to multiply your color by alpha back in shader after all calculations are done:

// ................// ................// multiplying final color by alpha"gl_FragColor.rgb *= albedo.a;","gl_FragColor.a = albedo.a;"

[chg]

removed