ThreeJS Skin attachment in animation Question

Leadreaper

Hello!

I followed the 8-directional character twitch stream and setup my character to have changing arms that are stored inside a slot with multiple skin placeholders. I then animated the arms switching from open hand to closed fist by keyframing the changing skin placeholder on the characters arm slot. Next I exported the character and tested it in threejs and the arms disappeared when the animation was played. Is there something that I am missing with spine-threejs to make the animation handle the skin placeholder changing automatically at runtime??

Please help I'm stuck :grinfake

I have this in my game loop

skeletonMesh.update(delta);
skeletonMesh.state.apply(skeletonMesh.skeleton);

Nate

Sorry for the late response!

See Skeleton setSkin. You may need to call Skeleton setSlotsToSetupPose after setting the skin. That will show what is visible in the setup pose. If you want different attachments from that visible, you'll need to set the manually (or use an animation to set them).

Leadreaper

Oh ok, Thank you very much Nate.

I have the animation keyed to switch between the Outer Arm skinPlaceholder to the Outer Arm Fist skinPlaceholder mid animation. In the editor it switches exactly how I want it to. But at runtime.. The outer arm attachment is there, until the keyed animation key switches to the fist attachments. Then the arm disappears entirely and never re-renders. I have keys to set the initial attachment as well.

This is my update loop -

skeletonMesh.update(delta);
skeletonMesh.state.apply(skeletonMesh.skeleton);
skeletonMesh.skeleton.updateWorldTransform();

The animation can hide the attachment Outer Arm but can the animation key re-render/unhide the changed attachment Outer Arm Fist? Or am I missing that I need to trigger a setAttachment VIA an event trigger or something?

I can see in the attachmentTimeline the indexes for the changing attachments.

Nate

First, see skeletonMesh.update(delta);:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/threejs/src/SkeletonMesh.ts#L100
You don't need to call apply or updateWorldTransform.

If it shows correctly in the Spine editor, it should likely work the same at runtime. You can try Skeleton Viewer and see if it works as expected there. If it does, it could be a bug in spine-ts or spine-threejs, in which case we'd need the project files so we can see the problem.

Leadreaper

Ok I changed my update function to only have "skeletonMesh.update(delta);". Thank you.

I tried another animation of torso attachments changing during animation it in the Skeleton Viewer and it seems to work fine in editor as well but then at runtime the torso disappears entirely much the the previously stated arm scenario. See Youtube vids.

Editor Setup:
https://www.youtube.com/watch?v=EZTS-ghTpfk

Torso Only Changing Attachments during animation:
https://www.youtube.com/watch?v=9NFUpfU449w

Torso Changing Attachments during animation while with other animations being mixed:
https://www.youtube.com/watch?v=2C1uq1Viq-k

Runtime - Idle and torso changing attachment animation at same time:
https://www.youtube.com/watch?v=1p5Xx5lhIxs

What exactly would you need? just my editor project file?

Nate

That's a lot of videos. 🙂 We need explanations to be able to make sense of them, as we are not familiar with your project. Which videos show the problem you are having and what exactly in each video is the problem?

In Skeleton Viewer when you play another animation, the torso chest deforms:
Loading Image
That happens because you have a mix duration of 0.3 seconds. By default attachment changes happen for the new animation right away, but your bones are not yet in position for the mesh attachment to look good. You can either turn off mixing by setting TrackEntry mixDuration to zero, or control when the attachments are changed using TrackEntry attachmentThreshold.

In your Unity video I see no torso at all. It's hard to say why that is, we'd need you to create a minimal Unity project that shows the problem. Please note we can't spend lots of time digging around in your application code, so please create the smallest Unity project that shows the issue you are having. You can send to this email address with a link to this thread: contact@esotericsoftware.com

Leadreaper

Thanks Nate. I tried messing with the attachmentThreshold but it still wasnt working to make the changing torso attachments show in the animation.

The torso doesn't show at all at runtime I am guessing because of the attachment keyframes in the torso animation . Its very strange..

I submitted a little sample project to the email that you provided. I just used the ThreeJS example and switched it to use my character with a couple options in a menu on the top right of the screen.

I am using three.JS in my project so any web browser should function with the sample.

When you open the project the character should be standing in the middle of the screen. When the idle animation is toggled on in the top right corner VIA the button the idle animation will play.

If you toggle on the torso animation however.. the torso of the character will disappear entirely. Only once you stop the torso animation and reapply the skin manually will the torso re-render to the character.

The torso animation is keyframed to switch between a set of different looking torsos for the character. Symbolizing a character gaining or losing weight. This is being played on a separate track than the idle animation and thus should have no effect on the torso animation. (The torso animation can be played without the idle and the torso still disappears.)

The other torsos can be manually applied, but I would rather manage them from an animation so that the torsos vertices can transition into the size of the next torso.

I’m not quite sure how to solve or workaround this issue and would really appreciate any guidance into the circumstance.

Nate

Thanks. A couple things:

Your applyTorso sets the setup pose attachment name. You probably don't want to do this. The setup pose attachment name is used when setToSetupPose or setSlotsToSetupPose is called.

Your applySkin sets the skin to null then sets a skin, repeatedly. This is not sensible. The only reason it sort of works is that when you set a new skin, it can leave the attachments from the old skin (see Skeleton setSkin). Later, when you apply an animation an attachment timeline tries to make an attachment visible, it looks in the skin but the skin is the last one you set and probably doesn't have the attachment. You should read the runtime code, it is not too complicated. That code is here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-core/src/Animation.ts#L1428
Note that is using Skeleton setAttachment, which you should understand.

Try something like this:

document.getElementById('applyTorso').addEventListener("click", function(){
   var skin = new spine.Skin("skin name");
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Face Details/Lagertha Face Details/Mid Skin Tone'));
   skeletonMesh.skeleton.setSkin(skin);
   skeletonMesh.skeleton.setSlotsToSetupPose();
});


function applySkin(){
   var skin = new spine.Skin("skin name");
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Skin Tones/Mid Skin Tone'));
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Face Details/Lagertha Face Details/Mid Skin Tone'));
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Hairs/Cece Hair/Light Brown Hair Color'));
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Ears/Lagertha Ear/Mid Skin Tone'));
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Noses/Lagertha Nose/Mid Skin Tone'));
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Mouths/Lagertha Mouth/Mid Skin Tone'));
   skin.addSkin(skeletonMesh.skeleton.data.findSkin('Character/Skin Tones/Mid Skin Tone'));
   skeletonMesh.skeleton.setSkin(skin);
   skeletonMesh.skeleton.setSlotsToSetupPose();
}

In applyTorso you may want to modify your skin instead of creating a new skin. If you do that, read the docs for Skeleton setSkin

you must call Skeleton updateCache if you change the skin. Also note that modifying the skin doesn't magically change the attachments in the slots. It only changes which skin Skeleton getAttachment uses to find an attachment.

Related, when you set a skin, it may not set the attachments to be visible like you want. It doesn't know which attachments you want visible, so it does as described at Skeleton setSkin. If you want something else you can either call setSlotsToSetupPose or set the attachments you want with Skeleton setAttachment or Slot setAttachment.