How to solve some issues for 2D animation?

[kutu]

Hello,

I'm looking to make a 2D skeletal animation exported from Blender to GLTF and playing it in Pixi3D.

I have found this blog post from gskinner website, Matthew created a simple 2D skeletal animation and imported it into three.js

This is the main part of code I use to render it on the screen:

Camera.main.orthographic = true;
Camera.main.orthographicSize = 3;

Assets.add('gltf', 'img/Skeleton_Final.glb');
gltf = Model.from((await Assets.load('gltf')));
gltf.meshes.forEach(function(m) {
  return m.material.unlit = true;
});
gltf.position.set(0, -2, 0);

this.addChild(gltf);

anim = gltf.animations[0];
anim.loop = true;
anim.play();

Using original GLB file from repository mentioned in blog post.

• animation is playing
• right hand is not rendering (because material not set to double-side)
• some mesh parts overlap with proper alpha transparency and some cut by mesh

Then I decided to reexport it from Blender 3.4.

• I created new Blender file
• "Append" meshes, material, image, animation into my new file
• update material to mix Image + Transparent BSDF, to make material unlit (so don't need to write it in code)
  
• I can't make animation to play (animation is not exported from Blender)
• trying to solve alpha issues by moving meshes by Y axis slightly, sometimes it solves some places, but might break others
• right hand is visible now

Comparing GLTF data in devtool console (not sure if this is correct observations)

Left - Original, Right - My new file

• animation has 39 channels vs 48
• meshes' attributes has 6 channels vs 4
• 15 skins vs 1

In Blender docs they say about export animation

An action will be exported if it is the active action on an object, or it is stashed to an NLA track (e.g. with the Stash or Push Down buttons in the Action Editor)

I did "stash" it, but I guess something is still wrong.

I put glb gltf and blender file into zip
SkeletalAnimationFromBlender.zip
Skeleton_Final.glb - original file form repository
04_Skeleton_Final_.gltf - export from my new Blender file
04_Skeleton_Final_.blend - my new Blender file

I think Blender+GLTF+Pixi3D could be an alternative of Spine. Just need to find a proper workflow.

Maybe you will be interested to make this as an example of how this can be done for 2D and put it in your "Examples" list.

Thanks.

[jnsmalm]

I think I have a solution for you. I downloaded the "skeleton_final.glb" file from that blog post, didn't do any additional changes to it. Set doubleSided = true for all materials so they can be seen.

You have two choices for dealing with the alpha order issue:

1. Set alphaMode of the materials to "mask", it will work but you will loose the soft edges of the png.
2. Order the meshes yourself until it looks good, you can see example of this below.

Hope you are fine with some TypeScript.

// To get the names of all the meshes in the model
console.log(model.meshes.map(m => m.name))

let renderSortOrderMap: { [name: string]: number } = {
  "LeftForearmMesh": 1,
  "LeftArmMesh": 2,
  "LeftHandMesh": 3
}

const okWithJaggedEdges = false

model.meshes.forEach(mesh => {
  let material = mesh.material as StandardMaterial
  if (okWithJaggedEdges) {
    material.alphaMode = StandardMaterialAlphaMode.mask
  } else {
    mesh.renderSortOrder = renderSortOrderMap[mesh.name] || 0
  }
  material.unlit = true
  material.doubleSided = true
})