Performance in Firefox and Safari

[mattstyles]

Has anyone else noticed a lack of performance in Firefox and Safari for v3?

 

I've got a lot going on in the small game I'm creating, and I dont actually think Pixi is my performance bottleneck at all, but was wondering if anyone had any similar experiences,

 

Chrome runs at a solid 60fps even with the inspector open

Firefox at about 45-50fps

Safari just 30 or so

 

If I add about a 1000 objects to my physics simulation (I'll get to other factors in a mo) then

Chrome still chugs along at 60fps

FF goes down to 25-30

Safari is lucky if it hits 15

 

I'm using P2 for the physics stuff, but, to there is a lot else that is probably to blame over Pixi, including ImmutableJS (for data), React (for UI level) and it uses Stage 0 Babel transforms for feature compatibility and polyfills, so, yeah, I'll try to isolate just the Pixi/P2 bit, but its not straight forward. Thought I'd ask first and also investigate myself.

 

Its webGL rendered.

 

Platform is Mac, nearly new Retina 15-inch and slightly older non-retina 13-inch Air, similar perf pattern on both

[xerver]

The best way to answer this question is for you to profile your code. The tools will tell you what is making your app slow, and you can investigate from there how to fix it

[mattstyles]

http://mattstyles.github.io/pixi-starfield/examples/fullscreen/index.html

 

I've got the demo there, although FF seems to 'warm up'! It'll run at 40 or so but then speed up to a solid 60 sometimes!

Starfield.prototype.update = function update() {  var _this = this;  this.stars.forEach(function (star) {    var _bounds;    var starpos = star.getPosition();    if (!(_bounds = _this.bounds).contains.apply(_bounds, _toConsumableArray(starpos))) {      var diffX = _this.pos.x - starpos[0];      var diffY = _this.pos.y - starpos[1];      // Set position if the difference is outside the bounds      star.setPosition(Math.abs(diffX) >= _this.opts.size.width ? _this.pos.x + diffX : starpos[0], Math.abs(diffY) >= _this.opts.size.height ? _this.pos.y + diffY : starpos[1]);    }  });}; 

Its this function that causes the most issues, which could do with some optimisation anyway.

 

The array holds 500 of so stars in this test and it makes a bounding test on each of them before moving them if necessary. The babel transpilation could be the real killer here.

 

I'll play with optimising it, I always knew this bit would be the bottleneck anyways.

[xerver]

The forEach (instead of a for-loop) and the apply+array conversion are probably the biggest killers here.

That ternary is sick to read though lol

[mattstyles]

Ha ha, yeah, fairly brutal, I've tidied up a little since then! It wasnt working right anyway!

 

I've opened an issue in the repo as I've seen the FF 'warming' up thing in a few places now, although the bunnymark works well so I dont think the issue lies with pixi. I'll knock up a proper test case at some point, where I expect I wont be able to replicate!