ThreeJS alpha issue when moving asset

Davide

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

Davide

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

Djauron

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?

Davide

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

Davide

I updated the sandbox with const assetManager = new spine.AssetManager(baseUrl, undefined, true)which improved the line issue significantly (though they're still slightly visible), but the colors still don't match what I saw in my previous video (using spine player)
https://codesandbox.io/p/devbox/pass-through-portals-forked-7l3ql9

Djauron

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

wrong sandbox updated 😅

Davide

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.

Djauron

Davide

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

Djauron

The result 😉

Davide

Djauron

Super cool! Thanks for sharing this 🙂

Davide

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.

Djauron

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 !