WARNING: Too many active WebGL contexts. Oldest context will be lost.

17573207179

When there are many SpinePlayers on my page, it will appear FlashPoint.tsx:25 WARNING: Too many active WebGL contexts. Oldest context will be lost. Warning, then error message

Spinebot

The warning and error message you are encountering is due to exceeding the limit of active WebGL contexts that a browser can handle. Each SpinePlayer instance creates its own WebGL context, and browsers have a limit on how many contexts can be active at once, typically around 4-8 on mobile devices and slightly higher on desktops. To manage this, you can consider using a single canvas to render multiple skeletons instead of multiple SpinePlayer instances. This can be achieved by using spine-ts with WebGL or a framework like Phaser, which allows you to manage multiple skeletons within a single WebGL context. This approach will help you avoid hitting the WebGL context limit.

17573207179

It's not possible to do everything on the same canvas because they are all different areas

Davide

Hi, as Spinebot mentioned, you can't have too many WebGL canvases active simultaneously on a single page. There's a hard limit, which varies depending on the device, that is especially restrictive on mobile devices.

If not all canvases are visible at the same time, you could try manually switching the canvas context based on which ones are currently in view.

Alternatively, we’ve developed a new library called spine-webcomponents, which overcomes this limitation, though it doesn’t include the player UI. Using it is as simple as adding an HTML tag like this:

<spine-skeleton
   atlas="/files/spine-widget/assets/spineboy-pma.atlas"
   skeleton="/files/spine-widget/assets/spineboy-pro.skel"
></spine-skeleton>

You can find more details on the documentation page.