WebGL第二十課:位移很奇怪及其矩陣表達(涉及數學推導)| 8月更文挑戰

語言: CN / TW / HK

主題使用方法: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,其他數字不行嗎?

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