To properly destroy a Spine Web Player instance and free up WebGL contexts, you need to call the dispose() method on the player instance. Simply removing the DOM element is not enough - you must explicitly dispose of the player to release WebGL resources.
Here's how to properly destroy a player:
// Create the player and keep a reference
const player = new spine.SpinePlayer("player-container", {
// your configuration
});
// Later, when you want to destroy it:
player.dispose();
// Then you can safely remove the DOM element
document.getElementById("player-container").remove();
Important: Always call dispose() before removing the DOM element. The order matters:
- First call
player.dispose() to release WebGL resources
- Then remove the DOM element
If you're still experiencing WebGL context issues after disposing players, make sure:
- You're calling
dispose() on every player instance before creating new ones
- You're not creating more players than you actually need
- You're properly tracking all player references so you can dispose of them
The WebGL context limit varies by browser, but by properly disposing of players you shouldn't hit this limit with just 4 instances.
