Incorrect Particle Rendering in Front of Transparent Canvas

[2percenter]

If you use a particle system with a transparent canvas, the particles render with some sort of additive or multiplicative action with the background color. This is particularly noticeable in AR applications (e.g. using 8th Wall).

Particles that appear in front of geometry are rendered as expected.

I have created an example project showing how they appear in front of black and white geometry compared to the transparent area. This is not an AR project, obviously, but the effect can still be seen.

https://playcanv.as/b/zxToKEDc/

[slimbuck]

Hi @2percenter ,

This is what I see with your example:

How is it meant to look?

Thanks!

[willeastcott]

No. @2percenter is saying that particles rendered over the background should be rendered too. Particles seems to be rendered with a blend mode that multiplies against destination alpha. This makes rendering an AR app with particles (that requires a clearing the frame buffer with alpha = 0) impossible.

[2percenter]

Well, it seems like there's even more going on than I thought. This is what I see on Chrome/Windows 10.

I expect the particles to look the same regardless of what's behind them in this situation. They have an alpha of 1, so I wouldn't think they would be affected by what's behind them.

[Maksims]

In AR scenario, WebGL does not have a behind pixels (camera, on transparent parts), so it cannot perform blending operations. Then it will base blending on clear color of a camera. That leads to weird artefacts, indeed. Like black borders around additive sprites which are rendered over transparent portion of canvas.