[Question] Masks performance and HiDPI displays

Hello,

I’ve only just started experimenting with heavy masking in PixiJS and I’ve hit a performance wall when using certain configurations. Specifically, my scene can’t seem to be rendered faster than 30fps in Safari when using the Intel Iris integrated GPUs. I’m using PixiJS 4.3.5.

Here’s a boiled-down snippet of what I’m doing for the moment:

var app = new PIXI.Application(width, height, config);

var mainStage = new PIXI.Container();
var maskStage = new PIXI.Container();

var baseMaskTexture = new PIXI.BaseRenderTexture(width, height, PIXI.SCALE_MODES.LINEAR, 1);
var maskTexture = new PIXI.RenderTexture(baseMaskTexture);
var maskSprite = new PIXI.Sprite(maskTexture);

mainStage.mask = maskSprite;
app.stage.addChild(mainStage);

/* I then add about a dozen Graphics() elements to the maskStage that are later animated
through their .x, .y and .scale props. The mainStage also contains a few Graphics(). */

var img = new PIXI.Sprite.fromImage(someJPEG);
mainStage.addChild(img);


app.ticker.add(function() {
    app.renderer.render(maskStage, maskTexture);
});

As PixiJS only supports Graphics and Sprites as masks at the moment, and I need my main stage to be masked by multiple individual shapes, I placed these shapes into their own container that is rendered into a texture, and that texture is used as the actual mask.

Everything is buttery smooth in Chrome and Firefox (iGPU or dGPU) and Safari (dGPU), but it all becomes super janky in Safari (iGPU). The scene itself is rendered @1.5x on retina displays to avoid as much blurriness as possible but still maintain decent performances. I guess I could go lower than @1.5x in Safari, but I’d rather avoid that.

Now as I said, I’m quite new to masking in PixiJS, so I’m not sure what could be improved (if anything), or if I should or shouldn’t be doing something. Any advice would be greatly appreciated!

Thank you

[thomas-dm]

I had assumed that Pixi would automatically use the renderer’s resolution for the filters by default, but then I stumbled upon an old thread and saw that it’s been a topic of debate.

Anyway, thanks again! That really helped.

[ivanpopelyshev]

That can be done. Combine Layer1-2 into new container and use VoidFilter on it, specify correct filterArea.

That way combined result of layer1 + layer2 will be blended on layer0