计算机图形学：变换矩阵

,大家好，我是前端西瓜哥。今天我们来学变换矩阵。,矩阵乘法是来自线性代数的内容。,首先我们有一个二维的向量 (x, y)，它在线性代数中，我们会这么表示：,,向量在几何中会用一条起始于原点的箭头表示。,,向量我们也常常看作一个点。因为当有大量向量要绘制时，箭头就会非常的多，会让画面非常混乱，所以要简化为点。,向量加法：对应位置进行相加即可，在几何中可以将多个向量头尾相连，最终的路径就是加法的结果：,,数乘：或者叫标量乘法，指的是将向量和一个常量数字进行相乘，也是对应位置相乘，在几何中表现为对向量缩放：,,有了上面两个概念，我们得到对于一个二维向量，它是 x 轴上和 y 轴上的单位向量（一种 基向量）进行缩放后组合而成：,,,然后就是我们主角 线性变换了。,线性变换的 “变换”，指的是 “函数”，它接受一个向量，然后返回一个向量。在几何中，它表示了一个向量是怎么从原来的指向变换（缩放旋转等过程）成另一个指向。,线性变换的 “线性”，指的是这个变换是符合一些特性的，首先是直线变换后还是直线，然后就是原点保持在原来的位置。,,线性变换，一种理解为，矩形的每列改变了对应基向量的值。,比如上面的公式，我们的 (x, y) 向量原来是基于 i 向量 (1, 0) 和 j 向量 (0, 1) 进行数乘得到的。,但通过一个矩阵，我们的 i 和 j 分别变成了(a, c) 和 (b, d)，即标准换了，基于这个新标准得到的新的值就是线性变换的输出向量。,下面我们看一些常见的变换矩阵。,缩放，就是将一个向量（或者点）的 x 和 y 各自进行指定比例的缩放。,假设 x 方向缩放比例为 sx，y 方向缩放比例为 sy。简单的算法就是：,二维 2x2 缩放矩阵为：,,二维矩阵运算过程为：,,实际上我们会使用三维缩放矩阵，原因会在下面平移中讲解。,三维缩放矩阵为：,,下边和右边各加上 0 0 1 即可。,平移，就是将一个向量（或者点）的 x 和 y 各自移动一段距离。,假设 x 方向移动 dx 距离，y 方向移动 dy 距离。,直接用几何的描述：,我们无法用一个二维矩阵来表示平移变换，为此我们需要升维，升到三维，通过额外的一个 z 轴的基向量的斜切来模拟二维中的平移。,输入向量也需要升维，加多一个值为 1 的第三维度：,,三维平移矩阵为：,,运算过程：,,
,为了减少计算量，我们会使用 复合矩阵，就是将多个变换矩阵通过结合律计算出来的矩阵。,它是多种矩阵的组合体，但相比对一个向量一个个进行矩阵乘法，符合矩阵能一次计算出来。因为平移的特殊性，所以我们通常不会使用 2x2 矩阵来表示一个变换矩阵，而是用 3x3 矩阵，来和平移矩阵做兼容。,点沿原点逆时针旋转指定角度，得到新的坐标点，有以下公式：,,三维旋转矩阵：,,逆时针旋转 90度，可以看作是给基变量做旋转：,,斜切，其实就是固定一个基向量不变，改变另一条基向量。斜切是有方向的。,水平斜切：,,或垂直斜切：,,水平斜切动图：,,通常我们会用升维的 3x3 矩阵，来表示一个变换矩形，因为最后一行永远都是 [0, 0, 1]，所以我们的函数只需要传矩阵的前两行，共 6 个值。比如 Canvas 的 ctx.transform 也是只接受 6 个值。,本文简单讲了一下变换矩阵。