# Different transparency for mesh instances **URL:** \ **Category:** Questions\ **Tags:** material, instances\ **Created:** [May 12, 2022, 6:27pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331 "2022-05-12T18:27:48Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Anton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anton/32/4310_2.png) [@Anton](https://forum.babylonjs.com/u/Anton)\ **Post date:** [May 12, 2022, 6:27pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/1 "2022-05-12T18:27:48Z")
Good time of day, everyone, There doesn’t seem to be a way to do this, but I will ask anyway. 🙂 I have a few instances of the same mesh. The documentation [here](https://doc.babylonjs.com/divingDeeper/mesh/copies/instances#custom-buffers) says “You also have the opportunity to specify per instance values for any attribute”. I can set different colors for each instance using instancedBuffers (via VertexBuffer.ColorKind kind): [https://playground.babylonjs.com/#8L50Q3#1](https://playground.babylonjs.com/#8L50Q3#1) Is there a way to set transparency (alpha) for each instance separately? The use case would be - I want to only keep a few instanced meshes opaque and set alpha for the rest to, say, 0.5. Thank you, Anton. ---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [May 12, 2022, 7:11pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/2 "2022-05-12T19:11:29Z")
Heya, for example here each instance has a different random alpha value (line 17), but also hasVertexAlpha must be set to true. (line 8). 🙂 > **[Babylon.js Playground](https://playground.babylonjs.com/#8L50Q3%2395)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Anton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anton/32/4310_2.png) [@Anton](https://forum.babylonjs.com/u/Anton)\ **Post date:** [May 13, 2022, 2:02pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/3 "2022-05-13T14:02:19Z")
Well that was easy 🙂 Thank you! ---
**Author:** ![Anton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anton/32/4310_2.png) [@Anton](https://forum.babylonjs.com/u/Anton)\ **Post date:** [May 16, 2022, 2:56pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/4 "2022-05-16T14:56:21Z")
Actually sorry, I was too quick to declare a victory… It looks like when hasVertexAlpha is set to true (line 8) even a maximum alpha of 1.0 (line 17) still causes some back-to-front rendering order issues: [https://playground.babylonjs.com/#8L50Q3#96](https://playground.babylonjs.com/#8L50Q3#96) Just rotate the scene and you will see what I mean - the boxes that should be in front are sometimes overlapped by the boxes that should be in the back. Has this only been fixed in [5.0.0](https://github.com/BabylonJS/Babylon.js/releases/tag/5.0.0) by this major update: “Added support for Order Independent Transparency on simple scenes. `scene.useOrderIndependentTransparency = true` now makes transparent meshes shade correctly when stacked onto each other. ([CraigFeldspar](https://github.com/CraigFeldspar))” If I set this to true on the scene (line 3) the rendering order seems to get fixed, but the scene seems to become more aliased (and slower performing): [https://playground.babylonjs.com/#8L50Q3#97](https://playground.babylonjs.com/#8L50Q3#97) ---
**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:** [May 16, 2022, 3:42pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/6 "2022-05-16T15:42:10Z")
@CraigFeldspar can comment on this, but OIT is far from being free, this is actually pretty expensive. ---
**Author:** ![CraigFeldspar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/craigfeldspar/32/45631_2.png) [@CraigFeldspar](https://forum.babylonjs.com/u/CraigFeldspar)\ **Post date:** [May 16, 2022, 3:46pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/7 "2022-05-16T15:46:35Z")
It is indeed, you actually render each transparent mesh roughly 5 times more. In a situation where you have lots of different meshes/materials it can get your CPU really strugling ---
**Author:** ![Anton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anton/32/4310_2.png) [@Anton](https://forum.babylonjs.com/u/Anton)\ **Post date:** [May 16, 2022, 3:54pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/8 "2022-05-16T15:54:57Z")
Thanks. So am I right to think that the only way to fix the back-to-front render order issues in this playground (instances with hasVertexAlpha = true and alpha = 1.0) is to set `scene.useOrderIndependentTransparency = true`? [https://playground.babylonjs.com/#8L50Q3#96](https://playground.babylonjs.com/#8L50Q3#96) Or there is another approach that will work / be less costly? ---
**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:** [May 16, 2022, 4:14pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/9 "2022-05-16T16:14:16Z")
You could have two meshes, one to build the opaque instances from and the other one to build the transparent instances. ---
**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:** [May 16, 2022, 4:16pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/10 "2022-05-16T16:16:05Z")
Note that since 5.0 you now have the `Mesh.INSTANCEDMESH_SORT_TRANSPARENT` flag to instruct the engine to sort the transparent instances from back to front. ---
**Author:** ![Anton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anton/32/4310_2.png) [@Anton](https://forum.babylonjs.com/u/Anton)\ **Post date:** [May 16, 2022, 4:38pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/11 "2022-05-16T16:38:26Z")
> [@Evgeni\_Popov](#): > > `Mesh.INSTANCEDMESH_SORT_TRANSPARENT` I tried to do it in this playground (line 2), but now getting a “disco ball” effect in the scene 🙂 : [https://playground.babylonjs.com/#8L50Q3#100](https://playground.babylonjs.com/#8L50Q3#100) Something else is wrong? ---
**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:** [May 16, 2022, 6:05pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/12 "2022-05-16T18:05:04Z")
You can’t use `setVerticesBuffer` to set the color buffer because doing it that way bypasses the operations that the renderer is doing to get the right instance data (here color) for each instance. You must use `registerInstancedBuffer` instead: > **[Babylon.js Playground](https://playground.babylonjs.com/#8L50Q3%23101)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Note that you will see some artefacts when rotating the camera because the sorting is done using the center of each mesh. ---
**Author:** ![Anton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anton/32/4310_2.png) [@Anton](https://forum.babylonjs.com/u/Anton)\ **Post date:** [May 16, 2022, 6:12pm UTC](https://forum.babylonjs.com/t/different-transparency-for-mesh-instances/30331/13 "2022-05-16T18:12:37Z")
Ok thank you, I think this gives me what I need now - scene with instances of the same mesh, some transparent and some opaque and no rendering order issues: [https://playground.babylonjs.com/#8L50Q3#102](https://playground.babylonjs.com/#8L50Q3#102) I think the fact that sorting is done using mesh centers is not going to be an issue. The bottom line is - we are on Babylon 4.2.0 now, so to do the above we have to migrate up to 5.0.0 at least.