Artefacts when rendering Spine character using spine-canvas.

haseeb936

Hi I am using spine-canvas in my Next.js project to render spine character. There are artefactes that are rendering like map or bones on the character. Since there is not much documentation about it can you guys help on this or if this is a known issue?

Spinebot

The artifacts you are experiencing when using spine-canvas are likely due to its limitations, particularly with rendering meshes. The spine-ts Canvas backend does not support meshes by default, which can lead to rendering issues such as artifacts. You can enable experimental support for meshes by setting spine.canvas.SkeletonRenderer.useTriangleRendering to true, but this method is slow and may cause artifacts on some browsers. It is generally recommended to use the spine-ts Player, WebGL backend, or pixi-spine for better performance and compatibility.

haseeb936

I am using use triangleRedering = true. What about the spine-canvasKit is that something that can be used I was trying to use it in Next but the Canvas Kit I think is ment for a node environment doesn't work in Next causing fs module issues. I was trying to Avoid Pixi as we are already use Phaser for game. Pixi makes it more resource intensive specially on mobile.

Davide

spine-canvas does not support meshes, and the visual issues you're seeing highlight its limitations.
If you don’t need a full-featured rendering library like PixiJS or Phaser, consider using spine-webgl, spine-player, or the new spine-webcomponents. The last two are built ont top of spine-webgl.

spine-webgl is our lightweight but complete WebGL-based solution that supports all Spine features directly in the browser.
spine-player is a robust, battle-tested library that includes a UI and offers higher-level control over your skeletons. Note: using > 4 Spine players on a single page may hit the browser's WebGL context limit.
spine-webcomponents is our Web Component-based solution that lets you embed any number of Spine animations directly in HTML. Example:

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

If you describe your use case in more detail, we can help determine which option is most suitable for your needs.