Skinning and Animations - WebGL Game Development - page 277

In most cases, a vertex is shared between two bones and maximum of four bones.
Hence for simplicity, our code only handles skinned models whose vertices are
shared with a maximum of two joints.
vec4 skinVertex = vec4(aVertexPosition, 1.0);
vec4 skinned = boneMatX * skinVertex * skinWeight.x;
skinned += boneMatY * skinVertex * skinWeight.y;
In the preceding code, boneMatX is the offset matrix for bone X with its contributing
weight in skinWeight.x , and boneMatY is an offset matrix of the second bone with
its contributing weight in skinWeight.y .
The transformation computation is performed in the vertex shader.
The final normal transformation
We would also need to transform our vertex normals as lighting calculation uses
vertex normals. The normals are treated in a similar fashion to vertices, but as
normals only specify direction and not position and are of unit length, we first
calculate the weighted average and then multiply the normal with skinMatrix to
avoid one extra multiplication step, as shown in the following code snippet:
mat4 skinMatrix = skinWeight.x * boneMatX;
skinMatrix += skinWeight.y * boneMatY;
vec4 skinnedNormal = skinMatrix * vec4( aVertexNormal, 0.0);
transformedNormal = vec3(nMatrix * skinnedNormal);
Loading a rigged JSON model
We will first understand how the bone DOFs and skinning information is encoded in
the three.js JSON file format (Version 3.1). Then we will modify our code to load the
data. The JSON file is exported from Blender. We will learn how to export the JSON
file in the Exporting models from 3D software in JSON section.
Understanding JSON file encoding
The JSON file contains bone DOF values and their corresponding skinning
information. Open model/obj/mrgreen.json in your favorite text editor. The file
has now four new arrays: bones , skinIndices , skinWeights , and animation . We
will discuss the animation array in the Animating a rigged JSON model section.