WebGL 坐标系基础（二）：变换矩阵的推导

在上一篇文章：《WebGL 坐标系基础（一）》中，我们介绍了WebGL 中常见的几种坐标系以及他们之间的关系。本期将更加“硬核”一些，从数学的角度，推导上期讲到的各个变换矩阵。

在下面的推导中，我们统一使用列向量来表示一个坐标，所谓列向量就是一个N*1 矩阵。例如坐标(x, y, z)可以用列向量(x, y, z)^T 表示，其中T 表示转置运算。

平移矩阵

平移矩阵用于将一个坐标沿某个方向移动一定距离。平移矩阵的推导很简单，设平移向量为(tx, ty, tz)，则平移矩阵M_t为：

M_t = [1, 0, 0, 0]
      [0, 1, 0, 0]
      [0, 0, 1, 0]
      [tx, ty, tz, 1]

其中，[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0]分别表示x、y、z轴的单位向量，tx、ty、tz表示平移距离。

将一个坐标(x, y, z)^T 与平移矩阵M_t相乘，得到的结果为：

M_t * (x, y, z)^T = (x + tx, y + ty, z + tz, 1)^T

这表明坐标(x, y, z)沿x、y、z轴分别平移了tx、ty、tz个单位。

旋转矩阵

旋转矩阵用于将一个坐标绕某个轴旋转一定角度。旋转矩阵的推导稍微复杂一些，我们先来看绕x轴旋转的情况。

设旋转角度为θ，则绕x轴旋转的旋转矩阵M_rx为：

M_rx = [1, 0, 0, 0]
       [0, cosθ, -sinθ, 0]
       [0, sinθ, cosθ, 0]
       [0, 0, 0, 1]

其中，[1, 0, 0, 0]表示x轴的单位向量，[0, cosθ, -sinθ, 0]表示绕x轴旋转后的y轴的单位向量，[0, sinθ, cosθ, 0]表示绕x轴旋转后的z轴的单位向量。

将一个坐标(x, y, z)^T 与旋转矩阵M_rx相乘，得到的结果为：

M_rx * (x, y, z)^T = (x, y cosθ - z sinθ, y sinθ + z cosθ, 1)^T

这表明坐标(x, y, z)绕x轴旋转了θ角度。

同理，绕y轴和z轴旋转的旋转矩阵分别为：

M_ry = [cosθ, 0, sinθ, 0]
       [0, 1, 0, 0]
       [-sinθ, 0, cosθ, 0]
       [0, 0, 0, 1]

M_rz = [cosθ, -sinθ, 0, 0]
       [sinθ, cosθ, 0, 0]
       [0, 0, 1, 0]
       [0, 0, 0, 1]

缩放矩阵

缩放矩阵用于将一个坐标沿某个方向缩放一定倍数。缩放矩阵的推导也很简单，设缩放倍数为(sx, sy, sz)，则缩放矩阵M_s为：

M_s = [sx, 0, 0, 0]
      [0, sy, 0, 0]
      [0, 0, sz, 0]
      [0, 0, 0, 1]

其中，[sx, 0, 0, 0], [0, sy, 0, 0], [0, 0, sz, 0]分别表示x、y、z轴的缩放倍数。

将一个坐标(x, y, z)^T 与缩放矩阵M_s相乘，得到的结果为：

M_s * (x, y, z)^T = (sx * x, sy * y, sz * z, 1)^T

这表明坐标(x, y, z)沿x、y、z轴分别缩放了sx、sy、sz倍。

复合变换矩阵

平移、旋转和缩放矩阵可以组合起来形成复合变换矩阵。例如，要将一个坐标沿x轴平移tx个单位，然后绕y轴旋转θ角度，最后沿z轴缩放sz倍，则复合变换矩阵M为：

M = M_s * M_ry * M_tx

将一个坐标(x, y, z)^T 与复合变换矩阵M相乘，得到的结果为：

M * (x, y, z)^T = (sx * (x + tx), sy * (y cosθ - z sinθ), sz * (y sinθ + z cosθ), 1)^T

这表明坐标(x, y, z)先沿x轴平移了tx个单位，然后绕y轴旋转了θ角度，最后沿z轴缩放了sz倍。

总结

本文从数学的角度推导了WebGL 中常用的变换矩阵，包括平移矩阵、旋转矩阵和缩放矩阵。这些矩阵可以组合起来形成复合变换矩阵，用于对坐标进行各种变换。掌握这些矩阵的推导过程，可以帮助您深入理解WebGL 的坐标变换原理，以便在实际开发中更好地进行图形操作。