[SOLVED] PixiJS vs CreateJs

[dragonwhites]

[SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't.

My player reported that after turning off the antialias, it works better than the createJs.

 

Hello everybody, my name is Draco.

I am the creator of a web game called stabfish.io

My game was built using createJS with Animate export plugin.

Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin.

After revamping the game, the performance of the game on my computers has a significant boost.

However, there are reports by 2-3 players that the performance has dropped after the update.

I would like to know if you have any insight into what might be causing this.

 

In case you guys interested to compare, these are the link:

createjs: https://stabfish.io/old

pixiJs: https://stabfish.io/pixi

 

I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues:

1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said)

2. He has 60 fps with createJs version.

3. Both versions have the same amount of displayed object. No special culling in either version.

4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec

5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log

 

Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue.

Thank you .

Edited July 19, 2020 by dragonwhites
Solved

[ivan.popelyshev]

Hey! No, sorry, you have to give specific configuration where it actually doesnt work. Graphics card, graphics driver, e.t.c., did he try it in different browsers?

Difference might be how we handle resolution, if you used devicePixelRatio and such, and user has very big screen, well, lets say no one gets it right on first try. Its usual to allow users to choose resolution and whether turn on/off antialiasing.

i cant even say whether its CPU or GPU problem, i need to see devtools profiler dump and what SpectorJS reports

Edited July 18, 2020 by ivan.popelyshev

[ivan.popelyshev]

You can wait some time and see if anyone has time to launch app and look at profiles, but better do it yourself and report here

[dragonwhites]

12 hours ago, ivan.popelyshev said:

Hey! No, sorry, you have to give specific configuration where it actually doesnt work. Graphics card, graphics driver, e.t.c., did he try it in different browsers?

Difference might be how we handle resolution, if you used devicePixelRatio and such, and user has very big screen, well, lets say no one gets it right on first try. Its usual to allow users to choose resolution and whether turn on/off antialiasing.

i cant even say whether its CPU or GPU problem, i need to see devtools profiler dump and what SpectorJS reports

Hi, thanks for reply,

I've finally found the reason of the bad performance,

I set the antialias to true in PixiJS, while it is false in createJs

even though most of my assets are sprites, apparently the performance can still be affected.

[ivan.popelyshev]

The difference is type of rendering buffer is used: its not 32-bit per-pixel , its much more - to store several samples instead of just one. 

1. pixel fillrate suffers because for every filled pixel special algo tests several samples whether they appear in geometry. Thank god, no extra fragment shader calls.

2. extra operation to "snap" multi-sample pixel into regular pixel.

Also its not possible to affect those algorithms, except "antialias" setting in webgl.

In case you still need good AA edges on your sprites, you can add extra transparent column/row of pixels where its important. Yes, it'll affect width/height calculation but with constant scale it will look just like AA

That's also one part where canvas2d context is better than webgl - canvas2d uses AAA (analytical AA) to calculate exact % area of pixel covered by shape, its calculated on CPU and is uploaded to GPU later. That algo is very fast.

You're not the first one who makes that mistake. We had bunnymark with antialias for a while and people thought that pixi-v4 is seriously slower than pixi-v3