• RuntimesBugs
  • ThreeJS alpha issue when moving asset

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?

  • Davide ha risposto a questo messaggio

    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 ha risposto a questo messaggio
      • Modificato

      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

        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 ha risposto a questo messaggio

          Davide

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

          The result 😉

          • Davide ha risposto a questo messaggio

            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.

            • Djauron ha risposto a questo messaggio

              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 !