🦴

Rigging

The Mathematics of Motion

🦴💎💡✨🌀⚡
Roadmap topics covered here
Full roadmap →

Rigging lessons

Foundation: Trigonometry on the Unit Circle

Every rotation formula uses sin and cos. Drag around the unit circle to see them as literal geometric projections — red is cosine (horizontal shadow), green is sine (vertical shadow), purple is tangent (height at x=1):

Drag around the circle. cos=horizontal shadow, sin=vertical shadow, tan=height at x=1.

Foundation: Vector Operations

Vectors are the atoms of graphics math. Switch between operations to see addition (tip-to-tail), subtraction (difference arrow), scaling, and normalization (set length to 1):

Intuition: Matrix Multiplication Step-by-Step

Matrix multiplication chains transforms together. Click through each cell to see exactly which row dots which column — and why the order matters (A*B is not B*A):

Matrix A (Translation)
1.0
0.0
0.0
3.0
0.0
1.0
0.0
2.0
0.0
0.0
1.0
-1.0
0.0
0.0
0.0
1.0
×
Matrix B (Rotation)
0.7
0.7
0.0
0.0
-0.7
0.7
0.0
0.0
0.0
0.0
1.0
0.0
0.0
0.0
0.0
1.0
=
Result A*B
0.7
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
R[0][0] = 1.0*0.7 + 0.0*-0.7 + 0.0*0.0 + 3.0*0.0 = 0.7
Step 0/16

Skeletal Hierarchy

A skeleton is a DAG of joints. Each stores a local transform relative to its parent. The world transform is the chain product of all ancestors:

World Transform
Mj_world = M_root . M1 . M2 . ... . Mj_local
Homogeneous Transform M = T . R . S
r00*sxr01*syr02*sztx
r10*sxr11*syr12*szty
r20*sxr21*syr22*sztz
0001
Skinning Matrix
Sj = Mj_world . Bj^-1 (bind-pose inverse)

Live: Animated Skeleton + SLERP

Quaternion Rotations

Quaternion
q = cos(t/2) + sin(t/2)*(xi + yj + zk) v' = q . v . q^-1 (rotate vector) q_combined = q2 . q1 (compose)
SLERP
SLERP(q0,q1,t) = sin((1-t)O)/sin(O)*q0 + sin(tO)/sin(O)*q1 O = arccos(q0.q1) fallback: NLERP when O~0

Live: Euler Angles vs Quaternions (Gimbal Lock)

Set Y rotation to 90 degrees in Euler mode — X and Z collapse onto the same axis, losing a degree of freedom. Switch to Quaternion mode to see the fix:

Set Y to 90 in Euler mode to see gimbal lock — X and Z rotate the same axis. Switch to Quaternion to see the fix.

LBS vs DQS Skinning

LBS
v' = Sum wi . Si . v Sum(wi)=1 Fast but candy-wrapper artifact
DQS
q^ = qr + e*qd e^2=0 qd = 1/2*t*qr blend: normalize(Sum wi*qi^) Preserves volume through extreme twists

Live: LBS vs DQS Twist Comparison

Increase twist to see LBS candy-wrapper artifact — DQS preserves volume

Live: Weight Painting Visualizer

Click any vertex to inspect its weight split between J0 (upper arm) and J1 (lower arm). Bend the elbow to see how LBS blends the two joint transforms based on each vertex weight:

Click any vertex to see its weight split. Red = J0 influence, purple = J1. Bend to see LBS in action.

Inverse Kinematics

IK Methods
p = FK(t1,...,tn) J = dp/dt Jj = zj x (p_end - pj) (revolute column) Jacobian Transpose: dt = J^T*dp (fast) Pseudoinverse: dt = J^T(JJ^T)^-1*dp (accurate) FABRIK: geometric forward/backward passes

Live: Interactive FABRIK IK Solver

Click or drag anywhere to set the target. The 4-bone chain solves via FABRIK — alternating forward and backward passes until convergence:

Click/drag to move the IK target — joints solve via FABRIK iteration
Shaders 💎 →
Interactive lessonCanvas visualizersMathematical notation