[WebGL入門]五,矩陣的基礎知識

lufy發表於2014-07-31

注:文章譯自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的額外說明,我會加上[lufy:],另外,鄙人webgl研究還不夠深入,一些專業詞語,如果翻譯有誤,歡迎大家指正。


不是讓你到店前面排隊

lufy:你一定奇怪,為什麼叫這個題目,因為日語中的矩陣叫做“行列”,所以作者就給讀者們開了個玩笑,我就這麼直接翻譯了,大家知道什麼意思就行了。

在3D渲染的世界裡,會很頻繁的用到矩陣。

這裡所說的矩陣,是數學裡的矩陣。英語中叫做Matrix。

矩陣雖然聽起來好像很簡單,矩陣也有很多種,而且計算方法非常難或者說非常麻煩。簡單的說,矩陣就是把數字像箱子一樣排列,將數字橫豎排列起來就形成了矩陣。在平常的生活中是用不到的,但是在3D渲染的世界中卻是不可缺少的一個元素。


為什麼需要矩陣

雖然說矩陣在3D渲染中不可缺少,但是可能完全沒有接觸過它的人也不在少數。那為什麼矩陣如此重要呢?

模擬三維空間,需要非常多的計算。什麼樣的東西,在哪裡,什麼角度,大小如何,只繪製想要繪製的模型數等等,都需要進行非常複雜且大量的計算。

矩陣就是像剛才說的那樣,把數字按照行和列排列起來,在實際應用中,一個矩陣中可以包含很多的情報。

比如說,想要繪製的模型在世界的什麼位置放置著,是否發生了旋轉,是否進行了放大和縮小,攝影的鏡頭在什麼位置,鏡頭的方向如何,最終成像後的畫面的橫豎比例如何......等等,這些情報都可以用一個矩陣來表示。

如果你看了前面的文章(三,3D繪圖的基礎知識),並且你是個細心的人的話,應該注意到了吧,模型在世界的什麼位置,鏡頭的方向等,前面都已經介紹過了。

也就是說,模型座標變換,檢視座標變換,投影座標變換,這些一連串的座標變換如果使用矩陣的話,就可以在一個矩陣中完成所有的座標變換處理。不管怎麼說,為什麼矩陣這麼重要,大家應該大概瞭解了吧。主要是,矩陣的計算效率很高,而且及其便利。


3D渲染和矩陣

上面說矩陣是由數字組合起來的,那麼矩陣到底是個什麼東西呢?

矩陣雖然有很多種,其中的一種叫做方陣。就是行數和列數相同的矩陣。


上面這樣的矩陣,就叫做方陣。

這樣的方陣,一般的3D渲染的世界中使用的是4x4的矩陣。就像剛剛給的圖一樣,行和列都是4個元素組成,這就是3D渲染中使用的矩陣的型別。

那為什麼不是3x3的方陣或者其他的矩陣,而偏偏是4x4的方陣,這是有原因的。不過,現在先不用在意這些。只要先記住,矩陣是能夠讓3D渲染中的計算變的簡單的一個機制就行了。

矩陣完全是數學的話題,所以理解起來可能非常的難。雖然說,最好是仔細的學一下,但是現在的階段,只需要知道矩陣是個什麼東西就可以了。*實際上,我也不是數學專業,也不可能對矩陣的每一個細節都完全理解。

實際3D渲染的時候,像上面說的那樣,準備好模型座標變換,檢視座標變換,投影座標變換的各個矩陣。再具體一點,就是準備好各種座標變換的矩陣,然後相乘。將最終得到的矩陣傳給WebGL的頂點著色器。

頂點著色器從傳過來的矩陣中,獲取到模型的座標,加工到畫面上顯示出來。也就是說,操作座標變換的矩陣,就可以決定模型在畫面上如何繪製。


矩陣能做什麼

前面也說了,座標變換有模型變換,檢視變換,投影變換等多種。

矩陣可以將上面提到的變換儲存起來,比如,如果是模型變換的矩陣,想要繪製的3D模型的位置,擴大縮小,以及旋轉等資訊,都可以定義在一個矩陣中。檢視變換矩陣,鏡頭的位置,鏡頭的方向,以及鏡頭對準了哪個點(注視點)等可以定義在一個矩陣中。投影變換矩陣的話,顯示的橫豎比例和視角等資訊可以定義在一個矩陣中。

而且,這三個矩陣可以相互組合,最終得出的變換矩陣傳給著色器,但是這裡需要注意一點,如果是普通的數學計算,相乘的時候,不需要注意相乘的順序,比如2x3等於6,3x2也等於6。但是矩陣的話,根據相乘的順序得出的結果是不同的。因為矩陣的這種性質,所以進行模型,檢視,投影的矩陣相乘的時候,要特別注意相乘的順序。

到實際寫程式的時候,我會進一步詳細說明,首先要記住矩陣相乘的順序非常的重要。


總結

好了,說了這麼多,對矩陣也多少有些瞭解了吧。

這次,不是讓你完全理解矩陣,就是先介紹一下,如果要真的講解矩陣的話,你必須一個腳踩進數學世界的大門才行。

進行3D渲染,矩陣是不可缺少的,而且要徹底理解矩陣是非常難的。所以現在先明白一下矩陣到底是個什麼東西就行了。

以後,我有可能會專門進行矩陣的講解,首先,簡單理解一下就好。重要的是,比起零基礎,先來知道一下矩陣的用處。如果有興趣的話,網上有很多相關的介紹,理解的越深肯定越好。如果有時間的話,可以先自己看一下。


下一次,介紹一下3D中的術語頂點和多邊形。


轉載請註明:轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend

相關文章