The same code works fine on PC, but slow on mobile browsers

[x-wk]

Version

• Phaser Version: Phaser v3.55.2 (WebGL | Web Audio)
• Operating system: MicrosoftEdge 45.12.0(IOS), Safari(IOS)
• Browser:

Description

This code runs fine on PC, but obviously feels slow on the mobile side, what happened?

Example Test Code

class Example extends Phaser.Scene {
    constructor() {
        super();
        this.sprites = [];
    }

    preload() {
        this.load.image('logo', 'assets/sprites/phaser2.png');
        this.load.image('particle', 'assets/particles/yellow.png');
    }

    create() {
        //  Create the particles
        for (let i = 0; i < 100; i++) {
            const x = 300;
            const y = i * 10 + 20;

            const logo = this.add.image(x, y, 'logo')
                .setDepth(100 - i)
                .setDisplaySize(150, 150);
            const image = this.add.image(x, y, 'particle')
                .setDepth(logo.depth + 10)
                .setBlendMode(Phaser.BlendModes.ADD);

            this.sprites.push({ s: image, r: 2 + Math.random() * 6 });
        }
    }

    update() {
        for (let i = 0; i < this.sprites.length; i++) {
            const sprite = this.sprites[i].s;

            sprite.y -= this.sprites[i].r;

            if (sprite.y < -256) {
                sprite.y = 700;
            }
        }
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: [Example]
};

const game = new Phaser.Game(config);

Additional Information

May be caused by depth?

[vforsh]

Blend mode happened. Especially if you are testing it on iOS 15. From my experience even 5 images with Blend mode ADD is enough to reduce FPS by 10 frames.

[x-wk]

Blend mode happened. Especially if you are testing it on iOS 15. From my experience even 5 images with Blend mode ADD is enough to reduce FPS by 10 frames.

const image = this.add.image(x, y, 'particle')
                // .setDepth(logo.depth + 10)
                .setDepth(logo.depth + 100)
                .setBlendMode(Phaser.BlendModes.ADD);

Also use the ADD blending mode, code like this feels much better, but it is inconsistent with the expected effect.

[x-wk]

Due to 'depth' intersection, a large number of 'draw call' are caused.

[photonstorm]

Depth doesn't cause draw calls - swapping textures (and changing blend modes) does.

However, I would strongly urge you to test v3.60 Beta 11 which I just published now, here to GitHub and to npm. It focuses exclusively on performance and I'm confident you'll be pleased, as it's quicker than any version 3 of Phaser we've ever released.