Pixi.js: Frame rate drop from v3.0.10 to v4.6.1

[BrendonCon]

I am building custom 2D particle engines and using pixi.js at this point as the renderer. I noticed some performance differences between versions. When I updated to v4.6.1 the framerate halved in comparison to v3.0.10. I am running 100k sprites on desktop as my sample set and environment.

I created a minimal sandbox which includes multiple versions of pixi and I simply switch the src to the version. This is not too dissimilar to the bunny mark performance testing tool for pixi. Here is the code:

let width = window.innerWidth;
let height = window.innerHeight;

let renderer = new PIXI.autoDetectRenderer(width, height);
renderer.backgroundColor = 0x000000;
document.body.appendChild(renderer.view);

let stage = PIXI.Container && new PIXI.Container() || PIXI.Stage && new PIXI.Stage();
let rabbitTexture = new PIXI.Texture.fromImage('./../assets/rabbit.png');
let particles = [];
let particleCount = 100000;

function setup() {
    for (let i = 0; i < particleCount; i++) {
        let sprite = new PIXI.Sprite(rabbitTexture);
        sprite.x = Math.random() * window.innerWidth;
        sprite.y = Math.random() * window.innerHeight;
        sprite.alpha = Math.random();
        sprite.scale.set(Math.random() * 3);
        sprite.anchor.set(0.5, 0.5);
        sprite.blendMode = 0;
        sprite.angularVelocity = (Math.random() - 0.5) * 0.1;
        sprite.tint = [0xff0000, 0x00ff00, 0x0000ff][Math.random() * 3 | 0];
        particles.push(sprite);
        stage.addChild(sprite);
    }
}

function update() {
    for (let i = 0, len = particles.length; i < len; i++) {
        let particle = particles[i];
        particle.rotation += 0.1;
    }
}

function render() {
    update();
    renderer.render(stage);
    requestAnimationFrame(render);
}

setup();
render();

This is pretty much as simple as it gets. If there is something I am doing wrong here or perhaps a step I am unaware of, please let me know and I can adjust accordingly. As far as I can tell it is simply the change from version to version.

[ivanpopelyshev]

There are many differences in v3 and v4 sprite renderer. You can try to use sprites from https://github.com/gameofbombs/pixi-heaven , that renderer is a bit easier.

[wpitallo]

Why would the performance be so much worse on v4 though?

[ivanpopelyshev]

Because of different balance of CPU/GPU load. I know which parts are slower, and we are fixing them in v5. But in general, if you dont have that many sprites, v4 is faster. Different demos, different balance, different outcome :)

[BrendonCon]

@ivanpopelyshev awesome, thats great to hear!! Looking forward to v5! Typically we shouldn't be using 100k+ sprites, however I am just worried about mobile performance as this drop occurs on a desktop, the drop off in frame rate can be exponential with some weird mobiles out there. However I am definitely looking to v5, we all know Pixi is a fantastic renderer, thanks for the great work and efforts!

[ivanpopelyshev]

There are ways to patch sprite renderer and use simpler one, also that frame drop doesn't affect mobiles that much, there are params like legacy mode in renderer that allow to configure performance for your app.

[BrendonCon]

@ivanpopelyshev thanks Ivan, I will have a look at the params and the sprite renderer a bit more :) any helpful tutorials or guides you could recommend? :)

[ivanpopelyshev]

No, only source code. PIXI goes forward too fast, we dont even have time to document everything. Instead, we leave comments and make source code look good.

that's my alternative sprite renderer based on v5, downgraded to v4:

https://github.com/gameofbombs/pixi-heaven/blob/master/src/base/webgl/SpriteRenderer.ts
https://github.com/gameofbombs/pixi-heaven/blob/master/src/twotint/sprites/SpriteHeavenRenderer.ts

[ivanpopelyshev]

Though, there are articles on critical places of v4: https://github.com/pixijs/pixi.js/wiki/v4-Gotchas

[BrendonCon]

@ivanpopelyshev Awesome awesome awesome, thank you for the resources, will start tinkering!

[finscn]

There is a discuss about the performance of v3 & v4 : https://github.com/pixijs/pixi.js/issues/3557

[BrendonCon]

@finscn thanks for the link, interesting to hear that Babel could play a hand in this...

[themoonrat]

Closing for inactivity, tho I think this has been covered in the comments :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.