Pixi.js: Alpha masks disable additive blending mode

[Spigo-Kevin]

It appears that applying an alpha mask to a Pixi object will disable the additive blending mode.

var imageEntity = new PIXI.Sprite(this.imageTexture);
imageEntity.blendMode = PIXI.BLEND_MODES.ADD;

var mask = new PIXI.Sprite(this.maskTexture);
imageEntity.addChild(mask);
imageEntity.mask = mask;

stage.addChild(imageEntity);

I seem to remember this having been reported in the past but was unable to find it.

We are using Pixi V.4.0.0.

[ivanpopelyshev]

Yes, it is a bug, however if you imagine how it works internally - its actually not. We'll fix that.

Right now iot works only for CanvasRenderer

For webgl renderer there's a workaround:

var addFilter= new PIXI.filters.VoidFilter();
addFilter.blendMode = PIXI.BLEND_MODES_ADD;
imageEntity.filters = [addFilter];

//and remove sprite blendmode

Its not the best thing, it uses one more framebuffer.

@GoodBoyDigital @mattcarl I propose we add special field "maskBlendMode"

[Patrick-Hammond]

I noticed there is no blendMode assignment in the MaskManager.pushSpriteMask method. But I suspect there is more to it than I understand. Something like:

            alphaMaskFilter[0].blendMode = target.blendMode;

[ivanpopelyshev]

It will work if you actually use alphaMaskFilter instead of mask.

[chesovnik]

Maybe, I have the same problem. If I create mask from Graphics and apply it to Graphics it works fine. If I apply blend mode to these Graphics everything is okey too. But if I apply blend mode and then make mask — blend mode doesn't work.

let overlay = new Graphics(); overlay.lineStyle(5,0xFF3300,1); overlay.beginFill(0x66CCFF); overlay.drawRect(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight); overlay.endFill();

let rectangle = new Graphics(); rectangle.lineStyle(5,0xFF3300,1); rectangle.drawRect(window.innerWidth / 3, window.innerHeight / 3, 500, 500);

overlay.blendMode = PIXI.BLEND_MODES.MULTIPLY;
overlay.mask = rectangle;
app.stage.addChild(overlay);
app.stage.addChild(rectangle);

PixiJS 4.7.3 - ✰ WebGL ✰

[ivanpopelyshev]

I gave the solution:

It will work if you actually use alphaMaskFilter instead of mask field.

[chesovnik]

Thanks! But what is the syntax and API of alphaMaskFilter? I didn't find it in PIXI API documentation

[ivanpopelyshev]

You are already at the point where docs are useless, you have to clone the repo.

https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js

Assume we have alphaSprite and mySprite

var spriteMaskFilter = new PIXI.filters.SpriteMaskFilter();
spriteMaskFilter.glShaderKey = 'uniqueMaskKey'; // ask filterManager to cache filter shader, handy if you use many of them

spriteMaskFilter.sprite = alphaSprite;
alphaSprite.renderable = false;

mySprite.filters = [spriteMaskFilter];

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.