Instance effect on alpha render order?


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!


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

Unfortunately, transparent instances don’t get depth sorted.

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

1 Like

Then maybe, in this case, you could consider using the SPS that allows particle depth sorting… if this tool still fits your need.


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.