Blending mode / alpha issues

Questions
1

In my quest to replace things with “real” sprite instance meshes, I am having a bunch of issues with blending mode / rendering quality. Basically, because I am having to convert things that worked fine using standard material, but I’ve started having issues when using shader material (1 big one being some meshes that are alpha blended cutting out areas from the meshes below them). But before I get into those I have 3 maybe simple related questions.

  1. Why is needAlphaTesting not working on this playground? https://www.babylonjs-playground.com/#TH2SV8#1
  2. How come, when I pass in a png texture with alpha transparency, gl_FragColor just ignores the alpha transparency value (well, without blend mode). Is there some gl setting to make it just do that by default or something (or is it a result of sampling of the texture going into the shader)?
  3. How come, if in the playground above you set sample_color.a to 0.0, the whole texture turns white?
2

I guess I should post my actual issue as well in case anything pops out to anyone as obvious, much easier to look at a screenshot

43

3 meshes here, the wrapper, the red triangle, the number. Each of their positions.z at least -0.01 above the one behind it. You can see how the red triangle is cutting out the background of it’s parent wrapper now. – Also the card wrapper, and the red triangle, are now sharing the same source mesh, the numbers are also a sprite like mesh, but a separate one. I’ve started using useSeparateDepthPrePass on all of the spritemesh shaders which has fixed some issues, but not this one. Also tried alphaIndex, seems to do nothing (is that a sourceMesh only property?)

3
  1. Because alpha testing has to be done by the shader by calling discard in the fragment shader when alpha is below your threshold: https://www.babylonjs-playground.com/#TH2SV8#2
  2. The do alpha blending you have to use needAlphaBlending when declaring your shaderMaterial (instead of needAlphaTesting)
  3. see #1 and #2 :slight_smile:
1 Like
4

Thanks @Deltakosh . I guess I’m wondering, what does needAlphaTesting actually do though, because I can call discard in the shader and it works just the same as without it?

I normally use discard but in this case I am using it on scaled down meshes and it destroys the quality i.e.

and
https://www.babylonjs-playground.com/#TH2SV8#4

But if I use alpha blending it looks decent enough, but then I start running into the blending issues.
https://www.babylonjs-playground.com/#TH2SV8#5

Actually on second thought, I don’t know if I tried alpha blending + discard after fixing some basis mip map issues which may have been also affecting quality, or whether discard could fix some of the overlap issues, but I’ll try that tomorrow, thanks

1 Like
5

It is a hint for the engine that meshes using this material must be rendered after Palin objects to optimize early depth buffer rejection

And a combination of discard+blending is totally fine

1 Like