• Runtimes

  • HTML Canvas performance

    anglais

Hello!

Sorry if I missed already exist such topic but I didn't found the answer for my question here.

I'm trying to draw many spine animations on html canvas (via Konva.js) and have some performance issues. Currently there are 32 (the same) animations with 20 slots each. And in this case I get about 15 fps. I have tried to do the same without konva with vanilla js only and got approximately the same result.

During some experiments I didn't get significant relations between fps and texture size, but got it for animation slots number

Do you have any advice how can I improve drawing speed for each animation?

Thanks

Related Discussions
...

Sorry for the late response!

First step is to determine if you limited by draw calls or CPU or fill rate.

How is the rendering done? Is it batching all the rendering into a single draw call? How many atlas pages images are in your texture atlas? Ideally it has one, else you could be having many draw calls.

Can you show the Metrics view in animate mode for one of your animations? If you have many deform keys or many timelines it can increase CPU usage.

The number of slots should not have a big effect on FPS, except that you draw more pixels. The Metrics view shows the area (in pixels squared) being rendered. How much is too much depends on your video hardware.

Depending on your needs and where your bottlenecks are, you could update the animations at half the framerate to reduce CPU usage. Eg, update half your skeletons every other frame and the other half on the other frames. Another way to cheat is to pose a skeleton once, but draw it multiple times. Eg, if you have a large army of skeletons, it may not be noticeable if some of the skeleton instances in different locations are on the same animation frame. An army of 100 skeletons might only need to pose 10 different skeletons.