# A mesh with opacity texture is always on the top of the particles

**URL:** <https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737>\
**Category:** Questions\
**Tags:** particles, material\
**Created:** [May 11, 2020, 10:41am UTC](https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737 "2020-05-11T10:41:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arek3D](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@Arek3D](https://forum.babylonjs.com/u/Arek3D)\
**Post date:** [May 11, 2020, 10:41am UTC](https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737/1 "2020-05-11T10:41:17Z")

</div>

Hello,

I have a problem with particle system and mesh with simple standard material and opacity texture.  
The particles are always on the bottom of the mesh. In my project this effect appears only when I change the diffuseTexture of this material, but on playground particles are always on the bottom.  
Do you know the solution for that? I tried many different solutions and nothing is good enough. E.g. hasAlpha parameter makes the edges not good enough, there are black pixels etc.

Here is the playground:  
[https://playground.babylonjs.com/#65MUMZ#38](https://playground.babylonjs.com/#65MUMZ#38)

---

<div class="post-metadata">

**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 11, 2020, 10:57am UTC](https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737/2 "2020-05-11T10:57:09Z")

</div>

That’s because transparent meshes (if you set the opacity texture your mesh will be considered as transparent) are drawn last, even after the particle systems.

Use the `renderingGroupId` property to make the particle system displayed after your transparent meshes:

[https://playground.babylonjs.com/#65MUMZ#39](https://playground.babylonjs.com/#65MUMZ#39)

---

<div class="post-metadata">

**Author:** ![Arek3D](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@Arek3D](https://forum.babylonjs.com/u/Arek3D)\
**Post date:** [May 11, 2020, 11:41am UTC](https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737/3 "2020-05-11T11:41:31Z")

</div>

Perfect! Thank you for your answer and explanation.  
Btw, is it possible to display particles on the top of BABYLON.GUI elements?

---

<div class="post-metadata">

**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 11, 2020, 11:56am UTC](https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737/4 "2020-05-11T11:56:32Z")

</div>

You can use the `layerMask` property to achieve what you want:

[https://playground.babylonjs.com/#85ZXZ4](https://playground.babylonjs.com/#85ZXZ4)

Camera 1 is using layerMask = 1 for the sphere, ground and the GUI layer.  
Camera 2 is using layerMask = 2 for the particle system.

As Camera 1 is handled before Camera 2, you will get the particle system on top of the sphere+ground+GUI.

---

<div class="post-metadata">

**Author:** ![Arek3D](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@Arek3D](https://forum.babylonjs.com/u/Arek3D)\
**Post date:** [May 11, 2020, 12:01pm UTC](https://forum.babylonjs.com/t/a-mesh-with-opacity-texture-is-always-on-the-top-of-the-particles/10737/5 "2020-05-11T12:01:44Z")

</div>

Great, thank you very much!