主题使用方法：http://github.com/xitu/juejin-markdown-themes

theme: juejin highlight: juejin

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 本文标题：WebGL第二十课：位移很奇怪及其矩阵表达（涉及数学推导）｜ 8月更文挑战

引子

前两次课分别讲了拉伸和旋转的矩阵表达。但是我们并没有讲一个根基的东西，凭什么就一定可以找到一个矩阵来表达呢。这个东西涉及到很多线性代数的东西，不能过多展开。

总之，拉伸和旋转是能够用矩阵来表达的，而位移则不同。不信我们来试试。

将$\left(\begin{array}{cc} x\ y\end{array}\right)$向右移动1个单位

我们知道最后的结果是 $\left(\begin{array}{cc} x+1\ y\end{array}\right)$

我们现在的目标就是找到一个矩阵，使得：

$$ \begin{bmatrix} a & c \ b & d \end{bmatrix} $$ * $ \left(\begin{array}{cc} x\ y\end{array}\right) = \left(\begin{array}{cc} x + 1\ y\end{array}\right)$

如果能成功找到，说明可以用矩阵来表达位移，如果不能找到，就说明不能用矩阵来表达位移。

将 $\left(\begin{array}{cc} x\ y\end{array}\right)$ = $\left(\begin{array}{cc} 1\ 0\end{array}\right)$ 代入计算

过程不写了，得到

$\left(\begin{array}{cc} a\ b\end{array}\right)$ = $\left(\begin{array}{cc} 1\ 0\end{array}\right)$

将 $\left(\begin{array}{cc} x\ y\end{array}\right)$ = $\left(\begin{array}{cc} 0\ 1\end{array}\right)$ 代入计算

过程不写了，得到

$\left(\begin{array}{cc} c\ d\end{array}\right)$ = $\left(\begin{array}{cc} 1\ 1\end{array}\right)$

根据上面的结果，貌似得到一个式子：

$$ \begin{bmatrix} 1 & 1 \ 0 & 1 \end{bmatrix} $$ * $ \left(\begin{array}{cc} x\ y\end{array}\right) = \left(\begin{array}{cc} x + 1\ y\end{array}\right)$

确实：

$\left(\begin{array}{cc} 1\ 0\end{array}\right)$变成了$\left(\begin{array}{cc} 2\ 0\end{array}\right)$

$\left(\begin{array}{cc} 0\ 1\end{array}\right)$变成了$\left(\begin{array}{cc} 1\ 1\end{array}\right)$

是往右位移了一个单位。

验证上述结果是否满足其他的点

例如，随便找一个点 $\left(\begin{array}{cc} 2\ 3\end{array}\right)$，看看是否能变成$\left(\begin{array}{cc} 3\ 3\end{array}\right)$

开始计算：

$$ \begin{bmatrix} 1 & 1 \ 0 & 1 \end{bmatrix} $$ * $ \left(\begin{array}{cc} 2\ 3\end{array}\right)$ =

$ \left(\begin{array}{cc} 1\ 0\end{array}\right) * 2 + \left(\begin{array}{cc} 1\ 1\end{array}\right) * 3$ =

$ \left(\begin{array}{cc} 2\ 0\end{array}\right) + \left(\begin{array}{cc} 3\ 3\end{array}\right) = \left(\begin{array}{cc} 5\ 3\end{array}\right) \neq \left(\begin{array}{cc} 3\ 3\end{array}\right)$

显然，上面的矩阵，不适用于点$\left(\begin{array}{cc} 2\ 3\end{array}\right)$，即

点$\left(\begin{array}{cc} 2\ 3\end{array}\right)$无法通过左乘这个矩阵变成$\left(\begin{array}{cc} 3\ 3\end{array}\right)$。

某种操作到底能不能用矩阵来表达，是一个数学问题，拉伸和旋转可以，而位移就不行。大家先要记住这个结论。如果有感兴趣的，去看一看线性变换的概念，也就是说，只要是线性变换的操作就可以用矩阵来表达。这里不展开讨论。

解决办法: 升维

难道就真不能用矩阵来表达位移了吗？

错！升维！

    维度打击即将来临，面对高维攻击，低维生物完全无法抗衡！

我们确实不能找到一个矩阵：

$$ \begin{bmatrix} a & c \ b & d \end{bmatrix} $$ * $ \left(\begin{array}{cc} x\ y\end{array}\right) = \left(\begin{array}{cc} x + 1\ y\end{array}\right)$

但是，看好了：

$$ \begin{bmatrix} a & d & g \ b & e & h \ c & f & i\end{bmatrix} $$ * $ \left(\begin{array}{cc} x\ y \1\end{array}\right) = \left(\begin{array}{cc} x + 1\ y\ 1\end{array}\right)$

如果上式中的矩阵能找到，即对于所有$\left(\begin{array}{cc} x\ y \1\end{array}\right)$代入的话，等式都能成立，会有什么奇妙的东西出现吗？

当然有，只要你忽略结果中的第三维, 我们就能用这个 3 * 3 的矩阵来表达二维向量的位移了。

解决上式，找到 3 * 3 的这个矩阵

这里我们不进行代入法计算了，直接给出最后的结果：

$$ \begin{bmatrix} a & d & g \ b & e & h \ c & f & i\end{bmatrix} $$ = $$ \begin{bmatrix} 1 & 0 & 1 \ 0 & 1 & 0 \ 0 & 0 & 1\end{bmatrix} $$, 即

任意 $\left(\begin{array}{cc} x\ y \1\end{array}\right)$ 左乘上述矩阵，得到的结果都是：

$\left(\begin{array}{cc} x+1\ y \1\end{array}\right)$。

我们来验证一下这个矩阵是否是对的：

$$ \begin{bmatrix} 1 & 0 & 1 \ 0 & 1 & 0 \ 0 & 0 & 1\end{bmatrix} $$ * $\left(\begin{array}{cc} x\ y \1\end{array}\right)$ =

$ \left(\begin{array}{cc} 1\ 0\ 0\end{array}\right) * x + \left(\begin{array}{cc} 0\ 1\ 0\end{array}\right) * y + \left(\begin{array}{cc} 1\ 0\ 1\end{array}\right) * 1$ =

$\left(\begin{array}{cc} x+1\ y \1\end{array}\right)$。【验证完毕】

位移的一般式

擅于发现规律和理解线性组合的小伙伴，应该已经发现了，如果我们想要 x 位移 a，y 位移 b。

只需要将上面的矩阵改写一下就行了：

$$ \begin{bmatrix} 1 & 0 & a \ 0 & 1 & b \ 0 & 0 & 1\end{bmatrix} $$

即：

$$ \begin{bmatrix} 1 & 0 & a \ 0 & 1 & b \ 0 & 0 & 1\end{bmatrix} $$ * $\left(\begin{array}{cc} x\ y \1\end{array}\right)$ = $\left(\begin{array}{cc} x+a\ y+b \1\end{array}\right)$。

至于如何一眼看出上面的结论，请用线性组合的眼光去看待矩阵乘法，一切都不过是小菜一碟。

总结

一个二维向量，即一个二维坐标点，如果想要用矩阵乘法，来进行位移的话

二维本身不够用
将这个坐标加一维，第三维写一个固定的1

然后左乘上述矩阵就可以得到想要的结果了。

当然结果中的第三维，你使用的时候，可以忽略他。

好吧，暂时忽略。

其实他还是有点作用的。这个后面再说。

  正文结束，下面是答疑

### 小瓜瓜说：为什么坐标的第三维一定是1，其他数字不行吗？

答：也行，你自己代入里面，看看，也能做到位移，不过跟我们的需求不一样。