Instance effect on alpha render order?

Questions
1

Hi,

I’m working on a game which I will introduce soon most likely. For now I have a quick Q that I will follow up on if the answer is not obvious:

I have 2 planes facing the camera with textures:
(1) an icon. (diffuse texture with hasAlpha=true and useAlphaFromDiffuseTexture=true)
(2) text. (opacity texture).
Both have distance from camera values and alphaIndex values set such that (2) is in front, which is good.

Now I switched from having no instances to having (1) being an instance and now (2) is in the back. (When i set hasAlpha=false on (1) it looks good.)

I at least think I understand the docs on rendering order, but it is not hard to imagine that I’m not.
I could not find anything on instances affecting this, but it is the only thing I changed.

So what could be the problem here?

Thanks for this awesome project and forum!

Mise

Z ordering on instances with an alpha
2

Can you create a playground showing this? That will make it a lot easier to help.

3

Unfortunately, transparent instances don’t get depth sorted.

There should really be a note about that on this page:

https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered

1 Like
Instances with alpha and render order
Mesh instances with opacityTexture wrong render order
4

Then maybe, in this case, you could consider using the SPS that allows particle depth sorting… if this tool still fits your need.
https://doc.babylonjs.com/how_to/solid_particle_system#transparency-concerns

2 Likes
5

That is very useful info indeed, adam!

I’m having a hard time understanding why rendering order is so complicated, especially from my point of view where I have a 2Dish game with a static camera and no real need for back-faces, so to me it’s very obvious what the render order should be (that’s why I set alphaIndex === z/distance to camera). Z values are not static btw.

What is the reason that instances behave different here?

Is there a way to simplify things drastically in my case? Or is there a reason rendering order should be ambiguous still in this case?

There is a lot I don’t know about WebGL etc, so don’t be afraid to answer :).

I would also love to make a more general post about how to increase my performance, but first I want to do my due diligence and get the obvious upgrade to instances working.