获取示例代码
上一篇介绍了变换矩阵，本篇将介绍两个重要的变换矩阵，透视投影矩阵和正交投影矩阵。在介绍代码之前，先来简单介绍一下这两个矩阵的作用。
透视投影矩阵
主要作用是模仿人眼观察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渲染的世界了。
网友评论