Jump to content

GLSL filters: unexpected alpha glowing


Red Spark
 Share

Recommended Posts

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):

 

L2xvgKR.jpg

 

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

 

3dMwmJk.jpg

 

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;"
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...