WebGL矩阵变换：mult与rotate函数原理问询

Great question—let’s unpack this WebGL matrix logic step by step, starting with confirming your guess and then breaking down how these functions work.

First: Your Guess is Correct! #

You’re right that the second argument to mult is the rotation matrix generated by the rotate function. In nearly all WebGL matrix utility libraries (whether custom or popular ones like gl-matrix), mult is a matrix multiplication function designed to combine multiple transformation matrices. This is how we chain together translations, rotations, and scales in 3D graphics—each transformation is represented as a matrix, and we multiply them to create a single combined transformation matrix.

A Quick Note on Matrix Multiplication Order #

Important detail: Matrix multiplication is not commutative—order matters a lot here. In WebGL (which uses column-major matrices), when you write m = mult(m, new_transform_matrix), the new_transform_matrix is applied first to the object, then the existing m matrix is applied. Put another way: the rightmost matrix in a multiplication chain acts first on the vertex data.

How the rotate Function Works #

The rotate(angle, x, y, z) function generates a 4x4 transformation matrix that rotates points around the axis defined by the vector (x, y, z). Let’s break down each parameter:

• angle: The amount of rotation, usually in radians (though some libraries auto-convert degrees to radians—your theta array has values like 180, so double-check if your library handles this conversion internally).
• x, y, z: The direction of the rotation axis. For example:
  • (1, 0, 0) = rotate around the X-axis (think nodding your head up/down)
  • (0, 1, 0) = rotate around the Y-axis (think turning your head left/right)
  • (0, 0, 1) = rotate around the Z-axis (think tilting your head side to side)

Walking Through Your Code #

Let’s map this to your specific code snippet, using the provided theta and ID values:

var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 0];
var headId = 1; var head1Id = 1; var head2Id = 10;

m = translate(torsoHeight+1*headHeight, 5, 0.0); 
m = mult(m, rotate(theta[head1Id], 1, 0, 0)); 
m = mult(m, rotate(theta[head2Id], 0, 1, 0)); 
m = mult(m, translate(0.0, -0.5*headHeight, 0.0)); 
figure[headId] = createNode( m, head, leftUpperArmId, null);

1. Initial Translation: The first translate moves the rotation origin to the top of the torso (since torsoHeight + headHeight places it above the torso).
2. X-Axis Rotation: theta[head1Id] is theta[1] = 0, so this does nothing—no rotation around the X-axis.
3. Y-Axis Rotation: theta[head2Id] is theta[10] = 0, so this also does nothing—no rotation around the Y-axis.
4. Final Translation: This shifts the head model down by half its height. Why? Because most 3D models have their origin at their center—so after rotating around the torso top (the origin we set earlier), we need to move the model down so its base sits on the torso.

If you changed theta[1] to 45 (for example), the head would nod 45 degrees forward/backward around the X-axis at the torso’s top.

内容的提问来源于stack exchange，提问作者user9516512