Particle Helper and Depth Sort work around help

From everything I have read, I understand that particles are rendered after opaque meshes. If you look at this, https://compatiblestronginitialization–, and rotate the camera to where the planets are between the camera and the sun, you will see what I am dealing with. I am trying to figure out a way to hide the particle sets behind the object. Do I need to calculate the depth from camera and hide affected particles? Otherwise, I can’t quite understand how particles would ever be useful for a 3D game in Babylon (think candle inside a room and your player is outside the room).

If someone could explain what I am doing wrong, how to fix this, or a different particle system (SPS for example) that could provide a solution I am looking for, I would be grateful.
If you need to look at the code, it is under lib/js/app.js, - CompatibleStrongInitialization.

Thanks guys, any help or references are appreciated.

** See playground for specific issue:

cc @Deltakosh our particles… and babylonjs master :slight_smile:

As you can see in this example, the particles are rendred after the opaque meshes but they will obviously honor the depth buffer:

So in your case, I suspect that your planets are considered as transparent and thus they do not write into the depth buffer. So an easy fix is just to make sure they are opaque :slight_smile:

Please repro in the Playground if that does not work

@Deltakosh, thanks for the initial response. I am looking into that now.


I updated and tested in the playground. I cannot figure out how to set the opaque nature on the “planet” to accommodate hiding the “sun” particle system. I have reproduced in the playground, as requested.

I also culled the script down to just the important parts.

Ok gotcha. If you look here you will see that the sun emitter is moved to a different rendering group id:

This is required because the sun effect is built with 3 layers.

If you want to use that specific effect you have to move your mesh to layer 3 as well:

1 Like

@Deltakosh, you are the man. Thank you. That fixed my problem.

TLDR: For anyone finding this, I simply added .renderingGroupId = 3 to my mesh object.

1 Like