WebGL第二十課:位移很奇怪及其矩陣表達(涉及數學推導)| 8月更文挑戰
主題使用方法: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,其他數字不行嗎?
- 答:也行,你自己代入裏面,看看,也能做到位移,不過跟我們的需求不一樣。
- 庖丁解牛斐波拉契數列和揹包問題——詳細解析兩個問題優化過程,帶你從最基本的問題看懂動態規劃!!!
- WebGL第二十課:位移很奇怪及其矩陣表達(涉及數學推導)| 8月更文挑戰
- 無鎖讀取配置變量
- WebGL第三十二課:簡單2D光照
- 庖丁解牛之-Android平台RTSP|RTMP播放器設計
- 庖丁解牛-圖解MySQL 8.0優化器查詢轉換篇
- 庖丁解牛-圖解MySQL 8.0優化器查詢轉換篇
- 庖丁解牛-圖解MySQL 8.0優化器查詢解析篇
- 乾貨 | 45張圖庖丁解牛18種Queue,你知道幾種?
- 45 圖|庖丁解牛 18 種「隊列」,你知道幾種?
- 庖丁解牛:最全babel-plugin-import源碼詳解
- WebGL第二課:寫一個圓
- 用 Arthas “庖丁解牛”
- 用 Arthas “庖丁解牛”
- 用 Arthas “庖丁解牛”
- 庖丁解牛之 Flutter for Web
- 重磅|庖丁解牛之——Flutter for Web