Three.js Source Note (64) objects/skeleton.js

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.

I was just beginning to learn, a lot of things are definitely wrong and please forgive me.

The following code is a comment for the objects/skeleton.js file in the three.js source file.

More updates in: Https://github.com/omni360/three.js.sourcecode

/** * @author Mikael emtinger/http://gomo.se/* @author alteredq/http://alteredqualia.com/* @author Michael Guerrero /http://realitymeltdown.com * @author ikerr/http://verold.com *//*///skeleton is a skeleton object, is the geometry of the skeleton object, is part of the skin object, used to make support for skeletal animation, There are currently two modes of model animation: Vertex animation and skeletal animation. In vertex animation, each frame animation is actually a "snapshot" of the model-specific gesture. By interpolating the values between frames, the///engine can get a smooth animation effect. In skeletal animation, the model has a skeleton structure of interconnected "bones" that animate the model by altering the orientation and position of the bones. Skeletal animations require more processor performance than vertex animations, but they also have more advantages, and skeletal animations can be created more easily and quickly. Different skeletal animations can be combined-for example, the///model can rotate the head, shoot and walk at the same time. Some engines can manipulate individual bones in real time so that they can interact more accurately with the environment--the model can lean over and look or shoot in a certain direction, or/or pick up something from somewhere on the ground. Most engines support vertex animation, but not all engines support skeletal animation. Some engines include facial animation systems that use the phoneme and mood to modify facial bone collections to express facial expressions and mouth movements. *////<summary>skeleton</summary>///<param name = "Bones" type= "Skinnedmesh" > Skeleton array </param>// /<param name = "Boneinverses" type= "Skinnedmesh" > Skeleton position inverse matrix </param>///<param name = "Usevertextexture" Type= "Boolean" >true or FALSE, if vertex textures are used, the property cannot be modified after the object is built. </param>///<returns type= "Skeleton" > Skeleton objects </ Returns>three. Skeleton = function (Bones, boneinverses, usevertextexture) {this.usevertextexture = usevertextexture!== undefined? usevertextexture:true;//if the Usevertextexture parameter is not set, The default is initialized to Truethis.identitymatrix = new three. MATRIX4 ();//Copy the bone array//duplicate skeleton array bones = Bones | |  [];this.bones = Bones.slice (0);//create a bone texture or an array of floats//creates a skeleton texture or skeleton texture array if (this.usevertextexture  {//Use fixed-point textures//layout (1 matrix = 4 pixels)//Rgba Rgba rgba rgba (= = Column1, Column2, Column3, COLUMN4)//With 8x8 pixel texture Max Bones (8 * 8/4)//16x16 pixel texture max Bones (* 16/4)//32x32 pi Xel Texture Max Bones (* 32/4)//64x64 pixel texture max 1024x768 Bones (* 64/4) var size;if (this.bones. Length > size = 64;else if (this.bones.length > up) size = 32;else if (this.bones.length >) size = 16;e Lsesize = 8;this.bonetexturewidth = size;//Bone Texture Width this.bonetextureheight = size;//Bone Texture Height this.bonematrices = new Float32array (this.bonetextuRewidth * This.bonetextureheight * 4); 4 floats per RGBA pixel//4 floating-point values per pixel this.bonetexture = new three. Datatexture (This.bonematrices, This.bonetexturewidth, This.bonetextureheight, three. Rgbaformat, three. Floattype);/////datatexture class is used to create a reflection refraction or texture map object based on the image data for a polygon, and the Three.texture method is different from the data format used by the image here///This class is the most important attribute is data, This is the data format for a JavaScript image type object. The first parameter passed in is the object, and/or subsequent objects are optional, and if the default values are populated by default, they are often populated with default values. This.boneTexture.minFilter = three. The nearestfilter;///property Magfileter and Minfileter Specify how the texture is filtered when zooming in and out to the nearest point This.boneTexture.magFilter = three. Nearestfilter;this.bonetexture.generatemipmaps = false;//does not generate mipmap map, pyramid map This.boneTexture.flipY = false;//do not flip image} else {this.bonematrices = new Float32array (* this.bones.length);//Not applicable vertex texture}//Use the supplied bone inverses or calcul Ate the inverses//uses the provided skeleton position inverse matrix or calculates the armature position inverse matrix if (boneinverses = = = undefined) {//If no skeleton position inverse matrix this.calculateinverses () is provided;// Calculates the armature position inverse matrix} else {if (this.bones.length = = = Boneinverses.length) {//If the inverse matrix is provided and is equal to the number of bones this.boneinverses = BoneinVerses.slice (0);//copy Skeleton's inverse matrix} else {//If the provided bone inverse matrix and the number of bones are inconsistent console.warn (' three. Skeleton boninverses is the wrong length. '); /hint user skeleton inverse matrix and the number of bones is inconsistent this.boneinverses = [];//empties the skeleton Inverse matrix for (var b = 0, bl = this.bones.length; b < bl; B + +) {This.bonein Verses.push (new three. MATRIX4 ());//And keep the bone inverse matrix and the number of bones inconsistent}}}};/*calculateinverses method///calculateinverses method to recalculate the inverse matrix of the bones *////<summary> Calculateinverses</summary>///<returns type= "Skeleton" > returns the Skeleton skeleton object containing the inverse matrix of the skeleton. </returns>three .  Skeleton.prototype.calculateInverses = function () {this.boneinverses = [];for (var b = 0, bl = this.bones.length; b < Bl B + +) {var inverse = new three. MATRIX4 (), if (this.bones[b]) {Inverse.getinverse (this.bones[b].matrixworld);//get inverse matrix of position property of current bone} This.boneInverses.push (inverse);//Returns the skeleton skeleton object containing the skeleton inverse matrix}};/*pose method///pose method recalculates the calculation of the bone local matrix, position, rotation scale property *////< Summary>pose</summary>///<returns type= "Skeleton" > returns the Skeleton object containing the new property. </returns>three. Skeleton.prototype.pose = function () {VAr bone;//Recover the bind-time world matrices//restored in the binding of the global coordinate matrix. for (var b = 0, bl = this.bones.length; b < bl; B + +) {bone = this.bones[b];if (bone) {bone.matrixWorld.getInverse (this.boneinverses[b]);//restore World coordinate matrix at binding}}//COMPUTE th e local matrices, positions, rotations and scales//compute the native matrix, position, rotation scale property for (var b = 0, bl = this.bones.length; b < bl; B + +) {bone = this.bones[b];if (bone) {if (bone.parent) {///If the skeleton has a parent object Bone.matrix.getInverse (Bone.parent.matrixWorld); The World Coordinate matrix bone.matrix.multiply (bone.matrixworld) of the inverse parent object,//multiplies the matrix of the current bone from the world coordinate matrix of the parent object}else {bone.matrix.copy ( Bone.matrixworld);//copy its own world coordinate matrix}bone.matrix.decompose (bone.position, bone.quaternion, Bone.scale);//Call Decompose ( ) method, reset the position of the bone object, and rotate the Zoom property.}}};/ The *update method///update method updates the current skeleton's buffer data and updates the texture identity setting to True.*////<summary>pose</summary>///<returns type= " Skeleton "> returns the containing new Skeleton object. </returns>three. Skeleton.prototype.update = function () {var Offsetmatrix = new three. MATRIX4 ();//Flatten bone matrices to array//expands the skeleton matrix to an array. for (var b = 0, bl = this.bones.length; b < bl; B + +) {//Compute the offset between the current and The original transform//calculates the offset distance from the current position to the original position var matrix = this.bones[b]? this.bones[b].matrixworld:this.identitymatrix;offsetmatrix.multiplymatrices (Matrix, this.boneinverses[b]); O Ffsetmatrix.flattentoarrayoffset (this.bonematrices, b * 16);//Call the Flattentoarrayoffset method, specifying the offset by the parameter offset (b * 16), Expands the matrix into an array (parameter array), returning the new array. if (this.usevertextexture) {//If using vertex texture this.boneTexture.needsUpdate = true;//Sets the update identity to True.}};

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.

The following code is a comment for the objects/skeleton.js file in the three.js source file.

More updates in: Https://github.com/omni360/three.js.sourcecode

Three.js Source Note (64) objects/skeleton.js