主題使用方法：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，其他數字不行嗎？

答：也行，你自己代入裏面，看看，也能做到位移，不過跟我們的需求不一樣。