Skeletal Animation & Skinning

01Why skeletal animation

An animator wants the character to walk, run, crouch and wave, each keyed at 30 poses a second. Authoring a separate mesh per animation frame doesn't scale (that's vertex animation, which suits crowds; see the VAT tutorial). Skeletal animation instead stores a small skeleton of joints, animates the joints over time, and computes each vertex's deformed position from the joints it's attached to. A 60-joint skeleton drives a 50,000-vertex character; you animate 60 transforms, not 50,000 positions.

02The skeleton

Bend the elbow and the forearm has to follow it, the hand has to follow the forearm, and the fingers have to follow the hand. A skeleton is a tree of joints, each storing a local transform (translation, rotation, scale) relative to its parent. A joint's model-space (global) transform is its parent's global transform times its local, walking from the root: the same scene-graph propagation as in Going 3D^[1].

The rule that produced that position, for every joint:

In words: a joint's place in the model is its parent's place times its own local transform. Walk the skeleton parent-first and each joint just multiplies onto its parent, which is why the root has to be processed before its children. Hover any symbol to see what it stands for.

03The inverse bind matrix

The modeler built the arm sticking straight out. To bend it, you first need each vertex's position measured from the joint that will move it, instead of from the model's origin. Mesh vertices are authored once, in model space, in the bind pose (the rest pose the mesh was modeled in, often a T-pose). The inverse bind matrix for joint j is the inverse of that joint's global transform in the bind pose. It maps a vertex from model space into joint j's local space, so the joint's animated transform can then carry it to its deformed position.

The matrix that does that subtraction, for any joint, is the inverse of the joint's bind-pose transform:

In words: before re-posing a vertex you have to cancel out the joint's rest pose, or the bind transform gets counted twice. Inverting the joint's bind-pose global transform gives the matrix that carries a model-space vertex into that joint's local space, ready for the animated transform to take over.

04The skinning matrix

A vertex in the crease of the elbow belongs partly to the upper arm and partly to the forearm; give it to either one alone and the skin tears or folds at the joint. Each vertex is bound to up to N joints (glTF: 4 per set) with weights that sum to 1, each weight saying how much that joint pulls on the vertex. The skinning matrix is the weighted sum of each influencing joint's skinning transform = jointGlobalAnimated[j] · inverseBind[j].

Written out, the weighted blend for one vertex is:

In words: for every joint that influences the vertex, undo that joint's rest pose (inverseBind), apply where the joint is now (jointGlobalAnimated), and scale by its weight. Σ_i sums those weighted matrices, and the blend transforms the vertex. Because the weights sum to 1, a vertex at the knee bends smoothly between thigh and shin instead of tearing.

The widget skins a two-joint limb with exactly that blend:

// joints sorted so a parent always precedes its children
for (size_t joint = 0; joint < jointCount; ++joint) {
    int parent = parentIndex[joint];                         // -1 for the root
    glm::mat4 local = localPose[joint].toMatrix();           // animated TRS this frame
    globalPose[joint] = (parent < 0) ? local
                                     : globalPose[parent] * local;   // parent.global * local
}
for (size_t joint = 0; joint < jointCount; ++joint)
    skinningMatrix[joint] = globalPose[joint] * inverseBind[joint];  // ORDER: animated * invBind

// joints sorted so a parent always precedes its children
for joint in 0..joint_count {
    let parent = parent_index[joint];                        // -1 (i32) for the root
    let local = local_pose[joint].to_matrix();               // animated TRS this frame
    global_pose[joint] = if parent < 0 { local }
                         else { global_pose[parent as usize] * local };  // parent.global * local
}
for joint in 0..joint_count {
    skinning_matrix[joint] = global_pose[joint] * inverse_bind[joint];  // ORDER: animated * inv_bind
}

05LBS & DQS

Twist a character's wrist toward 180° and, with the standard skinning math, the forearm pinches to a point like the twisted end of a candy wrapper. Linear blend skinning (LBS, a.k.a. matrix palette skinning) is the equation above verbatim: blend the joint matrices by the weights, then transform. It's the most common method in real-time rendering^[4] and the one glTF's skinning definition uses: a linear weighted sum of joint matrices^[2]. But a weighted sum of matrices is not a rigid transform, so it has two artifacts:

• Candy-wrapper (twist): at a joint twisted toward 180°, the blend collapses volume. With one rotation the identity and the other a 180° twist, 0.5·I + 0.5·R is a rank-1 matrix that projects space onto the axis, pinching the cross-section to a point^[6].
• Volume loss (bend): at a sharply bent elbow, linearly interpolating between two rotated positions cuts the corner, shrinking the inner volume.

The widget twists a forearm under both methods:

06The animation clip

An animator keys the arm at 0.0 s and 0.5 s, and the game needs a pose every 16.7 ms in between. A clip is a set of per-joint keyframe tracks, separate tracks for translation, rotation, and scale (glTF animation channels target exactly these three node properties, plus morph-target weights^[2]). Sampling at time t: find the bracketing keyframe pair, compute the local parameter, and interpolate. Rotation interpolates with quaternion slerp or nlerp (slerp swings along the rotation's arc at constant speed; nlerp averages the four numbers and rescales them to length 1); translation and scale lerp.

Transform sampleTrack(const Track& track, float time) {
    auto [k0, k1, alpha] = track.bracket(time);          // bracketing keys + [0,1] factor
    Transform out;
    out.translation = glm::mix(k0.translation, k1.translation, alpha);   // lerp position
    out.scale       = glm::mix(k0.scale,       k1.scale,       alpha);   // lerp scale
    out.rotation    = glm::slerp(k0.rotation,  k1.rotation,    alpha);   // SLERP rotation
    return out;                                          // glm::slerp handles the shortest path
}

fn sample_track(track: &Track, time: f32) -> Transform {
    let (k0, k1, alpha) = track.bracket(time);         // bracketing keys + [0,1] factor
    Transform {
        translation: k0.translation.lerp(k1.translation, alpha),   // lerp position
        scale:       k0.scale.lerp(k1.scale, alpha),               // lerp scale
        rotation:    k0.rotation.slerp(k1.rotation, alpha),        // SLERP (glam: shortest path)
    }
}

07Blending

The character walks at 1.4 m/s and runs at 4 m/s, and the player has the stick halfway. Neither clip is right; a mix of the two is. Blending combines poses per joint, in local space, then recomputes globals^[1]. A cross-fade interpolates each joint's local rotation by slerp and translation by lerp over the fade. Blend trees parametrically mix clips by 1D (speed) or 2D (speed × direction) parameters; Unreal calls them Blend Spaces and Unity calls them Blend Trees. Additive blending applies a pose difference (a clip authored relative to a reference) on top of a base, for aim offsets and hit reactions layered over locomotion.

The widget blends one joint between two poses with three interpolation methods:

08The GPU side & glTF

The CPU knows where every joint is this frame, and the vertices live on the GPU, so the joint data has to cross over every frame. Each frame the CPU builds the matrix palette (one skinning matrix per joint) and uploads it; the vertex shader reads the per-vertex joint indices and weights, sums the four palette matrices, and transforms position and normal. Here skinning happens in the vertex shader; some engines skin in a compute pass instead and reuse the skinned vertices across render passes.

#version 450

layout(location = 0) in vec3  in_position;
layout(location = 1) in vec3  in_normal;
layout(location = 2) in uvec4 in_jointIndices;   // glTF JOINTS_0: unsigned, so a *_UINT vertex format
layout(location = 3) in vec4  in_jointWeights;   // glTF WEIGHTS_0 (sum to 1)

layout(std430, set = 0, binding = 0) readonly buffer Palette {
    mat4 skinningMatrix[];      // globalPose[j] * inverseBind[j], one per joint
} palette;

layout(std140, set = 0, binding = 1) uniform Camera {
    mat4 viewProj;              // assumes the joint globals include the character's world transform
} camera;

layout(location = 0) out vec3 out_normal;

void main() {
    mat4 skin = in_jointWeights.x * palette.skinningMatrix[in_jointIndices.x]
              + in_jointWeights.y * palette.skinningMatrix[in_jointIndices.y]
              + in_jointWeights.z * palette.skinningMatrix[in_jointIndices.z]
              + in_jointWeights.w * palette.skinningMatrix[in_jointIndices.w];  // LBS
    vec4 skinnedPos = skin * vec4(in_position, 1.0);
    vec3 skinnedNrm = normalize(mat3(skin) * in_normal);   // rigid approx; invT under non-uniform scale
    gl_Position = camera.viewProj * skinnedPos;
    out_normal  = skinnedNrm;
}

09IK & root motion

The walk cycle was authored on flat ground, and now the character is on stairs: one foot floats above a step and the other sinks through it. Forward kinematics computes positions from joint angles (everything above). Inverse kinematics is the reverse: given a target (put the foot on the ground, the hand on the doorknob), find the joint angles that reach it. IK modifies the pose before the skinning palette is built.

• Two-bone (limb) IK is analytic: the interior elbow angle comes from the law of cosines, acos((l1² + l2² − D²) / (2·l1·l2)) for target distance D, then orient the triangle toward the target^[9]. Clamp D to the reachable range first, or acos gets an argument outside [−1, 1]. The law of cosines fixes the elbow angle but not the plane: the triangle can spin freely about the shoulder-to-target line, so a pole (bend) vector picks which way the elbow points. Take a 0.3 m thigh, a 0.25 m shin and an ankle target 0.4 m from the hip. The argument is (0.09 + 0.0625 − 0.16) ÷ 0.15 = −0.05, so the knee's interior angle is 92.9°. A target 0.6 m away gives −1.38, outside acos's range; clamped to the 0.55 m reach, the leg straightens to 180°.
• General chains use iterative solvers: FABRIK places joints along lines, first forward from the end effector (set to the target) in to the base, then backward from the base (reset to its anchor) out to the tip, converging in few iterations with no rotation matrices or angles^[10]; CCD rotates one joint at a time from the end inward.

Wrong answers, and why: an exploding mesh on playback is the inverse-bind order/omission (not shader stage or UBO size); and mid-blend shrinkage is wrong rotation interpolation / blending globals (not the blend factor, and not a DQS issue).

10Pitfalls

11What's next

Characters now move. The next module, Blending, State Machines & IK, covers everything upstream of the palette: animation state machines, 2D blend spaces, layered and additive animation, motion matching, and IK in depth. After that the series moves on to physics and the gameplay layer; the full path is on the series hub.

1. Jason Gregory. Game Engine Architecture, 3rd ed., ch. 12 (Animation Systems): skeletons, poses, clips, the matrix palette, and blending. gameenginebook.com. The canonical engine treatment.
2. The Khronos Group. glTF 2.0 Specification, §3.7.3 Skins. registry.khronos.org. The skinning data model (joints, inverseBindMatrices, JOINTS_n/WEIGHTS_n sets, the weight rules), the linear weighted sum of joint matrices, and the animation channel targets.
3. The Khronos Group. glTF Tutorial, "Skins." github.khronos.org. The joint-matrix formula (global joint transform times inverse bind), the GLSL weighted sum of four joint matrices, and that the skinned mesh node's transform is ignored.
4. Tomas Akenine-Möller, Eric Haines, Naty Hoffman, et al. Real-Time Rendering, 4th ed., §4.4 Vertex Blending. realtimerendering.com. LBS as the most common method; the weighted-average formula; DQS and corrective shapes.
5. Ladislav Kavan, Steven Collins, Jiří Žára, Carol O'Sullivan. "Geometric Skinning with Approximate Dual Quaternion Blending." ACM TOG 2008. users.cs.utah.edu. DQS preserves rigidity (no candy-wrapper) at LBS-comparable cost, with a slight bulge at joints.
6. Alec Jacobson, Zhigang Deng, Ladislav Kavan, J.P. Lewis. "Skinning: Real-time Shape Deformation." SIGGRAPH 2014 Course. skinning.org. Part I: averaging the identity with a 180° rotation gives a rank-1 projection onto the axis, which collapses the cross-section to a point (the candy-wrapper); DQS's limits with non-uniform scale and shear.
7. Ankit Singh Kushwah. LearnOpenGL guest article, "Skeletal Animation" (2020). learnopengl.com. A hands-on vertex-shader skinning walkthrough (bone IDs, weights, the offset/inverse-bind matrix).
8. Jonathan Blow. "Understanding Slerp, Then Not Using It." number-none.com. The slerp/nlerp property triad: constant-velocity vs commutative vs torque-minimal.
9. Daniel Holden. "Simple Two Joint IK." theorangeduck.com. Closed-form two-bone IK via the law of cosines, with the bend-axis vector.
10. Andreas Aristidou and Joan Lasenby. "FABRIK: A fast, iterative solver for the Inverse Kinematics problem." Graphical Models 2011. andreasaristidou.com. The forward/backward point-on-line iterative chain solver.
11. The Khronos Group. Vulkan Specification, Required Limits. docs.vulkan.org. maxUniformBufferRange guaranteed minimum 16384 bytes (256 mat4) in core Vulkan, 65536 in Vulkan 1.4; maxStorageBufferRange minimum 2²⁷ bytes (128 MiB).
12. Unity Technologies. "How Root Motion works." docs.unity3d.com. Root motion as a per-frame change in the root transform applied to the GameObject.