Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

ThreeJS alpha issue when moving asset

pase

Hello,

We are facing an alpha rendering issue when importing a Spine animation into Three.js.

Our scene consists of multiple layers, each being a succession of meshes with a slight Z offset to avoid collisions. We have:

A background layer,
A border layer,
A Spine layer, which is in the foreground.
The issue is that the Spine layer incorrectly masks the other layers, as if it does not respect proper transparency sorting. We have tried several adjustments based on similar issues, including:

depthWrite: false
alphaTest: 0.5
Enabling/disabling premultipliedAlpha, both in the editor and in our code.
change blending mode to additive, multiply,.. both in the editor and in the code
Despite these attempts, we are still experiencing layering and transparency rendering issues.

Do you have any suggestions or insights on what might be causing this behavior?

Thanks in advance for your help!

Spinebot

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

Spinebot hello, we already test with a zOffset higher and we have the same issue of layering conflict, and other advices too !

Davide

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

Davide Hello Davide, thanks for your reply, we created this sandbox to shared the project to you, versions are write in the package.json 🙂
https://codesandbox.io/p/devbox/pass-through-portals-forked-7l3ql9?file=%2Fsrc%2FApp.js

Davide

pase

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 !