Skinning and Animations - WebGL Game Development - page 287

if( parentSkinMatrix ) {
mat4.mul(this.skinMatrix,parentSkinMatrix,
this.modelMatrix);
//console.log(parentSkinMatrix);
} else {
mat4.copy(this.skinMatrix,this.modelMatrix );
}
this.matrixWorldNeedsUpdate = false;
forceUpdate = true;
}
// update children
var child, i, l = this.children.length;
for ( i = 0; i < l; i ++ ) {
this.children[ i ].update( this.skinMatrix, forceUpdate );
}
}
We have added a new update function to the Bone class. It takes the parent object's
skin matrix and concatenates it to modelMatrix to compute a bone's skinMatrix (
mat4.mul(this.skinMatrix,parentSkinMatrix, this.modelMatrix) ). Then, it
invokes the update functions of all its child bones with its skinMatrix as a parameter.
The update function is very similar to the
updateMatrixWorld function of the StageObject
class, except that it uses a different variable,
skinMatrix , and not matrixWorld . We did
this to differentiate a bone from other renderable
objects( StageObject ) and their properties.
Implementing the RiggedMesh class
The RiggedMesh class is where the complete magic happens. It is a renderable
object that inherits StageObject but has its children array populated with bones
initialized from the JSON file.
Open primitive/RiggedMesh.js in your favorite editor.
RiggedMesh= inherit(StageObject, function (geometry) {
superc(this);
this.identityMatrix = mat4.create();
this.bones = [];
this.boneMatrices = [];
this.skinIndexBuffer=null;
this.skinWeightBuffer=null;
});