Performance Issues with an interactive parallax demo. Fixable?

[bildha]

This little project I'm working on used this excellent proof of concept as a reference for creating a responsive, interactive parallax experience. Check it out to get a good idea of what's going on with my project.

My project is built and I'm currently going through and fixing cross-browser compatibility bugs. The problem I'm having is that I'm seeing significant FPS drops. On my 2 year old MBP I'm able to run it at a consistent 60fps on Chrome and Firefox but it gets a bit choppy in Safari. Alternatively, on an older windows 7 laptop it runs very slowly (~10 fps) on IE11 and FF but runs at 60fps on Chrome (btw, that laptop has an Intel HD 3000 integrated gpu and an i5-2450M cpu). So in this case it seems like it may be more browser-related than hardware.

It's also important to note that in my project I'm not Tweening the objects' animations as they move around the screen (I'm only using it when they are shown or hidden) however, the codepen demo above runs fine on the older windows 7 laptop but shows similar performance issues in Safari on my MBP. And more specifically with Safari, the performance improves as the size of the browser window decreases (even though the same number of images are being rendered and repositioned. In fact if I only render one image it's still choppy at larger screen sizes but smooth when it hits about 1200px wide).

Any thoughts on whether this could be further optimized? Is there any way I can make improvements to the animation system that would significantly improve the performance in these configurations?

By the way, in the attached script you'll see some working features commented out (such as the animated sprite). These had very little impact on the framerate but I've left them commented out anyway. Also, the performance improves as I remove objects but I don't see much of an improvement until about 80–85% of them are gone.

 

Edit:

Forgot to mention that I'm using Pixi 4.6.2

 

main.js

[bildha]

Okay, I disabled anti-aliasing and performance in Safari is identical to Chrome and FF now on my MBP. Now to see if that fixes the problem for other devices.

[bildha]

In case this helps anyone else, disabling antialiasing drastically improved my performance on all devices and also improved performance for larger renderer sizes. Perhaps that's obvious but I didn't think it would have that much of an impact on my project.

[ivan.popelyshev]

That's not obvious, but changing antialias switches magic inside the browser. I dont know how exactly that works, but I recommend to people switch "antialias" flag whenever something goes wrong.

[bildha]

Thanks, Ivan.

While disabling antialiasing did boost FPS in Safari on my macbook pro as well as Chrome and FF on an older Windows 7 laptop, I'm still seeing very low FPS in IE11 (on the Windows 7 laptop).

I'm not sure if it's too much to ask for someone to look through the attached JS file in the first post in this thread, but I have a feeling the performance issue has to do with the core implementation of how I'm repositioning the sprites. I'm sure there are much more performant ways to go about it but at this point I'm not sure I have time to go in another direction with it. Any suggestions?

[ivan.popelyshev]

It looks fine. You can try to write those calls directly in transform, not through shortcuts. I'll doubt it'll help. The thing is, if you change something, updateTransform() will be called and its more heavy than those operations.

I'm using transform internals here, don't be afraid, they are not documented - you have to read TransformStatic source to understand how it works.

 

var pos = _self.sprite.transform.position;
var scale = _self.sprite.transform.scale;

pos._x += (tx - pos._x) * easingCoeff;
pos._y += (ty - pos._y) * easingCoeff;
scale._x += (tsx - scale._x) * easingCoeff;
scale._y += (tsy - scale._y) * easingCoeff;
_self.sprite.transform._localID++; // because we are using "_" and not just "x"

I need your profiler's dump if you want to know more.

[bildha]

Another follow up. It appears that the poor performance in IE may be related to the WebGL fallback IE11 is using. I've removed autoDetectRenderer and am now using canvas across the board and performance is now smooth in IE11, FF, and Chrome on both laptops.

I may just continue using canvas at this point if there's no major drawbacks but if I have time I will look into how to handle this issue in IE11.

[ivan.popelyshev]

OK, I agree that it can be related to fallback and blacklisted drivers. What videocard do you have?