Is it possible to apply a blur filter to a sprite with a mask, but keep the blur contained within the mask shape?

Question

I am using Pixi to draw an image, and then apply a video alpha mask to it, like so:

var bg = PIXI.Sprite.fromImage(data.imageUrl);
var texture = PIXI.Texture.fromVideo(data.maskUrl);

bg.mask = mask;
app.stage.addChild(mask, bg);

Which works great. I then decided I want to be able to blur the image at a certain point, so I looked into how to apply a blur, and came out with this code:

var blurFilter = new PIXI.filters.BlurFilter();
bg.filters = [blurFilter];
blurFilter.blur = 10;

However, this had an unintended side effect of blurring the composited image with the mask (in other words, the mask is included in the blur calculation, and the blur extends out past the edges of the mask)

Is there any way to blur the sprites image, but keep the mask crisp, masking out the result of the blurred image?

score 4 · Accepted Answer · answered Feb 14 '18 at 19:06

I eventually figured out that I could create a container PIXI.Container and add the sprite into it, but apply the mask to the container instead.. then the blur applied to the sprite is... contained.

var container = new PIXI.Container;
container.addChild(bg);

container.mask = mask;

Is it possible to apply a blur filter to a sprite with a mask, but keep the blur contained within the mask shape?

1 Answers1