Particles and NodeMaterial

I’ve been having some issues trying to get a particle system to look the way I want in a scene. I’m using a transparent scene clear color (0,0,0,0) so that a background can show beneath the canvas. I’ve tried to reproduce a close approximation in the playground.

https://playground.babylonjs.com/#0AGXE8#2

The problem I’m having is that my object with a NodeMaterial always seems to show on top of the particles when they are approaching the camera. I would have figured turning off alpha blending would have caused the particles to draw on top of whatever is there based on their depth in the scene. I’m still trying to figure out how the particle draw system works. Is it drawing on top of the render buffer after everything else?

What is the best way I can make it seem like the particles are passing through the mesh? I shouldn’t be able to see the mesh through them when they are approaching the camera.

So to get the correct ordering you have to force the particles to write to depth buffer:
https://playground.babylonjs.com/#0AGXE8#3

But in this case you have to use ONEONE for the blend mode or ADD and then change a bit your texture to be on black background

Do you mean use a particle texture with a black background and no alpha? I tried using the included flare.png and the ONEONE mode but it results in washed out white squares.

https://playground.babylonjs.com/#0AGXE8#4

I used renderingGroupId to force the mesh to render after the parts: https://playground.babylonjs.com/#0AGXE8#5

I’m wondering if I need to look at a custom shader for the effect I’m trying to accomplish. I need the particles inside the mesh to appear to be behind it but once they are outside they should be drawn over top of the mesh. Is there a way to do this without something expensive like facet depth sorting?

How come when I remove the renderingGroupId the particles have a black square around them? Could I just use a fragment shader that discards any particles outside a texture mask?

https://playground.babylonjs.com/#0AGXE8#6

Is there a way to get access to the engine alpha properties (like alpha blend functions)? I know for a mesh you can do something like

mesh.onBeforeRenderObservable.add( () => {
engine._alphaState.setAlphaBlendFunctionParameters( engine._gl.SRC_ALPHA, engine._gl.ONE_MINUS_SRC_ALPHA, engine._gl.ONE, engine._gl.ONE_MINUS_SRC_ALPHA )
})

You can use the onBeforeParticlesRenderingObservable and onAfterParticlesRenderingObservable observers that are called just before/after the particle systems are rendered.

I’m closer to the effect I’m trying to get but a few things are still not quite working.

https://playground.babylonjs.com/#0AGXE8#10

For some reason, the transparent mesh is always the last draw call even if I set it to a higher render group. I need the particles outside the mesh to appear closer to the camera.

Would a SPS be more effective here? I was hoping to use the performance benefits of GPU particles but it seems like I can’t get the same depth effects as standard mesh rendering.

The property is called renderingGroupId, not renderGroupId:

https://playground.babylonjs.com/#0AGXE8#11

Ah that makes sense, I had it correct and some point :laughing:

Sadly now it’s gone the opposite way, it looks great when the particles are approaching the camera. But when I rotate and need the particles to be occluded by the mesh. Seems like I might just have to resort to planes and a custom particle solution.

Does anyone know how Overwatch handles their barrier effects? They definitely handle the alpha sorting problems I’m running into.

The image below is probably the best I could find for now, you can see that there are particle effects that are both partially occluded by the barrier and draw on top of it.

barrier sorting

They have probably multiple layers