BlendMode ADD is not working on background elements

[TisRyno]

Firstly, I'd love to make a codepen on this issue but my code is way too complex to translate down as it's a heavy object orientated setup.

The render structure is very slim though, there's not a huge amount of levels to it. The screenshot shows an animation running around an avatar using BlendMode ADD, in the bottom left of the screenshot you can see it correctly calculates the alpha over the avatar (They exist in the same sprite level) but it ignores the background, which for ease I have set to solid white.

Usually the background would show many other entities of the game.

I've tried using a custom blendmode, slimming the structure till the frames are all 1 level in from everything else but still nothing.

Any idea, no matter how bizarre could help me solve this!

Thanks!

[ivan.popelyshev]

how exactly did you specify background? Also, white + anything = white for ADD blendMode

[TisRyno]

Sorry, I probably didn't make it overly clear!

The background showing in the screenshot isn't usually there at all, my entire world map is rendered below you, I only removed that to show the issue in a clearer way.

In this case, the background is literally just the background colour from new PIXI.Application.

But the issue occurs when I have other sprites rendered behind the avatar. My actual render structure is:
Stage -> "Main Container" (everything is put inside this) -> Avatar Container -> Avatar sprites

Avatar Container is a singular avatar so 1 container exists per user online. 

After I posted this I hacked my code to add all sprites directly into the primary container (instead of using Avatar Container) and the blendmode worked as expected, but if possible I'd like to keep all the sprites for the avatar sat inside a container/sprite and have the blendmode still working as I put things like interactivity, zindex and position all on the Avatar Container instead of on each sprite that makes the whole avatar.

[ivan.popelyshev]

> add all sprites directly into the primary container 

Oh right, you have something with a mask or filter on top, right? That's when ADD cant work because its actually rendered into separate texture that has no background  

Remove mask/filter and it should work fine.

Because you stumbled across the problem of layering, I'm obligated to advice to look at demos https://pixijs.io/examples/#/plugin-layers/lighting.js and https://pixijs.io/examples/#/plugin-layers/bringToTop.js .

Two things you haev to consider:

1. masks and filters render all the contents of container in separate texture, then this texture is  rendered on screen with special shader. blending with background wont work there

2. zIndex works only inside containers, and in case you want it to work through the tree, you have to learn how pixi-layers plugin works, otherwise you'll have to manually put them in containers according to render order , and that will make your architecture difficult.

[TisRyno]

Ah okay, that makes perfect sense, I do have filters included.

I will look into using the Layers, I had hoped to not need them but it seems the time has come!

Luckily I have spent enough time working with PIXI v5 to be able to easily add in the Layers plugin.

Thanks for your help and quick responses! Rarely had any issues with PIXI and generally can find the solution fairly easily. Perhaps worth noting this issue somewhere, perhaps in a v5/v4 "Gotchas" section, I have spent probably 20 hours researching this issue, pulling code apart and trying various "solutions" but failed to ever find the cause.

Also massive sidenote - I attempted to update to 5.3 from 5.2.4 and all my avatar rendering disappeared, didn't look into the problem at all (unfortunately) as I was too stressed with this issue!
Once I've moved onto using layers and got my code back to working order I will retry and see if I can replicate the problem.

Thanks once again!

[ivan.popelyshev]

OK, ill look at it if you replicate it  might be also something with cacheAsBitmap, it broke again..