• 한국어

  • How to sort Spine's skeletons by z-depth? (into canvas)

    anglais
Related Discussions

  • Base is typescript & react.

  • Engine is babylonJS & SpineRuntime.

  • I'm Created & loaded two root objects( A & B ).
    That is spineRuntime's skeletonMesh.(spine.babylonjs.SkeletonMesh).

  • A is in front of B. But 'Parts of the A' blind the 'B'.

  • I wonder why spineMeshes ignore the z value.

  • And I want to sort them by z value.

  • There was no problem when copied the same object. ( example's raptor. )
 
let rootA : spine.babylonjs.SkeletonMesh; 
let rootB : spine.babylonjs.SkeletonMesh; 
... 
rootA.position = new vector3(0,0,1); 
rootB.position = new vector3(0,0,-1);
 ...
 rootA.Setdepth(Distance to camera); 
rootB.Setdepth(Distance to camera); // or Distanc * -1

if you look rootA & B



and this is draw orders in spine project.

please help me!

Could you link me to the Babylon.js spine runtime? We do not maintain this runtime.

The Babylon.js runtime likely offsets each attachment of a skeleton on the z-axis to avoid depth issues. When drawing two skeletons, then the depths of attachment doesn't match your expectations.

I looked into the sources of the BabylonJS Spine integration.

For every attachment that is rendered for a skeleton, the z-coordinate is calculated like this:

https://github.com/klaude416/spine-runtimes/blob/3.6/spine-ts/babylonjs/src/SkeletonMesh.ts#L284

If you viewed such a skeleton from the side, you'd see this:

Image supprimée en raison de l'absence de support de HTTPS. | Afficher quand même

The gun would be drawn first, then the back leg is rendered with a bigger z-coordinate, and so on. This is required so there is no z-fighting between attachments.

If you draw 2 skeletons, those z-offsets won't result in what you expect.

You could try to make the SkeletonMesh.zOffset smaller so that attachments from Skeleton B are guaranteed to be behind the attachments of Skeleton A.

Wow!
Cool!
Crazy!
Awesome!
Really very fxxking Jesus Great!

Sorry my english is short.

Anyway thanks for your kindly and galaxitic(?) perfect answer! tttt...{t * 1000} thank you!