Use two planes, one as the background image and the other as the icon, to offset the z-axis coordinate of the icon by 0.01, and then use instance to clone the object, so as to apply to a large number of objects.
Examples are as follows：
https://playground.babylonjs.com/#ZI9AK7#2955
At different angles, the two planes render in different order, as shown in the following figure:
Figure 1 is the effect I want. How to make the icon plane always render in front of the background plane
You could experiment with Rendering Groups maybe? Transparent Rendering | Babylon.js Documentation (babylonjs.com)
You can force an order with alphaIndex: https://playground.babylonjs.com/#ZI9AK7#2960
AlphaIndex can really solve the icon problem, but there are other objects in my project, which will affect the rendering of other objects.
such as：
in this case renderingGroup id might help at least ordering your scene against the gui elements.
But there are no magic bullet for transparency.
This is really a headache. Setting renderingGroup for icons will always display above other objects
Have you called scene.setRenderingAutoClearDepthStencil(1, false, false, false); (if the rendering group of the icons is 1)?
If not, the icons won’t be properly culled by the existing geometry as the depth buffer will be cleared before objects with renderingGroupdId=1 are rendered.
In my experience when using alpha it’s best not work with instances ou thin instances.
Original or Clones will work better. mesh.createInstance(“NAME”) will create an object with depth index or alpha index equal to its parent for what I understand.
On a side note:
You can add the icon image to a 3D model billboard in Alpha Test or Alpha Blend & Test (which suits better here) directly through Blender and Babylon export…
Thank you very much. This problem has troubled me for a long time. This method has helped me solve it 
It is recommended to explain this method in this document
Otherwise, you will be confused about this method
I think this is very necessary, because you have answered many of the same solutions, but many people do not know this method
See the example of alphaIndex. If the scene contains transparency of other objects, such as
https://playground.babylonjs.com/#ZI9AK7#2961
Wrong rendering:
AlphaIndex has never been able to solve the transparency problem from different perspectives in real time
I need a large number of icons, which are displayed according to business logic. Icons are attached to an object for dynamic creation
I tried, but I couldn’t completely solve the problem of transparency. The icon background plane and other icon planes may have display problems.
Error display：
If the renderingGroupId value is high, the upper layer of objects of the same type will be displayed
@PirateJC I think we might need some kind of “How to transparency” docs as this is a pretty common subject of questions. What do you think? 
You can sort the meshes yourself and then assign them the right alphaIndex value.
For eg:
However, you must use clone and not createInstance because the alphaIndex property of meshes created with createInstance is not taken into account.
If you want to handle other transparent meshes, you must add them in the transparentMeshes array.
Doing it this way should be tractable if you don’t have thousand of transparent meshes to handle per frame.
If clone is used, the performance will be reduced for a large number of icons. For example, 1000 icons have only 40 frames
I recently rendered thousands of objects with transparencies using clones.
Check this page:
Some of these might your friend, aswell:
mesh.alwaysSelectAsActiveMesh = false;
mesh.isPickable = false;
mesh.doNotSyncBoundingInfo = true;
mesh.freezeWorldMatrix();
camera.maxZ = someValueHere;
@carolhmj The “How to Transparency” is a good suggestion.
My icon needs to click the trigger information pop-up panel, so it is not applicable.
And it is always facing the camera, so it is not applicable.
So I can only think of using instance to optimize icons.
There are many similar icons in my scene:
And so on
I meant those as example…
You can/should try applying those concepts to other objects in your scene.
If you haven’t done so, might help a lot.
Thanks for reminding, but other objects have been optimized in my scene. Only the icon has encountered transparency problems
To be able to use createInstance, one solution is to render the icon as a single mesh and use
BABYLON.Mesh.INSTANCEDMESH_SORT_TRANSPARENT = true; to fix the sorting problem.
Here’s a PG that is doing that, with the help of a plugin material that handles the rendering of the icon with the back+front textures:
Note however that this will fix the problem with the ordering between the icons but not between the icons and other objects that would be transparent in the scene…
