# Transparency in billboardMode rendering **URL:** \ **Category:** Bugs\ **Tags:** billboard, instances, mesh\ **Created:** [October 13, 2022, 8:10am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762 "2022-10-13T08:10:42Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 13, 2022, 8:10am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/1 "2022-10-13T08:10:43Z")
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](https://playground.babylonjs.com/#ZI9AK7#2955) At different angles, the two planes render in different order, as shown in the following figure: ![view1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/7/37bc84c9d99a52ac7b748014daf490ad4f66b93b.png) ![view2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/1/21879c12a40d24f985ecaa78f55532a30f08d6ec.png) Figure 1 is the effect I want. How to make the icon plane always render in front of the background plane ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 13, 2022, 1:56pm UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/2 "2022-10-13T13:56:09Z")
You could experiment with Rendering Groups maybe? [Transparent Rendering | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering#rendering-groups) ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 13, 2022, 2:54pm UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/3 "2022-10-13T14:54:38Z")
You can force an order with alphaIndex: [https://playground.babylonjs.com/#ZI9AK7#2960](https://playground.babylonjs.com/#ZI9AK7#2960) ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 13, 2022, 4:55pm UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/4 "2022-10-13T16:55:52Z")
> [@sebavan](#): > > You can force an order with alphaIndex 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： ![gtwee0](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/2/32b3f10e2be60b5c34d27fa1bce1ea39a1881d1c.png) ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 13, 2022, 7:45pm UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/5 "2022-10-13T19:45:56Z")
in this case renderingGroup id might help at least ordering your scene against the gui elements. But there are no magic bullet for transparency. ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 14, 2022, 1:53am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/6 "2022-10-14T01:53:32Z")
This is really a headache. Setting renderingGroup for icons will always display above other objects ![2233dds1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/5/053d7c66198616e2eb52844405c3390d60b14eb7.png) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 14, 2022, 8:14am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/7 "2022-10-14T08:14:37Z")
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. ---
**Author:** ![SamuelSousa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/samuelsousa/32/33388_2.png) [@SamuelSousa](https://forum.babylonjs.com/u/SamuelSousa)\ **Post date:** [October 14, 2022, 8:23am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/8 "2022-10-14T08:23:23Z")
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… ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 14, 2022, 8:28am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/9 "2022-10-14T08:28:30Z")
> [@Evgeni\_Popov](#): > > scene.setRenderingAutoClearDepthStencil(1, false, false, false); Thank you very much. This problem has troubled me for a long time. This method has helped me solve it 😄 > [@carolhmj](#): > > [Transparent Rendering | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering#rendering-groups) It is recommended to explain this method in this document Otherwise, you will be confused about this method ![shuoming](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/9/89be50ad926da0a4b911e52261abdf125b00b9b9.png) I think this is very necessary, because you have answered many of the same solutions, but many people do not know this method ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 14, 2022, 8:35am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/10 "2022-10-14T08:35:21Z")
See the example of alphaIndex. If the scene contains transparency of other objects, such as [https://playground.babylonjs.com/#ZI9AK7#2961](https://playground.babylonjs.com/#ZI9AK7#2961) ![23dhjs5](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/0/201b9ec8d640ba563943ff55b88c100ee897e17e.png) ![jjjfff5](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/8/6818b0fc331341caaa68dd647ae955ee08b1c7fa.png) **Wrong rendering:** ![23231](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/1/d1c891eebd1da03243048f4af8e5879a54f6dd74.png) AlphaIndex has never been able to solve the transparency problem from different perspectives in real time ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 14, 2022, 8:53am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/11 "2022-10-14T08:53:00Z")
I need a large number of icons, which are displayed according to business logic. Icons are attached to an object for dynamic creation ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 14, 2022, 10:50am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/12 "2022-10-14T10:50:56Z")
I tried, but I couldn’t completely solve the problem of transparency. The icon background plane and other icon planes may have display problems. ![324d2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/c/1cfa936cb6e6a1133538f5ea3774ba6e43488a91.png) Error display： ![微yerr35](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/d/9d72e07f1bcf153a9f0d7f059c70b197fcb70394.png) If the renderingGroupId value is high, the upper layer of objects of the same type will be displayed ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 14, 2022, 11:44am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/13 "2022-10-14T11:44:53Z")
@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? 🤔 ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 14, 2022, 4:12pm UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/14 "2022-10-14T16:12:05Z")
You can sort the meshes yourself and then assign them the right `alphaIndex` value. For eg: > **[Babylon.js Playground](https://playground.babylonjs.com/#F7KZ7C%2328)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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. ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 17, 2022, 1:47am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/15 "2022-10-17T01:47:11Z")
> [@Evgeni\_Popov](#): > > However, you must use `clone` and not `createInstance` because the `alphaIndex` property of meshes created with `createInstance` is not taken into account. If clone is used, the performance will be reduced for a large number of icons. For example, 1000 icons have only 40 frames ---
**Author:** ![SamuelSousa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/samuelsousa/32/33388_2.png) [@SamuelSousa](https://forum.babylonjs.com/u/SamuelSousa)\ **Post date:** [October 17, 2022, 8:22am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/16 "2022-10-17T08:22:18Z")
I recently rendered thousands of objects with transparencies using clones. Check this page: > **[Optimizing Your Scene | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/scene/optimize_your_scene)** > > Learn how to optimize your scene in Babylon.js. 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. ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 17, 2022, 8:41am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/17 "2022-10-17T08:41:23Z")
> [@SamuelSousa](#): > > mesh.isPickable = false; > mesh.doNotSyncBoundingInfo = true; My icon needs to click the trigger information pop-up panel, so it is not applicable. > [@SamuelSousa](#): > > mesh.freezeWorldMatrix(); 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: ![1222](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/2/c265fdfcaede3181377d6a8aedfa2ada8809dda4.png) ![dses](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/4/7466997b151e796678cd2b0dc44cfd259d112d29.png) ![tekwk](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/d/cd34d2c3a6b275b85116e85beef61a3ee7cdc512.png) And so on ---
**Author:** ![SamuelSousa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/samuelsousa/32/33388_2.png) [@SamuelSousa](https://forum.babylonjs.com/u/SamuelSousa)\ **Post date:** [October 17, 2022, 9:24am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/18 "2022-10-17T09:24:32Z")
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. ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 17, 2022, 9:49am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/19 "2022-10-17T09:49:49Z")
Thanks for reminding, but other objects have been optimized in my scene. Only the icon has encountered transparency problems ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 17, 2022, 10:27am UTC](https://forum.babylonjs.com/t/transparency-in-billboardmode-rendering/34762/20 "2022-10-17T10:27:44Z")
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: > **[Babylon.js Playground](https://playground.babylonjs.com/#F7KZ7C%2332)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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…