Most basic skeleton example

Questions
1

I’m trying to work out how to create the simplest example of a working skeleton that is not imported from a pre-created model. (aka Created purely in code js/ts). No fancy humanoid! I just want two bones that are bound to a two boxes or a single cylinder mesh to form a finger or worm.

Here is what I have so far: https://playground.babylonjs.com/#IF31BI#4

 let s = new BABYLON.Skeleton("skeletontest", "skeletonID", scene);
 let bone1 = new BABYLON.Bone("bone1", s, null)
 let bone2 = new BABYLON.Bone("bone2", s, bone1)

With just this, the skeleton is in the scene debugger, in the skeletons drop down, but I’m unable to get the skeleton debug “lines” to visually appear, so something is missing. Help! Is this because the bones need to be bound to a mesh first in order to show up in debug? Or perhaps, the bone needs position and rotation, but I can’t find examples of how to set this. The bone constructor takes a lot of different types of matrices, but I can’t find examples of how to set them. Please educate me on what the Bone constructor’s API means (what’s the difference between localMatrix, restPost matrix and baseMatrix?).

So first step, try to get my skeleton to show up in debugger. 2nd step, try to learn to layout my bones in 3d space using the proper matrices. Step 3, try to bind the bones to the vertices of the mesh I want to deform.

I can’t even get step 1 to work. Any advice?

1 Like
2

cc @bghgary but I also recommend checking out some resources on how bone animation works overrall: LearnOpenGL - Skeletal Animation, Tutorial 38 - Skeletal Animation With Assimp (ogldev.org), OpenGL Skeletal Animation Tutorial #1 - YouTube

3

Doing this by hand is difficult, especially with so many vertices for the cylinder.

Here is the most basic one I can come up with: https://playground.babylonjs.com/#IF31BI#9

You are missing a few things.

  1. The mesh.skeleton needs to be assigned to the skeleton.
  2. The localMatrix parameter of the bone is not actually optional. You must pass at least this parameter or the baseMatrix parameter for the bone to compute its matrices. We should probably update the documentation for the constructor.
  3. There must be bone indices (called MatricesIndices in Babylon.js) and bone weights (called MatricesWeights in Babylon.js) attributes for each vertex in the skinned mesh.

This just makes everything identity, so the bones don’t actually do anything, but this is where you can start.

I would suggest you start with a simpler mesh geometry to understand what is happening. Learning from the skinning section in glTF tutorials may help.

2 Likes
4

Doing this by hand is difficult, especially with so many vertices for the cylinder.

How about just a box then? Can I assign the north face to one bone and the south face to another bone?

Thanks for the playground, how can I get the skeleton to show up in the bone debugger?

5

You must bind bones to vertices, not faces. “Bones” are really just an abstraction for matrices; they describe a transformation that should be applied to the vertex. Once a skeleton is bound to the mesh (it has been “skinned”) the vertices will be transformed in the same way that the bones they’ve been mapped to are.

If affected by multiple bones, the bone weights will be used to compute a single transformation matrix for the vertex, factoring in each bone with its respective weight. Animations may however override these (IIRC).

For a better explanation, see this video: How It Works - Skeletons!

For what it’s worth, I agree that the Bone constructor’s arguments are very confusing and have in fact stumbled over them myself, as well as seen others face the same issues. Unfortunately, no one has been able to clear up what exactly all those parameters are doing and I didn’t really understand it from the source code, so I’ve been unable to add the relevant information to the documentation myself.

3 Likes
6

@bghgary @PirateJC I think we have an opportunity here to improve on the Bones documentation :smiley:

2 Likes
7

Yup sounds like it. Added an issue for it:

3 Likes
9

excuse me, is there an update to this demo.

10

Sorry, there aren’t any new examples yet.

1 Like
11

Is there any other reference for the data format reference (matricesWeights, floatIndices) that can implement bone binding to skin in Babylon?

13

By referring to threejs, I implemented a basic bone animation based on cylinder geometry, but I can’t view the bound bones through the bone viewer (basic skeleton demo )
----------------- split line ----------------
var createScene = function () {

var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 0, 10), scene);

var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 3, 180, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, false);
const segmentHeight = 30;
const segmentCount = 3;
const height = segmentHeight * segmentCount;
const halfHeight = height * 0.5;

const sizing = {
    segmentHeight,
    segmentCount,
    height,
    halfHeight
}

const cube = BABYLON.MeshBuilder.CreateCylinder("body", {
    height,
    diameterTop: 10,
    diameterBottom: 6,
    subdivisions: segmentCount
}, scene);
const material = new BABYLON.StandardMaterial('cube-mtl');
cube.material = material;
material.wireframe = true;

const vertexTotal = cube.getTotalVertices();
const vertixData = cube.getVerticesData(BABYLON.VertexBuffer.PositionKind);
const indicesMatrix = [];
const weightMatrix = [];

let vertex = BABYLON.Vector3.Zero();

for (let i = 0; i < vertexTotal; i++) {
    BABYLON.Vector3.FromArrayToRef(vertixData, 3 * i, vertex);
    const y = (vertex.y + sizing.halfHeight);
    const skinIndex = Math.floor(y / sizing.segmentHeight);
    const skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight;
    indicesMatrix.push(skinIndex, skinIndex + 1, 0, 0);
    weightMatrix.push(1 - skinWeight, skinWeight, 0, 0);
}
// console.log(indicesMatrix,weightMatrix)
cube.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, new Float32Array(indicesMatrix));
cube.setVerticesData(BABYLON.VertexBuffer.MatricesWeightsKind, new Float32Array(weightMatrix));
let skeleton = new BABYLON.Skeleton("skeletontest", "skeletonID", scene);
let bone1 = new BABYLON.Bone("bone1", skeleton, null, BABYLON.Matrix.Identity())
let bone2 = new BABYLON.Bone("bone2", skeleton, bone1, BABYLON.Matrix.Identity())
let bone3 = new BABYLON.Bone("bone3", skeleton, bone2, BABYLON.Matrix.Identity())
let bone4 = new BABYLON.Bone("bone4", skeleton, bone3, BABYLON.Matrix.Identity())
bone2.position.y = segmentHeight;
bone3.position.y = segmentHeight;
bone4.position.y = segmentHeight;



cube.skeleton = skeleton;
const viewer = new BABYLON.Debug.SkeletonViewer(cube.skeleton, cube, scene, false, 3, {
    displayMode: BABYLON.Debug.SkeletonViewer.DISPLAY_SPHERE_AND_SPURS
});
viewer.isEnabled = true;
scene.registerBeforeRender(() => {
    skeleton.bones[0].rotate(BABYLON.Axis.Z, .001);
    skeleton.bones[1].rotate(BABYLON.Axis.Z, .001);
    skeleton.bones[2].rotate(BABYLON.Axis.Z, .001);
    skeleton.bones[3].rotate(BABYLON.Axis.Z, .001);
})
return scene;

}

14

Navigating through the skeleton viewer, I see this bone direction (which is the subtraction of a bone anchor point with its child) is a zero vector in your example: Babylon.js/skeletonViewer.ts at master · BabylonJS/Babylon.js (github.com). I’m not very experienced with bone animation math, so I’ll loop @bghgary in to see if that’s something that makes sense or not.

15

Unfortunately, due to performance reasons, bone positions cannot be set the way you are doing it. The bone position has to be set as a property (see update PG below). I also changed it to show lines since I think spheres and spurs won’t show correctly with an identity bone matrix.

PG: https://playground.babylonjs.com/#D4ZZ8#358

1 Like
16

I’ve been studying the awesome playgrounds above and also deep diving into what the babylon file loader does when parsing a serialized scene. My thinking was that if I could understand how babylon was creating the mesh and skeleton from a string, then maybe I could understand how to do it with the babylon skeleton apis.

But I’m still stuck trying to understand the vertex weighting and especially the vertex matrix indexing.

First, I tried to be very precise when creating the blender file. A default cube is 2M in all dimensions, I scaled it 6M high, applied all transformations, did a loop cut 5 times to add segments, created an armature (bone), (by default it “faces” up, so I left it that way). divided that 5 times and placed it perfectly inside the cubes by setting lengths to 2 then bound mesh and armature with automatic weighting. I exported this blender scene to .babylon file using the plugin and in the playground below I pasted the raw data into the source so that we can inspect what babylon is parsing.

Next I tried to reproduce an exact mesh using the babylon mesh builder. The createBox MeshBuilder does not have an option to segment the box, but it turns out you can use a cylinder (which has an option to create segments) and reduce the tessellation to 4, which will create a box like column.

In the following playground you will see two “boxes” side by side. One is created by parsing the serialized data that comes from blender. The 2nd one is created manually using babylon mesh builder.
https://playground.babylonjs.com/#HFWCMJ#1

It turns out creating the skeleton and making it appear in the mesh isn’t the hard part. Indeed it turns out if you use an identity matrix on the 2nd bone on… then the Sphere and Spurs display does not appear. But if you pass it a translated matrix the sphere and spur display appears (and that’s what the blender export is providing the Skeleton Parse method). But it also seems like the skeleton is only responsible for some hierarchy information. It doesn’t describe how it is influencing the mesh. That heavy lifting seems to be on the mesh itself.

The .babylon serialization for a mesh contains two keys probably related to this: matricesWeights and matricesIndices.

The length of the matricesIndices array matches the total vertex count (110) of the imported mesh, so my intuition tells me that the matricesIndices should specify something regarding each vertex in the mesh, but I can’t make heads or tails of what the value means. The values are all integers, and out of the 110 length array, there are only 7 unique values used:

[...new Set(data.meshes[0].matricesIndices)] => [4, 1027, 0, 256, 131328, 197121, 262914]

But why 7? There are 5 bones, so if you wanted to specify that you were under the influence of one of those bones, you could just use index into the skeleton hierarchy. But… that wouldn’t be sufficient to indicate that a vertex is under the influence of multiple bones… for that the value needs to represent a spread of choices… maybe… :person_shrugging: I can’t figure it out. Does anyone know?

matricesWeights is also an interesting array. The length is 4 times the length of the vertex count. After watching the babylon video on skeletons, I’m told that the default weighting of bones is “up to 4” (but can be “pushed to 8”). So I’m guessing that this array is telling me the distribution of weights for each vertex on 4 bones. But which 4 bones? I have 5 bones, so how do these weights correspond to the right bones in the hierachy? That must be what the matricesIndices number is about. Also interesting is that if you look at the array in batches of 4, the last number is always 0, while the first 3 are the only ones used and always add up to nearly 1. This observation seems to correlate with the numBoneInfluences = 3 in the imported data. :person_shrugging:

What do these numbers mean? :pray:

17

I couldn’t find the source code that actually slurps in the matricesIndices part of the .babylon file. If someone can point me there that would be helpful.

After looking at these mysterious numbers a bit longer like a crazy person, there is something suspicious about them. Like they feel like they have some binary encoding, so I printed out the matricesIndices values along side it’s corresponding matricesWeights and noticed that small values like “0” and “4” only ever had contribution from one position in the weights array.

“0” could mean all my influence comes from bone with index 0. And corresponding weights only come from one of the 4 positions: [0.98, 0, 0, 0]

“4” could mean all my influence comes from bone with index 4. And weight looks like: [0.98, 0, 0, 0]

“256” in binary is 00000001 00000000 which could mean my influence is bones with index 1 and 0, with weight example: [0.91, 0.08, 0, 0]

“1027” in binary is 00000100 00000011, which could mean my influence is bones with index 4 and 3. with weight example: [0.08, 0.91, 0, 0]

131328 in binary is 00000000 00000010 00000001 00000000 … which, ignoring the leading zeros could mean influence from indexes of 2, 1 and 0. Sample weight: [0.09, 0.82, 0.08, 0]

197121 in binary is 00000000 00000011 00000010 00000001, ignoring leading zeros is 3,2,1. Sample weight: [0.08, 0.82, 0.08, 0]

262914 in binary is 00000000 00000100 00000011 00000010, ignoring leading zeros is 4, 3, 2. Sample weight: [0.08, 0.82, 0.09, 0]

hmmmmm… :mag:

18

Ok I think I figured it out.

Here’s an updated playground with weights that I have manually set:

https://playground.babylonjs.com/#HFWCMJ#2

Through experimentation, the way I think it works is that for each vertex on the mesh you create a sort of mapping like this:

index = [0, 1, 2, 0];
weight = [0.25, 0.7, 0.05, 0];

These mappings need to have a width of length 4, but not every “slot” needs to be meaningful. In the first array you can put the indexes of the skeleton in any positions of that array, again specifying up to 4. Then in the subsequent weights array fill in the influence of each position, to turn the bone influence up or down, corresponding to the value in the first array.

So this:

 index = [0, 0, 0, 0];
 weight = [0, 0, 1, 0];

does the same thing as this

 index = [0, 1, 2, 3];
 weight = [1, 0, 0, 0];

Because they both say, bone at index 0 in the skeleton is turned up to 100%.

Finally flatten all the mappings into 2 arrays and load them into the mesh. Please let me know if I got anything wrong.

19

Yes, you got it right :slight_smile:

The matrix indices list all the bone indices that influence a given vertex, and the matrix weights give the relative weight of each bone for that vertex. The sum of all weights must equal 1. As you discovered, if a vertex is influenced by less than 4 bones, you must set some weights to 0 to account for this.

20

Here’s an attempt for further improvement on this: the weights are assigned by proximity of bones to vertices.

Code 
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 3, 40, BABYLON.Vector3.Zero(), scene);
// camera.attachControl(canvas, false);

// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;


        const segmentHeight = 2;
        const segmentCount = 6;
        const height = segmentHeight * segmentCount;
        const halfHeight = height * 0.5;
    
        const sizing = {
            segmentHeight,
            segmentCount,
            height,
            halfHeight
        }


// make skeleton

const skeleton = new BABYLON.Skeleton("skel", "skelid", scene)

// is this line needed?
// skeleton.dimensionsAtRest = BABYLON.Vector3.FromArray([0,10,0])

const im = BABYLON.Matrix.Translation(0, 2, 0); //x,y,z

var bones = [];
bones[0] = new BABYLON.Bone("b0", skeleton, null, BABYLON.Matrix.Translation(0, -5, 0))

for (var i=1; i<segmentCount-1; i++) {
  bones[i] = new BABYLON.Bone("b"+i, skeleton, bones[i-1], im)
}

// setting length on the bones doesn't seem to make a difference
// ba.length = 2;
// bb.length = 2;
// bc.length = 2;
// bd.length = 2;
// be.length = 2;


const mesh = BABYLON.MeshBuilder.CreateCylinder("mesh", {
    height: height,
    diameterTop: 3,
    diameterBottom: 3,
    subdivisions: segmentCount,
    tessellation: 4,
}, scene);


mesh.rotation.y = BABYLON.Angle.FromDegrees(45).radians()

let vertex = BABYLON.Vector3.Zero();

const vertexData = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);

const indicesMatrix = []
const weightMatrix = []
const totalVertexCount = mesh.getTotalVertices();
    
        for (let i = 0; i < totalVertexCount; i++) {
            BABYLON.Vector3.FromArrayToRef(vertexData, 3 * i, vertex);
            //const y = (vertex.y + sizing.halfHeight)/segmentCount*(segmentCount-1);
            let d;
            let indx = [0,0,0,0];
            
            for (let j=0; j<bones.length; j++) {
              const l = bones[j].getAbsolutePosition().subtract(vertex).length();
              
              if (j == 0 || l < d) {
                d = l;
                indx[3] = indx[2];
                indx[2] = indx[1];
                indx[1] = indx[0];
                indx[0] = j;
              }
            }
            
            console.log(i + ' ' + indx.join(','));

            indicesMatrix.push(indx[0], indx[1], indx[2], indx[3]);
            weightMatrix.push(0.8, 0.16, 0.032, 0.0064);
        }

mesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, new Float32Array(indicesMatrix));
mesh.setVerticesData(BABYLON.VertexBuffer.MatricesWeightsKind, new Float32Array(weightMatrix));


window.mesh = mesh;


mesh.skeleton = skeleton;
var t = 0;

        scene.registerBeforeRender(function () {
    
    			/*skeleton.bones[0].rotate(BABYLON.Axis.Z, Math.sin(t/1000), BABYLON.Space.WORLD, mesh);
    			skeleton.bones[1].rotate(BABYLON.Axis.Z, Math.sin(t/1000), BABYLON.Space.WORLD, mesh);
    			skeleton.bones[2].rotate(BABYLON.Axis.Z, Math.sin(t/1000), BABYLON.Space.WORLD, mesh);*/

           for (let i = 0; i < skeleton.bones.length; i++) {
             skeleton.bones[i].setAxisAngle(BABYLON.Axis.Z, Math.sin(t/100)/2);
           }

           t++;
    			
    		});

// this is an export from blender just to compare
const data = {
    "producer": { "name": "Blender", "version": "3.5.1", "exporter_version": "3.3.1", "file": "boxwithbones.babylon" },
    "autoClear": true, "clearColor": [0.0509, 0.0509, 0.0509], "gravity": [0, -9.81, 0],
    "skeletons": [{
        "name": "Armature", "id": 0, "dimensionsAtRest": [0, 10, 0], "bones": [
            { "name": "a", "index": 0, "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, -5, 0, 1], "rest": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, -5, 0, 1], "parentBoneIndex": -1, "length": 2 },
            { "name": "b", "index": 1, "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "rest": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "parentBoneIndex": 0, "length": 2 },
            { "name": "c", "index": 2, "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "rest": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "parentBoneIndex": 1, "length": 2 },
            { "name": "d", "index": 3, "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "rest": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "parentBoneIndex": 2, "length": 2 },
            { "name": "e", "index": 4, "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "rest": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1], "parentBoneIndex": 3, "length": 2 }]
    }],
    "meshes": [{
        "name": "Cube", "id": "Cube", "billboardMode": 0, "position": [0, 5, 0], "rotation": [0, 0, 0], "scaling": [1, 1, 1], "isVisible": true, "isEnabled": true, "pickable": false, "skeletonId": 0, "numBoneInfluencers": 3
        , "positions": [-1, 6, -1, -1, 4, 1, -1, 4, -1, -1, 6, 1, 1, 4, 1, -1, 4, 1, 1, 6, 1, 1, 4, -1, 1, 4, 1, 1, 6, -1, -1, 4, -1, 1, 4, -1, 1, -6, 1, -1, -6, -1, -1, -6, 1, -1, 6, 1, 1, 6, -1
            , 1, 6, 1, 1, -4, -1, -1, -6, -1, 1, -6, -1, 1, -2, -1, -1, -4, -1, 1, 0, -1, -1, -2, -1, 1, 2, -1, -1, 0, -1, 1, 4, -1, -1, 2, -1, 1, -4, 1, 1, -6, -1, 1, -6, 1, 1, -2, 1, 1, -4, -1
            , 1, 0, 1, 1, -2, -1, 1, 2, 1, 1, 0, -1, 1, 4, 1, 1, 2, -1, -1, -4, 1, 1, -6, 1, -1, -6, 1, -1, -2, 1, 1, -4, 1, -1, 0, 1, 1, -2, 1, -1, 2, 1, 1, 0, 1, -1, 4, 1, 1, 2, 1
            , -1, -4, -1, -1, -6, 1, -1, -6, -1, -1, -2, -1, -1, -4, 1, -1, -4, -1, -1, 0, -1, -1, -2, 1, -1, -2, -1, -1, 2, -1, -1, 0, 1, -1, 0, -1, -1, 2, 1, -1, 2, -1, -1, 6, 1, 1, 6, 1, 1, 6, -1
            , -1, 6, -1, -1, 4, -1, 1, -6, -1, -1, 6, 1, -1, 6, -1, 1, 6, -1, -1, -6, -1, 1, 4, -1, -1, 4, -1, 1, -4, -1, 1, -6, -1, 1, -2, -1, 1, -4, -1, 1, 0, -1, 1, -2, -1, 1, 2, -1, 1, 0, -1
            , 1, 4, 1, 1, 2, -1, 1, -4, 1, 1, -6, 1, 1, -2, 1, 1, -4, 1, 1, 0, 1, 1, -2, 1, 1, 2, 1, 1, 0, 1, -1, 4, 1, 1, 2, 1, -1, -4, -1, -1, -4, 1, -1, -6, 1, -1, -2, -1, -1, -2, 1
            , -1, -4, 1, -1, 0, -1, -1, 0, 1, -1, -2, 1, -1, 2, -1, -1, 2, 1, -1, 0, 1, -1, 2, 1]
        , "normals": [-1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0
            , 0, 1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0
            , 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1
            , -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 0, 1, 1, 0, 0
            , 0, 0, -1, 0, 0, -1, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0
            , 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0
            , -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0]
        , "uvs": [0.625, 0, 0.583, 0.25, 0.583, 0, 0.625, 0.25, 0.583, 0.5, 0.583, 0.25, 0.625, 0.5, 0.583, 0.75, 0.583, 0.5, 0.625, 0.75, 0.583, 1, 0.583, 0.75, 0.375, 0.5, 0.125, 0.75, 0.125, 0.5, 0.875, 0.5, 0.625, 0.75, 0.625, 0.5, 0.417, 0.75, 0.375, 1, 0.375, 0.75, 0.458, 0.75, 0.417, 1, 0.5, 0.75, 0.458, 1
            , 0.542, 0.75, 0.5, 1, 0.583, 0.75, 0.542, 1, 0.417, 0.5, 0.375, 0.75, 0.375, 0.5, 0.458, 0.5, 0.417, 0.75, 0.5, 0.5, 0.458, 0.75, 0.542, 0.5, 0.5, 0.75, 0.583, 0.5, 0.542, 0.75, 0.417, 0.25, 0.375, 0.5, 0.375, 0.25, 0.458, 0.25, 0.417, 0.5, 0.5, 0.25, 0.458, 0.5, 0.542, 0.25, 0.5, 0.5, 0.583, 0.25
            , 0.542, 0.5, 0.417, 0, 0.375, 0.25, 0.375, 0, 0.458, 0, 0.417, 0.25, 0.417, 0, 0.5, 0, 0.458, 0.25, 0.458, 0, 0.542, 0, 0.5, 0.25, 0.5, 0, 0.542, 0.25, 0.542, 0, 0.625, 0.25, 0.625, 0.5, 0.625, 0.75, 0.625, 1, 0.583, 1, 0.375, 0.75, 0.875, 0.5, 0.875, 0.75, 0.625, 0.75, 0.375, 1
            , 0.583, 0.75, 0.583, 1, 0.417, 0.75, 0.375, 0.75, 0.458, 0.75, 0.417, 0.75, 0.5, 0.75, 0.458, 0.75, 0.542, 0.75, 0.5, 0.75, 0.583, 0.5, 0.542, 0.75, 0.417, 0.5, 0.375, 0.5, 0.458, 0.5, 0.417, 0.5, 0.5, 0.5, 0.458, 0.5, 0.542, 0.5, 0.5, 0.5, 0.583, 0.25, 0.542, 0.5, 0.417, 0, 0.417, 0.25, 0.375, 0.25
            , 0.458, 0, 0.458, 0.25, 0.417, 0.25, 0.5, 0, 0.5, 0.25, 0.458, 0.25, 0.542, 0, 0.542, 0.25, 0.5, 0.25, 0.542, 0.25]
        , "matricesWeights": [0.98, 0, 0, 0, 0.08, 0.91, 0, 0, 0.08, 0.91, 0, 0, 0.98, 0, 0, 0, 0.08, 0.91, 0, 0, 0.08, 0.91, 0, 0, 0.98, 0, 0, 0, 0.08, 0.91, 0, 0, 0.08, 0.91, 0, 0, 0.98, 0, 0, 0, 0.08, 0.91, 0, 0, 0.08, 0.91, 0, 0, 0.98, 0
            , 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.91, 0.08, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0
            , 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.91, 0, 0, 0.08, 0.82, 0.09, 0, 0.91, 0.08, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82
            , 0.08, 0, 0.08, 0.91, 0, 0, 0.08, 0.82, 0.09, 0, 0.91, 0.08, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.91, 0, 0
            , 0.08, 0.82, 0.09, 0, 0.91, 0.08, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.82
            , 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.09, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.08, 0.91, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0, 0.98, 0, 0, 0
            , 0.08, 0.91, 0, 0, 0.08, 0.91, 0, 0, 0.91, 0.08, 0, 0, 0.98, 0, 0, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.91, 0, 0, 0.08, 0.82, 0.09, 0, 0.91, 0.08
            , 0, 0, 0.98, 0, 0, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.91, 0, 0, 0.08, 0.82, 0.09, 0, 0.91, 0.08, 0, 0, 0.91, 0.08, 0, 0, 0.98, 0, 0, 0
            , 0.09, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.91, 0.08, 0, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.82, 0.08, 0, 0.09, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.09, 0, 0.08, 0.82, 0.08, 0, 0.08, 0.82, 0.09, 0]
        , "matricesIndices": [4, 1027, 1027, 4, 1027, 1027, 4, 1027, 1027, 4, 1027, 1027, 0, 0, 0, 4, 4, 4, 256, 0, 0, 131328, 256, 197121, 131328, 262914, 197121, 1027, 262914, 256, 0, 0, 131328, 256, 197121, 131328, 262914, 197121, 1027, 262914, 256, 0, 0, 131328, 256, 197121, 131328, 262914, 197121, 1027
            , 262914, 256, 0, 0, 131328, 256, 256, 197121, 131328, 131328, 262914, 197121, 197121, 262914, 262914, 4, 4, 4, 4, 1027, 0, 4, 4, 4, 0, 1027, 1027, 256, 0, 131328, 256, 197121, 131328, 262914, 197121, 1027, 262914, 256, 0, 131328, 256, 197121, 131328, 262914, 197121, 1027, 262914, 256, 256, 0
            , 131328, 131328, 256, 197121, 197121, 131328, 262914, 262914, 197121, 262914]
        , "indices": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 18, 23, 24, 21, 25, 26, 23, 27, 28, 25, 29, 30, 31, 32, 33, 29, 34, 35, 32, 36, 37, 34, 38, 39, 36, 40, 41, 42
            , 43, 44, 40, 45, 46, 43, 47, 48, 45, 49, 50, 47, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 2, 63, 64, 0, 65, 1, 3, 66, 4, 6, 67, 7, 9, 68, 69, 12, 70, 13, 71, 72, 73, 18, 22, 74, 21, 24, 22
            , 23, 26, 24, 25, 28, 26, 75, 76, 28, 29, 77, 78, 32, 79, 80, 34, 81, 82, 36, 83, 84, 85, 7, 86, 40, 87, 88, 43, 89, 90, 45, 91, 92, 47, 93, 94, 95, 4, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108
            , 2, 1, 109]
        , "subMeshes": [{ "materialIndex": 0, "verticesStart": 0, "verticesCount": 110, "indexStart": 0, "indexCount": 156 }]
        , "instances": []
    }
    ]
}

window.data = data

BABYLON.SceneLoader.Append('', `data: ${JSON.stringify(data)}`, scene, () => {
    const cube = scene.getMeshByName("Cube");
    cube.position.x += 4 // move it over so we can see both

    const viewer = new BABYLON.Debug.SkeletonViewer(cube.skeleton, cube, scene, false, 3, {
        displayMode: BABYLON.Debug.SkeletonViewer.DISPLAY_SPHERE_AND_SPURS,
    });
    try {
        new BABYLON.Debug.SkeletonViewer(mesh.skeleton, mesh, scene, false, 3, {
            displayMode: BABYLON.Debug.SkeletonViewer.DISPLAY_SPHERE_AND_SPURS,
        });

        let shader = BABYLON.Debug.SkeletonViewer.CreateSkeletonMapShader({ skeleton: mesh.skeleton }, scene)

        mesh.material = shader

    } catch (e) {
        console.error(e)
    }
    viewer.isEnabled = true

})



return scene;

(Sorry, I know how to use the playground but can not copy/paste into it from the ipad - maybe there should be a file uploader)

2 Likes