OpenGL(三)矩陣的基本使用

前言

在就計算機視覺圖形學中，矩陣是十分常見的計算單位。那么在OpenGL的學習中，矩陣的運算肯定是必不可少，因此本文將稍微總結一下OpenGL中使用矩陣來完成一些稍微復雜一點效果。

通過前面幾篇文章的學習，大致已經明白了OpenGL的基本開發流程。了解OpenGL如何繪制，但是更多復雜的效果不可能通過如此之多的紋理，頂點去完成，我們需要一個更好的工具去處理圖片效果，這個工具就是數學上的矩陣和向量。

如果遇到問題可以在這里http://www.lxweimin.com/p/4b7c0d59c87c找到本人，歡迎討論

正文

我將不會再一次花大量的篇幅重新介紹向量和矩陣，這里僅僅只是把常用的向量和矩陣操作過一遍。

向量

向量最基本的定義是一個方向，往哪里走，走到哪里。更加正式的來說，向量包含一個方向一個大小，如下：


image.png

這里有三個向量，能看到w，n，v都從各自的起點指向各自的終點，并且能夠很輕易的算出其長度。

一個向量可以表示：\vec{a} = ( \begin{matrix} x\\ y \\z \end{matrix} )

向量的計算

向量加減

向量加減，實際上就是對向量中每個分量進行加減
( \begin{matrix} 1\\ 2 \\3 \end{matrix} ) + x = ( \begin{matrix} 1+x\\ 2+x \\3+x \end{matrix} )

向量之間的加：
(\begin{matrix} 1\\ 2 \\3 \end{matrix} ) + ( \begin{matrix} 4\\ 5 \\ 6 \end{matrix} ) = ( \begin{matrix} 1+4\\ 2+5 \\3+6 \end{matrix} )

向量之間的加減在幾何上意義如下：


image.png

減法可以看成加一個負數：
( \begin {matrix} 1\\ 2 \\3 \end{matrix} ) + ( \begin{matrix} -4\\ -5 \\- 6 \end{matrix} ) =( \begin{matrix} 1\\ 2 \\3 \end{matrix} ) - ( \begin{matrix} 4\\ 5 \\ 6 \end{matrix} ) = ( \begin{matrix} 1-4\\ 2-5 \\3-6 \end {matrix} )

向量的長度

我們使用勾股定理(Pythagoras Theorem)來獲取向量的長度(Length)/大小(Magnitude)。如果你把向量的x與y分量畫出來，該向量會和x與y分量為邊形成一個三角形：


image.png

我們可以依據勾股定理把v向量的長度計算出來：
||v|| = \sqrt{x^{2} + y^2}

向量的乘法

向量的乘法有兩部分，點乘(內積)，叉乘(外積)。

點乘：

\vec{v} \cdot \vec{k} = ||v|| \cdot ||k|| \cdot cos\theta

如果用分量來表示其運算,就是每個分量之間相乘最后相加：
(\begin{matrix} 1\\ 2 \\3 \end{matrix} ) \cdot ( \begin{matrix} 3\\ 4 \\5 \end{matrix}) = (1*3)+(2*4)+(3*5)

幾何意義：

image.png

假設有兩個向量a,b.如果這兩個向量做點乘：

因為點乘符合乘法交換律：可以擴起后面，能從涂上看到后面括號那部分實際上就是b在a上的投影，也就是上圖的。

所以a_{0}和a是一個方向上的，因此將會符合乘法交換律等基礎性質。這些不多展開論述。

叉乘：

\vec{v} \times \vec{k} = ||v|| \times ||k|| \times sin\theta

如果用分量來計算的就是如下：
假設有向量A和B，從左到右的排開每個向量的分量，每一行代表一個向量:
|\begin{matrix} x & y & z\\ A_{x} & A_{y} & A_{z} \\ B_{x} & B_{y} & B_{z} \end{matrix} |

A \times B = ( \begin{matrix} A_{x}\\ A_{y} \\ A{z} \end{matrix} ) \times ( \begin{matrix} B_{x}\\ B_{y} \\ B_{z} \end{matrix} ) = ( \begin{matrix} A_{y} \times B_{z} - A_{z} \times B_{y} \\ A_{x} \times B_{z} - A{z} \times B_{x} \\ A_{x} \times B_{y} - A_{y} \times B_{x} \end{matrix} )

實際上，我高中第一次學的時候，感覺不太好記叉乘。其實把上面那個行列式寫出來，就很好記住了。計算那一列的數據，就獲取另外兩列分量，做交叉相乘以及相減。

幾何上的意義：


image.png

從上圖能夠明白實際上向量a叉乘b，就是找一個向量同時垂直于向量a和向量b的向量。實際上這個向量就是垂直于a和b構成的平面。

這里就不再贅述推導過程。

矩陣

簡單來說矩陣就是一個矩形的數字、符號或表達式數組。矩陣中每一項叫做矩陣的元素.(最初的誕生是為了解決多元方程式)
下面是一個2×3矩陣的例子：
\left[ \begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end{matrix} \right]
矩陣可以通過(i, j)進行索引，i是行，j是列，這就是上面的矩陣叫做2×3矩陣的原因（3列2行，也叫做矩陣的維度(Dimension)）。這與你在索引2D圖像時的(x, y)相反，獲取4的索引是(2, 1)（第二行，第一列）（譯注：如果是圖像索引應該是(1, 2)，先算列，再算行）。

矩陣的加減法

矩陣和標量相加
\left[\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end{matrix} \right] +3 = \left[\begin{matrix} 1+3 & 2+3 & 3+3 \\ 4+3 & 5+3 & 6+3 \end{matrix} \right]

矩陣之間相加，必須是矩陣行列數相等才能互相相加：
\left [\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end{matrix} \right] + \left[\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end {matrix} \right] = \left[\begin{matrix} 1+1 & 2+2 & 3+3 \\ 4+4 & 5+5 & 6+6 \end{matrix} \right]

減法也是類似。

矩陣的乘法

矩陣乘法分為2部分，數乘和相乘。

數乘

矩陣和標量相乘,矩陣與標量之間的乘法也是矩陣的每一個元素分別乘以該標量
\left [\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end{matrix} \right] \cdot 3 = \left[\begin{matrix} 1 \cdot 3 & 2 \cdot 3 & 3 \cdot 3 \\ 4 \cdot 3 & 5 \cdot 3 & 6 \cdot3 \end{matrix} \right]

現在我們也就能明白為什么這些單獨的數字要叫做標量(Scalar)了。簡單來說，標量就是用它的值縮放(Scale)矩陣的所有元素

矩陣的乘法

矩陣之間的乘法不見得有多復雜，但的確很難讓人適應。矩陣乘法基本上意味著遵照規定好的法則進行相乘。當然，相乘還有一些限制：

1.只有當左側矩陣的列數與右側矩陣的行數相等，兩個矩陣才能相乘。
2.矩陣相乘不遵守交換律(Commutative)，也就是說A?B≠B?A。

直接來看矩陣相乘的例子：
\left[\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix} \right] \cdot \left[\begin{matrix} 5 & 6 \\ 7 & 8 \end{matrix} \right] = \left[\begin{matrix} 1*5+2*7 & 1*6+2*8 \\ 3*5+4*7 & 3*6+4*8 \end{matrix} \right]

image.png

實際上計算過程就是矩陣的第1個元素就是第一行乘以第一列每個元素積的和。擴展一下就是如下公式：

矩陣還有除法也就是矩陣的逆，本文沒有涉及，就不多介紹。

單位矩陣

實際上就是一個斜對角全是1，其他都是0的矩陣，數學上叫做I

在OpenGL中，由于某些原因我們通常使用4×4的變換矩陣，而其中最重要的原因就是大部分的向量都是4分量的
\left[ \begin{matrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end {matrix} \right]
這個矩陣的特性很有趣，任何矩陣乘以單位矩陣都等于原來的矩陣

縮放

對一個向量進行縮放(Scaling)就是對向量的長度進行縮放，而保持它的方向不變。由于我們進行的是2維或3維操作，我們可以分別定義一個有2或3個縮放變量的向量，每個變量縮放一個軸(x、y或z)。

假如我們嘗試縮放\vec{v} = (3,2),沿著x軸方向縮小0.5倍數，沿著y軸放大2倍。

image.png

由于OpenGL通常在3d空間內操作，那么我們只要把z軸縮放設置為1就沒有任何影響。

這種x軸和y軸縮放比例不一致的叫做不均勻縮放，而一致稱為均勻縮放。實際上這個過程能夠通過矩陣去完成。

還記得上面的單位矩陣吧。只要把縮放系數放到矩陣中對應1的位置就能控制對應軸的縮放系數。
\left[ \begin{matrix} Sx & 0 & 0 & 0\\ 0 & Sx & 0 & 0 \\ 0 & 0 & Sz & 0 \\ 0 & 0 & 0 & 1 \end{matrix} \right] \cdot \left[\begin{matrix} x \\ y \\ z \\ 1 \end{matrix} \right] = \left[\begin{matrix} x \cdot Sx \\ y \cdot Sy \\ z \cdot Sz \\ 1 \end{matrix} \right]

最后一個是w是構造3d模型，透視時候用的。暫時沒涉及，就不細說。

位移

位移(Translation)是在原始向量的基礎上加上另一個向量從而獲得一個在不同位置的新向量的過程，從而在位移向量基礎上移動了原始向量。我們已經討論了向量加法，所以這應該不會太陌生。

和縮放矩陣一樣，在4×4矩陣上有幾個特別的位置用來執行特定的操作，對于位移來說它們是第四列最上面的3個值。如果我們把位移向量表示為(Tx,Ty,Tz)，我們就能把位移矩陣定義為：
\left [ \begin{matrix} 1 & 0 & 0 & Tx\\ 0 & 1 & 0 & Ty \\ 0 & 0 & 1 & Tz \\ 0 & 0 & 0 & 1 \end {matrix} \right] \cdot \left[\begin{matrix} x \\ y \\ z \\ 1 \end{matrix} \right] = \left[\begin{matrix} x +Tx \\ y + Ty \\ z + Tz \\ 1 \end{matrix} \right]

旋轉

上面幾個的變換內容相對容易理解，在2D或3D空間中也容易表示出來，但旋轉(Rotation)稍復雜些。

旋轉對于剛入門的人來說是比較新鮮的東西。這里稍微寫一下旋轉的證明，我也花了點時間，證明了一遍，這邊也算是一次總結。

引入復數

為了證明旋轉，我們會引入復數作為輔助。復數是什么？復數包含兩個部分，一個實數部分，一個虛數部分，寫法如下：
z = a + bi
a是一個實數，bi是一個虛數。i是什么？定義i^2 = -1

為什么使用復數來輔助，以前我剛學習的時候不懂。實際上在我們常用的物理學，數學，需要保留二維的信息的時候，往往需要復數來計算，因為復數本身性質決定的，復數本身相加，相乘只允許實數和虛數分開計算，舉個例子：
z1 = a + bi,z2 = c + di
z1+z2 = (a+b) + (b+d)i

這樣就能保留兩個不同的信息了。實際上也像極了向量/矩陣相加。

復數和矩陣的關系

從上面的公式，直覺上告訴我們復數的計算一定和矩陣元算相關，讓我們探索一下復數和矩陣之間的關系。就以復數乘法為例子：
z1 = a + bi,z2 = c + di
z1 * z2 =ac + adi + cbi + bdi^2 = (ac - bd)+(ad + cb)i

如果我們把這個結果看成矩陣運算將會是如下一個矩陣運算,把矩陣第一行運算看成實部，第二行運算看成虛部：
\left[ \begin{matrix} a & -b \\ b & a\\ \end{matrix} \right] \cdot \left[\begin{matrix} c \\ d \end{matrix} \right]

就不難看出，實際上復數的元算就是對 下面這個矩陣做變換運算\left[ \begin{matrix} a & -b \\ b & a\\ \end{matrix} \right]

旋轉的證明

先給出一個復數在復平面中表現：


image.png

能看到在這個復平面中復數z的表示就是z = a + bi，這個向量的長度根據勾股定理很容易就求出來。

我們嘗試著對復數的矩陣進行一次變形，目的就是為創造出一個角度和復數之間的關系,把每一項都除以/ \sqrt{a^2 + b^2}，提取出可以勾股定理創造出來的角度：
\sqrt{a^2 + b^2} \cdot \left[ \begin{matrix} a / \sqrt{a^2 + b^2}& -b / \sqrt{a^2 + b^2} \\ b / \sqrt{a^2 + b^2} & a / \sqrt{a^2 + b^2}\\ \end{matrix} \right]

根據勾股定理，可以把元算中每一項轉化如下：
\sqrt{a^2 + b^2} \cdot \left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end{matrix} \right]

很有趣，這樣就構建出了角度的關系了。有了這些還不足。

矩陣的左側還是有冗余的東西，我們想辦法干掉它。此時很巧的是，矩陣右側剛好就是這個復平面向量的模(長度)。

因此可以化簡如下：
||z|| \cdot \left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end{matrix} \right]

又因為單位矩陣I乘以任何矩陣還是原來的矩陣：
||z|| \cdot\left[ \begin{matrix} 1 & 0 \\ 0 & 1\\ \end {matrix} \right] \cdot\left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end {matrix} \right] = \left[ \begin{matrix} ||z|| & 0 \\ 0 & ||z||\\ \end{matrix} \right] \cdot\left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end{matrix} \right]

實際上這個結果就是3d的旋轉縮放矩陣。不信？我們試試兩個在復平面上的向量(0,1),(1,0)。
\left[ \begin{matrix} ||z|| & 0 \\ 0 & ||z||\\ \end{matrix} \right] \cdot\left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end{matrix} \right] \cdot \left[ \begin{matrix} 0 \\ 1 \\ \end{matrix} \right] = \left[ \begin{matrix} -||z||sin(\theta) \\ ||z||cos(\theta) \\ \end{matrix} \right]

\left[ \begin{matrix} ||z|| & 0 \\ 0 & ||z||\\ \end{matrix} \right] \cdot\left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end{matrix} \right] \cdot \left[ \begin{matrix} 1 \\ 0 \\ \end{matrix} \right] = \left[ \begin{matrix} ||z||cos(\theta) \\ ||z||sin(\theta) \\ \end{matrix} \right]

當復平面上的z長度為1時候，如下圖：


image.png

因此下面這個矩陣是旋轉時候的縮放矩陣：
\left[ \begin{matrix} ||z|| & 0 \\ 0 & ||z||\\ \end{matrix} \right]

下面這個是旋轉矩陣：
\left[ \begin{matrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta)\\ \end{matrix} \right]

用復數表示如下：
||z||(cos(\theta) - sin(\theta) i)

那么我們可以由2d往3d推，可以很輕易得到如下三種情況：
當沿著x軸旋轉，下面矩陣稱為R_{x}：
\left[ \begin{matrix} 1 & 0 & 0 & 0\\ 0 & cos(\theta) & -sin(\theta) & 0 \\ 0 & sin(\theta) & cos(\theta) & 0 \\ 0 & 0 & 0 & 1 \end{matrix} \right] \cdot \left[\begin{matrix} x \\ y \\ z \\ 1 \end{matrix} \right] = \left[\begin{matrix} x \\ cosθ?y?sinθ?z \\ sinθ?y+cosθ?z\\ 1 \end{matrix} \right]

當沿著y軸旋轉,下面矩陣稱為R_{y}：
\left[ \begin{matrix} cos(\theta) & 0 & -sin(\theta) & 0\\ 0 & 1& 0 & 0 \\ sin(\theta) & 0 & cos(\theta) & 0 \\ 0 & 0 & 0 & 1 \end{matrix} \right] \cdot \left[\begin{matrix} x \\ y \\ z \\ 1 \end{matrix} \right] = \left[\begin{matrix} cosθ?x+sinθ?z \\ y \\ ?sinθ?x+cosθ?z \\ 1 \end{matrix} \right]

當沿著z軸旋轉,下面矩陣稱為R_{z}：
\left[ \begin{matrix} cos(\theta) & -sin(\theta) & 0 & 0\\ sin(\theta)& cos(\theta)&0& 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end {matrix} \right] \cdot \left[\begin{matrix} x \\ y \\ z \\ 1\\ \end{matrix} \right] = \left[\begin{matrix} cosθ?x-sinθ?y \\ sinθ?x+cosθ?y \\ z \\ 1 \end{matrix} \right]

有了這三個基礎矩陣之后，我們可以做任意變化，比如先旋轉z軸，再旋轉x軸，最后旋轉y軸。也就是把這三個矩陣從右到左乘起來,但是又因為可以轉為復數，而復數符合乘法交換律，因此先轉動哪一個都沒問題。

換句話說就是，R_{復合旋轉} = R_{x} \cdot R_{y} \cdot R_{z}

因此可以得到如下這個復合矩陣：


image.png

是不是很討厭，很麻煩。更麻煩的在后面，這種基于歐拉角變換的旋轉很容易就出現了萬向節死鎖。如果是做游戲動畫的人一定對這個不陌生。

使用這種方式連續變換的時候，當出現x,y,z其中兩個坐標系在同一水平面時候，另外一個軸的旋轉范圍就被限制住了。
如下：


萬向節死鎖.gif

如何解決呢？這個時候就需要四元數了。本文將不涉及四元數，因此不做更多的詳解，后面將會和大家聊聊。不過記住了，上面引入復數進行推到旋轉公式的方式將會運用到四元數的推導中。本文先做一個鋪墊。

有了這些理論基礎之后，我們可以嘗試編寫代碼。

實戰演練

為了實踐上面問題，我們這邊繼續沿用上一篇文章的笑臉箱子的代碼，來實現三種效果，位移，旋轉，縮放。

首先，我們要稍微改造一下原來的頂點著色器。開放一個uniform來操作頂點著色器中位置。

#version 330 core
layout(location = 0)in vec3 aPos;
layout(location = 1)in vec3 aColor;
layout(location = 2)in vec2 aTexCoord;

out vec3 ourColor;
out vec2 TexCoord;

uniform mat4 transform;

void main(){
    gl_Position = transform*vec4(aPos,1.0);
    ourColor = aColor;
    TexCoord = aTexCoord;
}

通過transform乘法來對位置進行一次矩陣變換。因為在GLSL中已經確定好了是mat4.因此在外面也要創造一個4維的矩陣。

操作一

先縮小一半，再繞著z軸90度旋轉。
根據上面的公式，無論是位移，旋轉還是縮放，我們只需要對著原矩陣依次做矩陣乘法即可。

先準備一個單位矩陣：

GLfloat mat4[4][4] = {
            {1.0f,0.0f,0.0f,0.0f},
            {0.0f,1.0f,0.0f,0.0f},
            {0.0f,0.0f,1.0f,0.0f},
            {0.0f,0.0f,0.0f,1.0f}
        };

準備一個縮放的矩陣：

GLfloat vec3[] = {
            //x    //y    //z
            0.5f,0.5f,1.0f
            
        };

根據公式，4維矩陣縮放操作：

void scaleMat4(GLfloat dst[4][4],GLfloat src[4][4],GLfloat* vec){
    
    dst[0][0] = src[0][0] * vec[0];
    dst[1][1] = src[1][1] * vec[1];
    dst[2][2] = src[2][2] * vec[3];
    dst[3][3] = src[3][3];

}

根據公式的乘積結果，我直接寫出沿著z軸旋轉的方法

void rotationZ(GLfloat dst[4][4],GLfloat src[4][4],double degree){
    double angle = PI * degree / 180.0;
    
    dst[0][0] = src[0][0]*cos(angle) - src[1][0]*sin(angle);
    dst[0][1] = src[0][1]*cos(angle) - src[1][1]*sin(angle);
    dst[0][2] = src[0][2]*cos(angle) - src[1][2]*sin(angle);
    dst[0][3] = src[0][3]*cos(angle) - src[1][3]*sin(angle);
    
    
    dst[1][0] = src[0][0]*sin(angle)  + src[1][0]*cos(angle);
    dst[1][1] = src[0][1]*sin(angle)  + src[1][1]*cos(angle);
    dst[1][2] = src[0][2]*sin(angle)  + src[1][2]*cos(angle);
    dst[1][3] = src[0][3]*sin(angle)  + src[1][3]*cos(angle);
    
    dst[2][0] = src[2][0];
    dst[2][1] = src[2][1];
    dst[2][2] = src[2][2];
    dst[2][3] = src[2][3];
    
    dst[3][0] = src[3][0];
    dst[3][1] = src[3][1];
    dst[3][2] = src[3][2];
    dst[3][3] = src[3][3];
}

此時我們在進入渲染loop之前依次調用：

        scaleMat4(result,mat4, vec3);
        rotationZ(dst,result,90.0);

        GLuint transformLoc = glGetUniformLocation(shader->ID,"transform");
        glUniformMatrix4fv(transformLoc,1,GL_FALSE,&dst[0][0]);

讀取uniform，并且把變換之后的矩陣首地址賦值給transform。由于GLSL中也是4維float型矩陣，剛好能夠正常解析。

image.png

這樣就能看到了沿著x，y軸縮小了一般，同時沿著z軸順時針旋轉了90度。

其實我這么寫旋轉還是有問題，因為我直接計算變換后的矩陣，直接賦值。并沒有很好的泛用性。每一次都要自己寫這么麻煩的矩陣計算，對于開發來說不是很友好。

glm

還好有一個glm庫，專門輔助計算矩陣，向量。而且全是頭文件，不需要編譯直接引入即可。稍微閱讀了源碼，實際上是挺簡單的一個庫，抽象了mat以及vec類，并且復寫里面的操作符。

用法很簡單，同樣的，我們要引入如下頭文件：

#include"glm/glm.hpp"
#include "glm/gtc/matrix_transform.hpp"
#include "glm/gtc/type_ptr.hpp"

初始化一個4維單位矩陣：

glm::mat4 trans = glm::mat4(1.0f);

接著做著一樣的縮放之后旋轉代碼：

        trans = glm::rotate(trans, glm::radians(90.0f),glm::vec3(0.0,0.0,1.0));
        trans = glm::scale(trans, glm::vec3(0.5f,0.5f,1.0f));
        GLuint transformLoc = glGetUniformLocation(shader->ID,"transform");
        glUniformMatrix4fv(transformLoc,1,GL_FALSE,&trans[0][0]);

scale縮放的api需要傳入一個向量，分別指的是x,y,z軸分別縮小放大多少，rotate旋轉api，需要傳遞一個旋轉的角度以及圍繞哪幾個軸旋轉。

此時是沿著z軸，倍數為1的旋轉?？s放為x，y縮小一般，軸不變

這樣就有如此結果


image.png

誒？奇怪了？怎么根據公式計算出來的是相反的呢？一個順時針旋轉了90度，一個逆時針旋轉了90度。

讓我們翻翻旋轉的源碼，實際上很簡單：

template<typename T, qualifier Q>
    GLM_FUNC_QUALIFIER mat<4, 4, T, Q> rotate(mat<4, 4, T, Q> const& m, T angle, vec<3, T, Q> const& v)
    {
        T const a = angle;
        T const c = cos(a);
        T const s = sin(a);

        vec<3, T, Q> axis(normalize(v));
        vec<3, T, Q> temp((T(1) - c) * axis);

        mat<4, 4, T, Q> Rotate;
        Rotate[0][0] = c + temp[0] * axis[0];
        Rotate[0][1] = temp[0] * axis[1] + s * axis[2];
        Rotate[0][2] = temp[0] * axis[2] - s * axis[1];

        Rotate[1][0] = temp[1] * axis[0] - s * axis[2];
        Rotate[1][1] = c + temp[1] * axis[1];
        Rotate[1][2] = temp[1] * axis[2] + s * axis[0];

        Rotate[2][0] = temp[2] * axis[0] + s * axis[1];
        Rotate[2][1] = temp[2] * axis[1] - s * axis[0];
        Rotate[2][2] = c + temp[2] * axis[2];

        mat<4, 4, T, Q> Result;
        Result[0] = m[0] * Rotate[0][0] + m[1] * Rotate[0][1] + m[2] * Rotate[0][2];
        Result[1] = m[0] * Rotate[1][0] + m[1] * Rotate[1][1] + m[2] * Rotate[1][2];
        Result[2] = m[0] * Rotate[2][0] + m[1] * Rotate[2][1] + m[2] * Rotate[2][2];
        Result[3] = m[3];
        return Result;
    }

這里面實際上就是上面復合旋轉的公式。Rotate實際上是根據當前傳進來的向量對復合旋轉矩陣處理之后，再通過這個復合旋轉矩陣計算結果。

我們注意到一點，所有關于z軸的計算全部從顛倒為負。這樣的話，我上面的公式實際上等效glm下面這份代碼：

trans = glm::rotate(trans, glm::radians(90.0f),glm::vec3(0.0,0.0,-1.0));

沿著z軸的負半段進行旋轉。

至于為什么這么做，下一篇文章會揭曉。主要是因為在OpenGL是右手坐標，向左邊旋轉才是在OpenGL的正向旋轉方向。

實戰演練二

我們嘗試著把它轉動起來，只需要讓uniform讀取的數據根據時間變化而變化。

        engine->loop(VAO, VBO, texture, 1,shader, [](Shader* shader,GLuint VAO,
                                                     GLuint* texture,GLFWwindow *window){
            

            
            glm::mat4 trans = glm::mat4(1.0f);
            trans = glm::translate(trans, glm::vec3(0.5f,-0.5f,0.0f));
//旋轉根據時間來
            trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f,0.0f,1.0f));
            

            GLuint transformLoc = glGetUniformLocation(shader->ID,"transform");
            glUniformMatrix4fv(transformLoc,1,GL_FALSE,glm::value_ptr(trans));
            
            //箱子
            glActiveTexture(GL_TEXTURE0);
            glBindTexture(GL_TEXTURE_2D,texture[0]);
            
            //笑臉
            glActiveTexture(GL_TEXTURE1);
            glBindTexture(GL_TEXTURE_2D,texture[1]);
            glBindVertexArray(VAO);
            glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,0);
            
        });

如下：


旋轉笑臉.gif

如果我們把旋轉和位移的順序變換了，會如何？

     glm::mat4 trans = glm::mat4(1.0f);
            trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f,0.0f,1.0f));
            trans = glm::translate(trans, glm::vec3(0.5f,-0.5f,0.0f));
//旋轉根據時間來

            

            GLuint transformLoc = glGetUniformLocation(shader->ID,"transform");
            glUniformMatrix4fv(transformLoc,1,GL_FALSE,glm::value_ptr(trans));

如下：


旋轉笑臉2.gif

為什么會這樣，原本我們把整個笑臉繪制在原點區域，先位移到左下角再旋轉現象和我們料想的一樣。

當我們先旋轉再移動，實際上矩陣的叉乘本質是一個基變換的過程。基變換是什么東西？本文就不多討論。我們可以想象旋轉矩陣并不是旋轉圖片本身，而是旋轉圖片后面的坐標系，構成一個這個圖片上所有新的坐標點，在這里就是給整個坐標旋轉了90度。

經過基變換后的坐標系再次移動相同方向當然出現完全不一樣的。這也是為什么矩陣的乘法，有左右順序可言。

實戰演練三

當我們需要花兩個不同的笑臉，做不同的行為。比如說另一個笑臉跑到左上角，做縮放。
實際上還是一樣對著原來的圖片做一次矩陣變換，在調用一次glDrawElements繪制方法。

engine->loop(VAO, VBO, texture, 1,shader, [](Shader* shader,GLuint VAO,
                                                     GLuint* texture,GLFWwindow *window){
            
            //            changeMixValue(window);
            //            shader->setFloat("mixValue", mixValue);
            
            glm::mat4 trans = glm::mat4(1.0f);
            trans = glm::translate(trans, glm::vec3(0.5f,-0.5f,0.0f));
            trans = glm::rotate(trans, (float)glfwGetTime(), glm::vec3(0.0f,0.0f,1.0f));
            
            
            
            GLuint transformLoc = glGetUniformLocation(shader->ID,"transform");
            glUniformMatrix4fv(transformLoc,1,GL_FALSE,glm::value_ptr(trans));
            
            //箱子
            glActiveTexture(GL_TEXTURE0);
            glBindTexture(GL_TEXTURE_2D,texture[0]);
            
            //笑臉
            glActiveTexture(GL_TEXTURE1);
            glBindTexture(GL_TEXTURE_2D,texture[1]);
            glBindVertexArray(VAO);
            glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,0);
            
            trans = glm::mat4(1.0f);
            trans = glm::translate(trans, glm::vec3(-0.5f,0.5f,0.0f));
            float scale = sin(glfwGetTime());
            trans = glm::scale(trans, glm::vec3(scale,scale,scale));
            
            glUniformMatrix4fv(transformLoc,1,GL_FALSE,glm::value_ptr(trans));
            glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,0);
            
        });
旋轉笑臉3.gif

總結

本文只是介紹了一部分基礎的矩陣變換知識。實際上，要深刻的理解計算機圖形學，線性數學是一個很重要的工具。你可以看到我之前寫的那一篇人工智能梯度下降推導，矩陣在計算機領域中是一個很基礎且通用工具。不求掌握精通，但是至少能夠各種熟悉操作，才能讓我們的學習更加輕松。

寫這篇文章和OpenCV的文章其實比起寫Android底層源碼分析還要痛苦。哈哈，很多數學工具都丟到爪哇國了。只是下意識知道怎么用，怎么回事，但是真的要提煉成文字，我真的必須翻閱很多數學資料，重新過一遍，證明一遍，才敢寫出文章。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,663評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,125評論 3贊 414
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,506評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,614評論 1贊 307
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,402評論 6贊 404
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,934評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,021評論 3贊 440
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,168評論 0贊 287
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,690評論 1贊 333
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,288評論 5贊 357
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,027評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2贊 370