dose pixijs support reverse mask feature ?

[liujinxiao]

is there any plan to achieve mask reverse feature ? thanks !

now our team is using pixi.js to achieve mask feature and mask reverse feature, like this

1、this is the original sprite

2、this is the sprite with circle mask

3、this is the sprite with circle reverse mask

[carl-jin]

check this demo below，看下这个例子老铁
https://pixijs.io/examples/#/masks/filter.js

[liujinxiao]

check this demo below，看下这个例子老铁 https://pixijs.io/examples/#/masks/filter.js

this example just show mask feature, but does not support mask reverse feature

[liujinxiao]

https://github.com/liujinxiao/pixijs/pull/1/files

edit packages/core/src/filters/spriteMask/spriteMaskFilter.frag file, maybe resolve the issue?

[dev7355608]

You can use custom sprite mask filters like so:

object.mask = new PIXI.MaskData(sprite);
object.mask.filter = new MyCustomSpriteMaskFilter();

But you shouldn't use a mask for reverse masking. That doesn't work. Use a filter:

object.filters = [new MyReverseSpriteMaskFilter()];
object.filters[0].maskSprite = sprite;

[liujinxiao]

You can use custom sprite mask filters like so:

object.mask = new PIXI.MaskData(sprite);
object.mask.filter = new MyCustomSpriteMaskFilter();

But you shouldn't use a mask for reverse masking. That doesn't work. Use a filter:

object.filters = [new MyReverseSpriteMaskFilter()];
object.filters[0].maskSprite = sprite;

mask is actually a filter, so i want to edit mask filter to achieve mask reverse feature。this does work.

[dev7355608]

Try this:

object.filters = [new PIXI.SpriteMaskFilter(undefined, `\
varying vec2 vMaskCoord;
varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform sampler2D mask;
uniform float alpha;
uniform float npmAlpha;
uniform vec4 maskClamp;

void main(void)
{
    float clip = step(3.5,
        step(maskClamp.x, vMaskCoord.x) +
        step(maskClamp.y, vMaskCoord.y) +
        step(vMaskCoord.x, maskClamp.z) +
        step(vMaskCoord.y, maskClamp.w));

    vec4 original = texture2D(uSampler, vTextureCoord);
    vec4 masky = texture2D(mask, vMaskCoord);
    float alphaMul = 1.0 - npmAlpha * (1.0 - masky.a);

    original *= 1.0 - (alphaMul * masky.r * alpha * clip);

    gl_FragColor = original;
}
`)];
object.filters[0].maskSprite = sprite;

[liujinxiao]

this is same as my method, and it does work. but i think support reverse mask feature may be easy for users, thanks.
anyway, we can achieve this feature :)