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

Questions
,
1

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

2

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

2 Likes
3

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

4

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

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.

1 Like
5

Great, thank you very much!