alpha blending for 3 cylinders

[Hanesu]

I need 3 cylinders in a geometry like the one here

https://www.babylonjs-playground.com/#FFZ9HL#1

with transparency. But once the alpha value is below 1 (change line 14 in PG) the alpha blending doesn't work properly, the cylinder on the right goes in front of the cylinder in front. I know that there are some artifacts for alpha blending, but from the initial view direction the center of the bounding sphere of the cylinder in front (which should coincide with the center of this cylinder) should be closer to the observer than the centers of the two other cylinders. Am I missing something?

In general, I figured out that for this specific problem the depth test and alpha blending should work perfect if I divide each cylinder in half and place the center of the bounding sphere at the middle of the end cap for each of the 6 half cylinders. But how can I do this?

[GameMonetize]

Hello if you use clone instead of createInstance, it should work:

https://www.babylonjs-playground.com/#FFZ9HL#2

instances are not ordered as they are rendered in one pass by the gpu

[Hanesu]

Oh, thank you, it's good to know that instances are not depth tested.

To remove the remaining artifacts which are caused by the nontrivial geometry of the three cylinders, I split up each cylinder into two, like here

https://www.babylonjs-playground.com/#FFZ9HL#3

Is it possible to move the center of the bounding sphere of each half cylinder to the outer cap? Then all the overlap problems at the three touch points should be gone.

[GameMonetize]

Unfortunately the bounding info are automatically computed based on geometry