Strange behavior when using a opacityTexture

Questions
1

I have a strange behavior when I take an opaticy texture and 2 objects overlap.

I made an example where you can see that the overlapping of the surfaces is strange and it seems that the z-order is wrong.

Can someone help me with this?

1 Like
2

I also wondered what’s the behaviour is this. I’ve just seen the same behaviour in the BJS documentation, looks the same behaviour with transparent objects that looks like different alpha levels when you rotate a camera? https://playground.babylonjs.com/#1PHYB0#81

3

Try adding:

scene.useOrderIndependentTransparency = true;

4

Hi that looks better,but then the edges of all objects are very “jagged”, mean it looks like the antialising does not work correctly now :wink:

5

Try to play with different values:

    box.alphaIndex = 1
    box2.alphaIndex = 2
1 Like
6

For me it doesn’t even run… Strange

UPD: Well, it has no error in the console but I don’t see any objects after adding this string.
Android 13. Chrome browser.

7

For me it fixes the problem. It works great for regular objects bun looks it doesn’t work for instances as it was pointed here: How does needDepthPrePass work? Is it possible to pass my own render order values for instances? - #12 by Evgeni_Popov

8

Transparency is hard, see Babylon.js docs.

Yes, MSAA can’t be used when useOrderIndependentTransparency is true. You can use a FXAA post process to apply some anti-aliasing in this case.

1 Like