Instances with alpha and render order

sub-question from this topic deserves own topic (link):

I have a static camera, with lots of planar meshes with alpha textures facing the camera. I want to make them into instances, but alphaIndex and z values have no effect on render order anymore.

First of all, I don’t understand why this doesn’t work.
Second, I would like to find a workaround as performance without instances is severely lacking.
It was suggested that the Particle system might be a work around, but that seems at first glance a huge leap.
Are there any other suggestions? Is the Particle system not as crazy as it seems to me and why?

Please ask if you need clarification from my part, I will try to respond quickly.

Thank you so much!

Mise

Instances are fast because they are done with one single draw calls. The caveat is that instances cannot have any difference with the source. Only position, rotation and scaling can change.

So changing anything else will have no effect on instances.

To help you evaluate options, it could be great to provide a repro in the playground of what you already have.

Maybe particules can be the solution or solid particles. But we need to see it live to see where is the bottleneck

to have something to show right away: http://178.62.240.107/ (I suggest the Campaign if you want to try it.)
Fonts are OpacityTextures (still looking to improve the looks on those)
Images are diffuseTexture with useOpactityTexture

let me know what you would need from a Playground example, or a bit of code. The lines of code where I interact with Babylon are very limited.

1 Like

So first this is ubber cool :smiley: I love it
But yeah I need a simpler repro in the playground please

this game is super fun

good to hear haha, did you two play the tutorial?

I will make that repo tomorrow.

I’m not in a hurry, so take your time.

note: only code in the the top function is different in each case.
case1, no instances, this is what I have on my website now: Babylon.js Playground (I do use mesh cloning)

case2, instances, now the draw order is not flexible: <same link with #1 in the end>
I would expect at least the top text to be in front of all images, but I understand all images have the same alphaIndex.

case3, instances without alpha: <same link with #2 in the end>
This does work, and this is where I am confused as well, because this suggests that the draw order IS dictated by z values, which is actually all that I need, also in the alpha case.

Because alpha seems to be much less complex in a semi2D environment, I feel like there could be a simple solution to this.
As I mentioned before, I’m not so familiar with WebGL, but very interesting!

edit: after this I also want to instance the text meshes.

So when there is no alpha we turn on depth buffering so there is no need for sorting anymore. This is why #2 is working

For #1, you can use a diffuse texture with alpha which (instead of an opacity texture) will do alpha testing and not blending allowing us to not need to sort faces: https://playground.babylonjs.com/#JYL0LX#3

Hm, without alpha blending the fonts are too pixelated for my liking (in the playground as well).
Also I’m using alpha in more places and it would be a big challenge to never use them (the energy icons in the top left corner of the SHOP cards are now instances, and they of course still pop over all other layers.)

Can you, or anyone else, help me explore other options?

I am probably approaching this too much from a 2D perspective, so it could be that an entirely different approach would be better. But that would again outscope this post too much :slight_smile:
(my bigger scope priorities are looks and performance, getting as many instances in there is my first step towards the latter.)

top - no instances
bottom - instances + diffuse text

If you are open to new ideas, why not try using GUI for your 2d labels?
https://doc.babylonjs.com/how_to/gui

I haven’t looked into it too much. Mostly because I feel like it will be less flexible. For instance these cards should be real 3D objects, as they move around and rotate on 3 axes. I also want them to be able to explode into pieces, possibly have lightning applied.

I have limited knowledge of how similar games solve this. I mostly just make everything myself, which had the bonus of being able to try different engines pretty quickly.

Font rendering and performance have definitely been the biggest issue so far, so I might see if GUI can help me there.

That said, the particle plugin idea is starting to sound less crazy :slight_smile:. I would be happy with any help on that, but I really really don’t want to keep you busy, I will figure it out eventually.

your solution works to be honest. Just don’t use instances but clones. This is less efficient but more flexible. So it could be a ok trade off :slight_smile:

i did not play the tutorial, just kinda figured it out.

1 Like