# Webgl: few sprite masks cause heavy fps drop

**URL:** <https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206>\
**Category:** Phaser 3\
**Created:** [November 9, 2019, 10:32pm UTC](https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206 "2019-11-09T22:32:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [November 9, 2019, 10:32pm UTC](https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206/1 "2019-11-09T22:32:27Z")

</div>

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](https://bitbucket.org/dmitrydranitski/phaser3-mask-fps-drop/src/master/)

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

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/39459e6d63a3edd17fc15916e7991dd9e15d35c0.mp4](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/39459e6d63a3edd17fc15916e7991dd9e15d35c0.mp4)

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

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0de2896de643aa014701c2c295bf8579f15b0eeb.mp4](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0de2896de643aa014701c2c295bf8579f15b0eeb.mp4)

---

<div class="post-metadata">

**Author:** ![tac](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tac/32/2296_2.png) [@tac](https://phaser.discourse.group/u/tac)\
**Post date:** [November 10, 2019, 1:40am UTC](https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206/2 "2019-11-10T01:40:14Z")

</div>

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});
```

---

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [November 10, 2019, 9:55am UTC](https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206/3 "2019-11-10T09:55:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paul](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/paul/32/22_2.png) [@paul](https://phaser.discourse.group/u/paul)\
**Post date:** [November 22, 2019, 1:38am UTC](https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206/4 "2019-11-22T01:38:57Z")

</div>

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](http://labs.phaser.io/edit.html?src=src%5Cdisplay%5Cmasks%5Cgeometry%20mask%5Cmultiple%20image%20mask.js)

---

<div class="post-metadata">

**Author:** ![dranitski](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dranitski/32/2285_2.png) [@dranitski](https://phaser.discourse.group/u/dranitski)\
**Post date:** [November 29, 2019, 3:15pm UTC](https://phaser.discourse.group/t/webgl-few-sprite-masks-cause-heavy-fps-drop/4206/5 "2019-11-29T15:15:30Z")

</div>

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