Clipping one sprite with other using Pixi.js mask while keeping masked one original colors

[fughur]

What i need

I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one.

What i tried

I tried to use DisplayObject.mask property

https://jsfiddle.net/wrfthr8u/5/

var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL);
let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL);

let square = new PIXI.Sprite(squareTexture);
let circle = new PIXI.Sprite(circleTexture);

square.mask = circle;

app.stage.addChild(square);
app.stage.addChild(circle);

But in addition to clipping it also modifies clipped sprite color

So is there any way to clip sprite in Pixi while keeping it's original color without using simple shapes painted with Graphic (i really need to do this with any texture with transparent pixels)?

[ivan.popelyshev]

Its not intended behaviour. What version of pixi do you use? 

Sprite mask: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/spriteMaskFilter.frag#L20 , it uses both mask R and alpha components,.

Please post it on https://fiddle.jshell.net/ 

[fughur]

Quote

Its not intended behaviour. What version of pixi do you use? 

Sprite mask: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/spriteMaskFilter.frag#L20 , it uses both mask R and alpha components,.

Please post it on https://fiddle.jshell.net/ 

So is there any other way to clip one sprite with another, while keeping clipped one original color (e.g. like flash mask or svg clipPath does this)?
I'm using 4.5.6 and here is fiddle link https://fiddle.jshell.net/deaguzhf/

[ivan.popelyshev]

Your circle isn't white. The idea is that Mask uses both R and A channel, so your R channel should also be 255.0 on circle. Why? Because people use black-and-white masks and alpha masks and we have to support both somehow. Just override the fragment shader and remove "masky.r" from it.

var maskFilter= new MySpriteMaskFilter(sprite2);
sprite1.filters = [maskFilter]

 

[ivan.popelyshev]

Technically, colors are preserved. Its alpha that gets multiplied by R component  I think we'll add that to `PIXI.settings` for v5.

Here, I've made an issue for you: https://github.com/pixijs/pixi.js/issues/4422 I hope to post full workaround later. You can either wait either go through my explanation.

Also I congratulate you on first posts on this forum, have some likes! Not every person have informative first posts.

[mudassirali]

I know it is late, but this can do the trick

https://jsfiddle.net/mudassirali/0fq8sen9/148/