Webgl: few sprite masks cause heavy fps drop

Phaser 3
1

Hi all!

Here is a repository with code and instructions to start and reproduce FPS loss. It should take about 3-5 minutes to reproduce:
phaser3-mask-fps-drop

I cut off everything other and simply left a UI element that causes heavy FPS loss when masks are enabled and added sprite emitter on background for simulate some load that can be visually measured. My game is targeted on mobile devices and using masks makes it very laggy.
The question is: why 4 simple sprite masks cause so noticeable FPS drop? Is there any solution or workaround? Thanks in advance

Performance on Iphone6+ in Chrome 78.0.3904.84 (latest, nov 2019) without masks

Performance on Iphone6+ in Chrome 78.0.3904.84 (latest, nov 2019) with masks

2

You’re creating 10,000 balls?

  create() {
    // balls
    this.i = 0;
    this.x = 0;
    this.blitter = this.add.blitter(0, 0, 'balls');
    this.text = this.add.text(SCREEN_WIDTH/2, SCREEN_HEIGHT*0.9);
    this.time.addEvent({delay: 10, callback: this.balls, callbackScope: this, repeat: 10000});
3

Hello, yes I am, what is wrong with that? 10 000 balls are working perfectly fine across different devices and browsers with good FPS and are added to scene just to show the FPS difference. When I add 4 simple sprite masks on the screen everything starts to lag down. The thing I want to understand is why simple sprite masks impact performance of game so heavily. Let’s take this spawning balls as game background load.

You can change 10000 balls to 5 or 10 and the FPS drop will still be huge and noticeable when using masks

4

Not sure if you tried this, but I found that geometryMask was much more performant when compared to image masks:

http://labs.phaser.io/edit.html?src=src\display\masks\geometry%20mask\multiple%20image%20mask.js

5

Thanks ! Unfortunately I need sprite masks. What’s wrong with their performance? It makes them unuseable :frowning: