The issue you're experiencing with alpha rendering in Three.js when importing a Spine animation could be related to z-fighting or improper transparency sorting. Based on similar issues, you might want to try increasing the SkeletonMesh.zOffset value to ensure that the Spine layer is properly offset from other layers. This can help avoid z-fighting, which occurs when two or more objects are rendered at the same depth. Additionally, ensure that your scene's depth buffer is configured correctly for the depth of your scene. If you haven't already, you might also want to check if the alpha blending settings are consistent across your assets and runtime, especially regarding premultiplied alpha.

pase

Hello

Could you share a minimal reproduction project of your issue? Unfortunately, I'm not able to reproduce it
Could you also share with us the exact versions of ThreeJS and spine-threejs you are using?

pase

Thx for sharing this! I'll go through that as soon as possible and let you know our findings ️

The issue seems to be more complicated than I expected.
The problems seems to be caused by the need of more than a batch due to the high number of vertices.
In your skeleton there is a high number of vertices due to the clipping attachment.
As a workaround you could temporarely remove the clipping attachment until I find a suitable solution for the issue.

I've created an github issue for this: EsotericSoftware/spine-runtimes2754

Hey Davide, thanks for your response to our issue.
I also noticed that we had quite a few black lines in the hair area that we managed to remove with alphaTest (but this also reduces the lines on the mouth and other effects).
Also, the color is completely different from when we use spine-player (which gives us the true colors). What could be causing this?

Djauron

I'll write more about the finding of the main issue you reported here tomorrow.

But regarding the colors and black lines, since you have exported premultiplied textures, you have to enable premultiply alpha in the asset manager:

const assetManager = new spine.AssetManager(baseUrl, undefined, true)

Djauron
https://codesandbox.io/p/sandbox/spine-threejs-forked-6vrj76

wrong sandbox updated

Djauron

There's actually a bug in spine-threejs that might lead to the darker color you are seeing.
Since you are not using tint black, you can avoid the issue setting twoColorTint:false.

const skeletonMesh = new spine.SkeletonMesh({
  skeletonData: SkeletonData,
  twoColorTint: false,
  materialFactory: (parameters) => new THREE.MeshBasicMaterial(parameters),
});

Then, I've notice the @react-three/fiber use different defaults for the webgl renderer: see here.

The default toneMapping = THREE.ACESFilmicToneMapping is the reason why you still see lines around mesh borders. To put the default value for tome mapping (THREE.NoToneMapping), set flat={true} as canvas property.

 <Canvas flat={true} ... >

Let me know if it is rendered as expected.

Davide

Using twoColorTint:false and flat={true} solve the problem, thanks a lot !

The result

Djauron

Super cool! Thanks for sharing this

If you are interested on what was causing the issue you reported initially, here you can find the analysis.

Regarding the wrong colors you had with default parameters (twoColorTint: true), I've just commited a fix.
However, since you are not using tint black in your skeleton, I would recommend to keep twoColorTint: false since it uses less vertices to send to the GPU.

Davide

Hey

Thanks for the response, we'll set twoColorTint to false
Yes, it seems quite complicated for this issue so we've increased MAX_VERTICES with a patch (it'll be more challenging for low-end devices)

Thanks !