一起学 WebGL：复合矩阵

大家好，我是前端西瓜哥。之前讲了平移矩阵、旋转矩阵以及缩放矩阵，以及演示了在 WebGL 中的单独应用的效果。

这次我们看看同时进行多次矩阵变换的组合写法。

我们将会对一个三角形先平移，然后旋转。

矩阵乘法

简单过一下矩阵乘法的知识点。

具体讲解可看：

《计算机图形学：变换矩阵》

一个坐标（矢量），先进行矩阵变形 1，然后再做矩阵变换 2，它的写法是：

m2 * m1 * vec

第一个矩阵 A 的列数如果等于第二个矩阵 B 的行数，那这两个矩阵可以做乘法。

矩阵乘法不满足交换律，即 AxB 通常不等于 BxA。

矩阵乘法，一种理解方式是：A 的第 i 行的每个元素，依次乘以 B 的第 j 列的对应元素，然后加起来，作为新矩阵的第 [i][j] 个元素。

矩阵乘法的计算顺序为从左往右。

以一个比较低维度的 2x2 矩阵为例：

$$
\begin{bmatrix}

a & b\

c & d

\end{bmatrix}

\begin{bmatrix}

e & g \

f & h

\end{bmatrix}

=

\begin{bmatrix}

a * e + b * f & a * g + b * h \

c * e + d * f & c * g + d * h

\end{bmatrix}
$$

矩阵乘法满足交换律。

  m2 * m1 * vec
= m2 * (m1 * vec)
= (m2 * m1) * vec

所以，一个顶点要做多次矩阵变换，我们可以先计算这些矩阵的结果，得到一个复合矩阵，然后再乘以顶点。

当多个顶点做的矩阵变换是一样的时候，我们就能减少计算量，一些线性计算就得到结果。

这种将一个模型丢到世界坐标系中进行各种变换，我们也称为 模型变换（model transform）。

顶点着色器中运算

顶点着色器代码：

const vertexShaderSrc = `
attribute vec4 a_Position;
uniform mat4 u_translateMatrix;
uniform mat4 u_rotateMatrix;

mat4 compoundMatrix = u_rotateMatrix * u_translateMatrix;
void main() {
 gl_Position = compoundMatrix * a_Position;
}
`;

声明了两个 uniform 类型的矩阵 u_translateMatrix 和 u_rotateMatrix，分别保存平移矩阵和旋转矩阵，然后将它们相乘。

compoundMatrix 因为不需要外部传入值，所以不需要加 uniform 声明。

因为是先平移再旋转，所以平移矩阵在右，旋转矩阵在左。

平移矩阵的构造：

/****** (1) 平移矩阵 ****/
const dx = 0.5; // 向右移动
const dy = 0; // 向下移动
// z 先不管，没用到透视矩阵，设置值也看不到效果
const translateMatrix = new Float32Array([
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  dx, dy, 0, 1
]);
// 传入顶点着色器
const u_translateMatrix = gl.getUniformLocation(
  gl.program,
  "u_translateMatrix"
);
gl.uniformMatrix4fv(u_translateMatrix, false, translateMatrix);

旋转矩阵的构造：

/****** (2) 旋转矩阵 ****/
const angle = 60;
const radian = (angle * Math.PI) / 180;
const cos = Math.cos(radian);
const sin = Math.sin(radian);
// prettier-ignore
const rotateMatrix = new Float32Array([
  cos, sin, 0, 0,
  -sin, cos, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
]);
const u_rotateMatrix = gl.getUniformLocation(gl.program, "u_rotateMatrix");
gl.uniformMatrix4fv(u_rotateMatrix, false, rotateMatrix);

demo 地址：

https://codesandbox.io/s/eg66e2?file=/index.js

渲染结果：

使用 JavaScript 运算

换成用 JavaScript 来做矩阵乘法，将计算好的矩阵传入到着色器中。

顶点着色器只要声明一个 uniform 类型的 u_compoundMatrix 就好。

uniform 是一个不变的类型，使用下一顶点时还会使用原来的值。如果顶点更换时，值会变，你应该使用的是 attribute 类型。

const vertexShaderSrc = `
attribute vec4 a_Position;
uniform mat4 u_compoundMatrix;
void main() {
 gl_Position = u_compoundMatrix * a_Position;
}
`;

创建完两个 Float32Array 的数组后，我们用自己实现的 JavaScript 将它们相乘。

/*************** 计算复合矩阵 *************/
// 两个 4x4 矩阵相乘的方法。m1 x m2
function multiply(m1, m2) {
  const size = 4;
  const m = new Float32Array(size * size);
  for (let i = 0; i < size; i++) {
    for (let j = 0; j < size; j++) {
      let sum = 0;
      for (let k = 0; k < size; k++) {
        sum += m2[i * size + k] * m1[k * size + j];
      }
      m[i * size + j] = sum;
    }
  }
  return m;
}

// 这里创建了俩 Float32Array 数组
// ...

// 两个矩阵相乘，得到复合变换矩阵
const xformMatrix = multiply(rotateMatrix, translateMatrix);
// 将计算出来的矩阵传给着色器
const u_compoundMatrix = gl.getUniformLocation(gl.program, "u_compoundMatrix");
gl.uniformMatrix4fv(u_compoundMatrix, false, xformMatrix);

在实现 multiply 方法过程中，有一个容易踩的坑，就是 WebGL 中的矩阵是 按列主序 的，即 m[0] 到 m[1] 对应的是第一列，而不是第一行，我们实现 JavaScript 矩阵乘法的时候要注意，否则就会从 AxB 变成了 BxA。

西瓜哥我就踩了这个坑，发现 JavaScript 实现和预期不符，居然是先旋转再移动，大眼瞪了半天才发现自己把左边矩阵的列当成行去运算了。

demo 地址：

https://codesandbox.io/s/hw8wfi?file=/index.js

渲染效果和在顶点着色器计算的一样：

如果我们将两个变换矩阵的顺序交换一下，就会得到一个先旋转再移动的效果。感兴趣的朋友可以去线上 demo 修改试试。

结尾

我是前端西瓜哥，欢迎关注我，学习更多前端知识。

顶点的变换可以用矩阵乘法来表示，乘以一个矩阵就是一个变形（比如平移、旋转、缩放）。如果应用了多个矩阵，我们可以利用矩阵乘法的结合律将这几个矩阵先预先计算好。

另外一个坑，就是矩阵是用一维数组表示的，且为比较别扭的按列主序，声明的数组在形式上和矩形真正的样子有一点不同，需要沿着从左上到右下的轴线进行一个翻转才行。