Most basic skeleton example

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:

 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?

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 (, OpenGL Skeletal Animation Tutorial #1 - YouTube

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:

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.


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?

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.


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


Yup sounds like it. Added an issue for it:


excuse me, is there an update to this demo.

Sorry, there aren’t any new examples yet.

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

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 = {

const cube = BABYLON.MeshBuilder.CreateCylinder("body", {
    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;


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 ( 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.

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.


1 Like