本系列所有文章目錄

獲取示例代碼

上一篇介紹了變換矩陣，本篇將介紹兩個重要的變換矩陣，透視投影矩陣和正交投影矩陣。在介紹代碼之前，先來簡單介紹一下這兩個矩陣的作用。

透視投影矩陣

主要作用是模仿人眼觀察3D世界的規律，讓物體近大遠小，所以被稱為透視。

正交投影矩陣

主要作用是將坐標系映射到其他大小，主要用于2D UI繪制。

接下來我們就結合代碼和效果深入了解這兩個矩陣。我沿用了上一篇的代碼，只修改了兩處。update中使用透視和正交投影，并配合一些平移，旋轉，縮放實現了本例中的效果。drawTriangle中修改了頂點數據，將繪制的菱形改成了矩形，方便觀察效果。

- (void)update {
    [super update];
    float varyingFactor = self.elapsedTime;
    
    GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(varyingFactor, 0, 1, 0);
//#define UsePerspective // 注釋這行運行查看正交投影效果，解除注釋運行查看透視投影效果
#ifdef UsePerspective
    // 透視投影
    float aspect = self.view.frame.size.width / self.view.frame.size.height;
    GLKMatrix4 perspectiveMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90), aspect, 0.1, 10.0);
    GLKMatrix4 translateMatrix = GLKMatrix4MakeTranslation(0, 0, -1.6);
    self.transformMatrix = GLKMatrix4Multiply(translateMatrix, rotateMatrix);
    self.transformMatrix = GLKMatrix4Multiply(perspectiveMatrix, self.transformMatrix);
#else
    // 正交投影
    float viewWidth = self.view.frame.size.width;
    float viewHeight = self.view.frame.size.height;
    GLKMatrix4 orthMatrix = GLKMatrix4MakeOrtho(-viewWidth/2, viewWidth/2, -viewHeight / 2, viewHeight/2, -10, 10);
    GLKMatrix4 scaleMatrix = GLKMatrix4MakeScale(200, 200, 200);
    self.transformMatrix = GLKMatrix4Multiply(scaleMatrix, rotateMatrix);
    self.transformMatrix = GLKMatrix4Multiply(orthMatrix, self.transformMatrix);
#endif
    
}

- (void)drawTriangle {
    static GLfloat triangleData[36] = {
        -0.5,   0.5f,  0,   1,  0,  0, // x, y, z, r, g, b,每一行存儲一個點的信息，位置和顏色
        -0.5f,  -0.5f,  0,  0,  1,  0,
        0.5f,   -0.5f,  0,  0,  0,  1,
        0.5,    -0.5f, 0,   0,  0,  1,
        0.5f,  0.5f,  0,    0,  1,  0,
        -0.5f,   0.5f,  0,  1,  0,  0,
    };
    [self bindAttribs:triangleData];
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

透視投影

這是使用透視投影的全部代碼。

 // 透視投影
    float aspect = self.view.frame.size.width / self.view.frame.size.height;
    GLKMatrix4 perspectiveMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90), aspect, 0.1, 10.0);
    GLKMatrix4 translateMatrix = GLKMatrix4MakeTranslation(0, 0, -1.6);
    self.transformMatrix = GLKMatrix4Multiply(translateMatrix, rotateMatrix);
    self.transformMatrix = GLKMatrix4Multiply(perspectiveMatrix, self.transformMatrix);

GLKMathDegreesToRadians是將角度轉換成弧度

GLKit提供了GLKMatrix4MakePerspective方法便捷的生成透視投影矩陣。方法有4個參數float fovyRadians, float aspect, float nearZ, float farZ。fovyRadians表示視角。aspect表示屏幕寬高比，為了將所有軸的單位長度統一，所以需要知道屏幕寬高比多少。nearZ表示可視范圍在Z軸的起點到原點(0,0,0)的距離，farZ表示可視范圍在Z軸的終點到原點(0,0,0)的距離,nearZ和farZ始終為正。下面是透視投影的剖面示意圖。

透視投影矩陣默認的可視方向是向Z軸的反方向生長的。視角（fovyRadians）越大，看到的東西就越多。只有在nearZ和farZ兩個平面范圍內的點才會被投影到屏幕上，當然這些點也必須在視角的范圍內。根據上面的條件，一個位于z=0上的點是不能被投影到屏幕的，所以我增加了一個平移矩陣GLKMatrix4 translateMatrix = GLKMatrix4MakeTranslation(0, 0, -1.6),為了演示近大遠小的視覺效果，我又增加了旋轉矩陣GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(varyingFactor, 0, 1, 0)。最后將 perspectiveMatrix * translateMatrix * rotateMatrix的結果賦值給Vertex Shader中的transform。
如果讀者還記得上一篇提到的矩陣運算的話，就應該知道perspectiveMatrix * translateMatrix * rotateMatrix代表著先旋轉再平移最后執行透視投影。這是以后所有3D變換操作的基本順序，投影必須放在最后。透視投影的效果如下。

正交投影

代碼如下

 // 正交投影
    float viewWidth = self.view.frame.size.width;
    float viewHeight = self.view.frame.size.height;
    GLKMatrix4 orthMatrix = GLKMatrix4MakeOrtho(-viewWidth/2, viewWidth/2, -viewHeight / 2, viewHeight/2, -10, 10);
    GLKMatrix4 scaleMatrix = GLKMatrix4MakeScale(200, 200, 200);
    self.transformMatrix = GLKMatrix4Multiply(scaleMatrix, rotateMatrix);
    self.transformMatrix = GLKMatrix4Multiply(orthMatrix, self.transformMatrix);

正交投影其實比較好理解，原先屏幕的X軸從左到右是-1到1，Y軸從上到下是1到-1，經過GLKMatrix4 orthMatrix = GLKMatrix4MakeOrtho(-viewWidth/2, viewWidth/2, -viewHeight / 2, viewHeight/2, -10, 10)正交矩陣的變換，就會變成X軸從左到右是-viewWidth/2到viewWidth/2，Y軸從上到下是viewHeight/2到-viewHeight / 2，viewWidth和viewHeight是屏幕的寬和高。我增加了一個縮放矩陣GLKMatrix4 scaleMatrix = GLKMatrix4MakeScale(200, 200, 200)，是為了可以看見渲染出來的矩形。因為它原本只有1 x 1的大小，在正交投影后，也就是一個像素的大小，幾乎是看不見的。正交投影里的nearZ和farZ代表可視的Z軸范圍，超出的點就不可見了。代碼效果如下。

本篇主要介紹了OpenGL中的兩個重要投影矩陣，掌握好它們對于后面更深入的學習3D和2D渲染有著非常重要的作用。

下一篇會講解攝像機，作為3D渲染中最基本的三大矩陣MVP之一，學習完之后就可以正式踏入3D渲染的世界了。