Particle blend modes for transparent backgrounds?

Questions
1

Playground with exmaple: Babylon.js Playground

I’m having trouble finding a blend mode to show particles on top of a transparent background, particularly when that transparency is on top of a white page. The only solution I’ve found is to disable alpha blending, use a custom shader and manually discard at an alpha cutoff. This obviously doesn’t get you a translucent particle but at least it’s not square. Anything else is only visible against darker elements inside the scene itself.

Is there a Blend Mode that would work better? I’ve tried all the ones in the constants file and nothing is satisfactory. It doesn’t seem you can change the blend equation itself. I don’t need particles adding to each other, just a partially transparent particle showing against the white background.

2

yup you would definitely need to add a dedicated equation for that :frowning:

I ll see if we could at least hook in some event to force it. This is pretty edge case so I would prefer to not add a full generic support if not fully mandatory.

3

Your problem is that flare.png does not have an alpha channel.

If you use a texture with an alpha channel, the standard blending mode is ok:

https://playground.babylonjs.com/#TPLSQI

4

Oh, Yes totally agree that if you could use transparent texture instead it will make everything much simpler. Thanks a lot @Evgeni_Popov

I was thinking to make it work as it is which is not the most efficient so double yes !!! lets go the pragmatic road :slight_smile: