Simple Bone Example

[Densaugeo]

I have been trying to make an object move using a bone without any success for a while. All of the examples I've found so far use different versions of Babylon or complicated models that are difficult to work with.

Most of them are based on http://www.babylonjs.com/Demos/BONES/ but when I try to run it locally I can only get a white screen. It seems to be using Babylon 2.5 alpha, while the most recent tag in Github is 2.4. Also, it doesn't include any examples of programmatically making bones, and the example models are large and it is hard to figure out how the bones, matrices, indices, etc. are all connected.

Does anyone know of a simpler example? Ideally I'd like one in the current release version of Babylon, with a single animated bone and <10 vertices (an animated cube, maybe). I've tried exporting a cube with a bone from Blender, but no luck.

[gryff]

3 hours ago, Densaugeo said:

a single animated bone and <10 vertices (an animated cube, maybe). I've tried exporting a cube with a bone from Blender, but no luck.

@Densaugeo: well here is a PlayGround with a simple rigged cube (made in Blender). Code away to your heart's delight

The .babylon file, so you can examine it, is in this zip file:

cube_rig.zip

cheers, gryff

[Densaugeo]

I am missing something...how do I make it move? The bone doesn't appear to have a position property, and .updateMatrix() doesn't do anything.

[gryff]

3 hours ago, Densaugeo said:

I am missing something...how do I make it move?

@Densaugeo : I make it move in Blender - not by coding it manually.

 

3 hours ago, Densaugeo said:

The bone doesn't appear to have a position property, and .updateMatrix() doesn't do anything.

Here is an animated version of the above cube/rig :

cube_rig_anim.zip

If you look in both files you will see a line:

{"name":"Bone","index":0,"matrix":[1,0,0,0,0,1,0,0,0,0,-1,0,0,0,0,1],"rest":[1,0,0,0,0,1,0,0,0,0,-1,0,0,0,0,1],"parentBoneIndex":-1,"length":2

In the animated version you will see that the values in "matrix":[1,0,0,0,0,1,0,0,0,0,-1,0,0,0,0,1] are changing with each frame. That matrix contains the position, rotation and I believe scaling information

I'm not a coder and my knowledge of matrices is essentially zero, so how you do this manually ... you need the coding experts.

Sorry I can not help you more.

cheers, gryff

Edit: Any idea @Wingnut : who might be able to help?

[Densaugeo]

Yes, I do need a way to set the bone's position programmatically. A predefined animation won't work.

Thanks anyway.

[Wingnut]

I'm with ya, @Densaugeo.  I have been wanting a simple programmatic bones/skeletons demo for some time.  I don't think I have ever assisted in a forum question about bones/skeletons, because I just don't understand them.  And I hear... bones aren't real mesh.  But I HAVE seen some people use linesMesh... to show where the bones are... in a "rigged" model.

This subject is related to another pondering.  Is a forum about a 3D framework... the right place to teach about modeling?  And is it also a place to teach about JS?  How about canvases and context2D?  What about math?  The GUI?  The HTML?  Should people be fluent in OpenGL before they even start to attempt webGL?

What happened was... webGL opened a TON of doors to 3D graphics... that were not available prior to its easy incorporation into modern browsers.  When that door opened, many many people came rushing-in.... excited... enthusiastic.  Our little "skeleton" crew of helpers... left a few of thousand of them... with un-answered questions.  A solid 40% of those questions... are only slightly "related" to webGL.  At some point, one has to ask one's self... "to what end?"  People dream BIG BIG BIG... and we really want to have everyone be successful in their pursuits of those big dreams... but it is very difficult to cover all the bases.

In various places on the forum, we have taught it all, and learned a little bit about it all... but are we doing these subjects justice?  This forum has an all-volunteer custodian crew, and it's certainly not a huge crew.  So, in many cases, we have to try to avoid overwhelming the helpers AND the learners.  Then, we have the language gaps, because we are an international forum.

It's a monumental "service" that we all try to accomplish, here.  We know people are excited... and sometimes the many logjams-to-learning... do damage to programmer enthusiasm. Consider a "ragdoll" model.  How many physics joints and physics limit-motors/constraints are active on a properly-working, human-simulating ragdoll?  A crapload, that's how many.

But still, I agree.  Show me ONE ankle.  ONE wrist.  Make it a tutorial, with 20 playground examples.  Even though BJS is ONLY the displayer of such things, I would love to learn it all here... among my friends... using this great framework. 

Who has the time/gumption to teach it... the math, the physics, the matrices, the skinning/weightedVerts, the kinetics?  None of us.  But maybe... someone like you, Dens... who sees the weaknesses of our tutorials on these subjects... could be our hero for these causes.  If we did somehow create a bones/skeletons/rigging tutorial and accompanying playground series, would you have time and gumption to flesh it out for us... as you learned more and more about it?  Would you be willing to help fill the void that you yourself have discovered?  And, at some point, would you say to yourself... "Wait, this is a forum about a webGL framework, not a skeleton rigging forum"?  CAN a single forum accomplish teaching all the aspects to ragdolling?  And have we "contaminated" this forum about a webGL framework... just by attempting to do that?

WebGL forums are very unique, because of these issues.  Many technologies seem to intersect at our little "forum of hopes and dreams", don't they?  I don't know what direction we should be going-towards, Dens.  This is a very unusual situation, and we are all sort-of "feeling our way" along.  What IS our "job".  Making decent demos and games so we can get great jobs, sports cars, and get laid?  Or perhaps stalwartly trying to teach and help others continuously, so THEY can get great jobs, buy sports cars, and get laid?  When is me me me important?  When is us us us important? 

How's that's for off-topic about on-topic issues.    Do you know how to use playground search?  I'd say... start there... find all the playgrounds that mention 'bone' and 'skeleton'... and have some nice web tutorials open in nearby windows... I suppose. I'll be there with ya. 

[Densaugeo]

I would think that a framework forum is an excellent place for examples of how to use the framework.

Considering that bone animations can be exported from Blender into Babylon, then clearly Babylon has a way of animating bones. Looking through the model file gryff posted, it contains a list of animation frames, each with a matrix to apply to the bone. That implies that Babylon is capable of applying a matrix to a bone...that is what it is doing underneath.

So, how to tell Babylon to apply a specific matrix to a bone? I have found that I can create an animation which loops through a single frame, and tell it which frame to use, but this requires any transform to be listed as a frame ahead of time and is cumbersome. How does the animator update the bone's matrix, and can that be done manually?

[Wingnut]

http://www.babylonjs-playground.com/#1D8JI2#6

http://www.babylonjs-playground.com/#1I8UPB#0

http://www.babylonjs-playground.com/#WBIXK#5

It's a start.    Toured all returns from playground search for 'bone'... brought you ones that I think might help.  Sorry I don't have more to offer at this time.

[JCPalmer]

FYI, bones being very complicated is the reason there are no manual examples.  Also remember, in order for a skeleton to use a mesh, they have to have a weight(s) to apply to each vertex, and an indicator of what weights apply to which bones.  Normally, unless the mesh is extremely simple, you need a program like Blender or 3DMax to define these.

Unfortunately, a single bone example / tutorial would actually be a disservice.  The reason being that the real "fun" only starts once you have more than one bone.  Like in your arm the final position of your finger tip is the result of about 6 bones being added up(and that is ignoring anything above upper arm).  These 6 are also not what a weight is.  A weight is like a skin cell close to a joint.  They are influenced by bones on both sides.

That said, I am doing Javascript generation of bone matrices.  It took me a very long time, and I am still using Blender to generate my skeleton & mesh vertex weights & indexes.  I am also using Blender to generate all my base poses that I am interpolating / scaling for different meshes.  This means I do not have to deal with bone parenting.

The surest way to get a bone to respond is to change the local matrix of the bone.  Then mark it dirty.  I too had problems getting updateMatrix() to do anything.  Works for me now when I call returnToRest().

Here is the section code I use to directly change the values of the local matrix, if it helps (this refers to a bone in my Bone subclass).  Pretty low level.  Good Luck.

var local = this.getLocalMatrix();
local.m[ 0] = this._resultScale.x;
local.m[ 1] = 0;
local.m[ 2] = 0;
local.m[ 3] = 0;
local.m[ 4] = 0;
local.m[ 5] = this._resultScale.y;
local.m[ 6] = 0;
local.m[ 7] = 0;
local.m[ 8] = 0;
local.m[ 9] = 0;
local.m[10] = this._resultScale.z;
local.m[11] = 0;
local.m[12] = 0;
local.m[13] = 0;
local.m[14] = 0;
local.m[15] = 1;
            
BABYLON.Matrix.IdentityToRef(this._rotationMatrix);
this._resultRotation.toRotationMatrix(this._rotationMatrix);
local.multiplyToRef(this._rotationMatrix, local);

local.setTranslation(this._resultTranslation);

this.markAsDirty();

 

[GameMonetize]

By default updateMatrix recomputes the differenceMatrix (The rest post if you prefer).

 

You can just update the inner matrix with bone.udpateMatrix(matrix, false)

[Densaugeo]

Alright, I've got it working. I made a rigged, simplified, and thoroughly commented version of one of the PGs wingnut found: http://www.babylonjs-playground.com/#1D8JI2#7

I certainly wouldn't want to try manually rigging a character model, but it is quite helpful for deforming simple shapes like prisms, or for algorithmically generated models.

[adam]

http://www.babylonjs-playground.com/#OCCLB#10

use the slider to rotate the second bone.

[gryff]

I knew there was a reason why I create my animations in Blender

cheers, gryff