pixijs / spine

Pixi.js plugin that enables Spine support.
Other
561 stars 217 forks source link

Spines bad performance #317

Open ramako opened 4 years ago

ramako commented 4 years ago

Hello, I have a game where spines are idling, not playing any animation whatsoever, and the game seems to be taking a performance hit because of them. The spines do have animations for a later part of the game. but even when staying idle the games takes a performance hit. If I run the performance tool in chrome, I can see pixi spine calling update transform on the spines, but I would expect pixi spine to treat it as a sprite if its not playing.

I would like to ask if this is the intended behaviour? Not sure exactly how pixi spine works, it just attaches the slots into one image and even if it is idle, it keeps updating those small images to keep the final image consistent?

eXponenta commented 4 years ago

Any render calls update transforms for fetching actual results. But if transforms wasn't changed it must skip matrix update. When renderer update batchings it transform vertices by world matrix for any visible sprites.

ivanpopelyshev commented 4 years ago

How many spine objects we are talking about? How many attachments/slots are in each of them?

ramako commented 4 years ago

Hello, thanks both of you for answering: its around 10 spine objects in screen, around 42 slots each one, must say the json files for them are quite big, we are talking 1 mb (there is only 4 different spines, I reuse them throughout the game).

I have tried in a samsung galaxy s6 and it cant handle the spines at all, howver swapping them for sprites works perfectly. Of course, the performance is also noticeable for stronger devices too. I am using pixi legacy 5.1.2, pixi spine 2.1.2

ivanpopelyshev commented 4 years ago

That's not the first time people reported that.

I guess you can hack spine update() function that way it doesn't do all those spine-related things if animation is stopped https://github.com/pixijs/pixi-spine/blob/master/src/Spine.ts#L210

We dont have general solution for that and people who fixed it for their games didnt report back :( Maybe we'll share your solution when you fix it in your game.

ramako commented 4 years ago

I will give it a try, if I indeed manage to solve it I will share my solution, but I am sure it won't be up to good enough standards to be shared :P Thanks!

ramako commented 4 years ago

Just a quick update, investigating mroe, it does not seem related to spine itself, but I would guess that meshes are crashing the performance

ivanpopelyshev commented 4 years ago

Yeah, meshes :)

unfortunately , gpu-patch for spine meshes is still only for pixi-v3, i want to move it to v5 though, but its difficult. If that's what your project depends on, please give me more info :)

ramako commented 4 years ago

It is slightly dependant on it, yes, I will investigate more on my part to see if I can get some improvements done in any way, maybe I can find a work around on the game side, I know you are a very busy man :) thanks!

chokaa commented 4 years ago

I already read on some thread that you need to change pixi-spine update function in order not to update spine which has its own autoUpdate field set to false so i did, and now i have 2 spines with a lot of bones and slots ( which are not being updated ) but are dropping fps on low-end devices even though they are not being update ... After that i read on this thread that meshes are problem but since those are updated inside update function ( ? ) which is not called so apparently pixi has problems just rendering those spines ?

ivanpopelyshev commented 4 years ago

@chokaa depends on pixi version too. Maybe you took the one that can work on canvas2d and target device SOMEHOW doesnt have webgl, then yes, in that case meshes will be very slow. Also if you want to see webgl commands you can use https://spector.babylonjs.com/ - that can help you to detect if there are too many webgl commands.

In any case, PixiJS is not a black box. You can profile it , debug it, find whats your bottleneck.

ramako commented 4 years ago

@chokaa Sadly, I was not able to find a solution. I used chrome profiling and found out that meshes were taking a good chunk percentage of the cpu. Just stopped using spines, only use it for very specific, non complicated cases so lower mobile devices can keep up. Let me know if you find something!

chokaa commented 4 years ago

'Maybe you took the one that can work on canvas2d and target device SOMEHOW doesnt have webgl, then yes, in that case meshes will be very slow.' I highly doubt that's the problem, since i just throttle CPU inside chrome. And i went through pixi-spine but there isn't anything that is problem there so only place left to look is pixi right ? Btw, @ivanpopelyshev thanks for lighting fast answer ! :)

ivanpopelyshev commented 4 years ago

If its android device, connect it to PC in debug mode, you can take profile in chrome. You dont need tools, just chrome on both PC and device.