获取示例代码
上一篇文章中说到了透视和正交两种投影矩阵，文末提到了三个基本矩阵MVP。本文就以介绍MVP为开头，然后再详细讲解摄像机的概念。
MVP表示的是模型矩阵（Model），观察矩阵（View），投影矩阵（Projection）。投影矩阵介绍过了。模型矩阵针对的是单个3D模型，渲染每一个3D模型前，需要将各自的模型矩阵传递给Vertex Shader。观察矩阵针对的是场景中的所有物体，当观察矩阵改变时，所有顶点的位置都会受到影响，就好像你移动现实世界的摄像机，拍摄到的场景就会变化一样。所以观察矩阵可以理解为OpenGL 3D世界中的摄像机。我们有了摄像机这个变换矩阵之后，就可以很方便的在3D世界中游览，就像第一人称视角游戏中一样。
大概了解MVP之后，我们开始使用代码实现它们。首先要修改一下Vertex Shader。
attribute vec4 position;
attribute vec4 color;
uniform float elapsedTime;
uniform mat4 projectionMatrix;
uniform mat4 cameraMatrix;
uniform mat4 modelMatrix;
varying vec4 fragColor;
void main(void) {
fragColor = color;
mat4 mvp = projectionMatrix * cameraMatrix * modelMatrix;
gl_Position = mvp * position;
}
我把之前的uniform transform换成了三个变换矩阵projectionMatrix,cameraMatrix,modelMatrix,它们分别是投影矩阵，观察矩阵，模型矩阵。将它们相乘projectionMatrix * cameraMatrix * modelMatrix，结果乘以position赋值给gl_Position。注意相乘的顺序，这个顺序的结果是先进行模型矩阵变换，再是观察矩阵，最后是投影矩阵变换。这样Vertex Shader中的MVP就实现完了，很简单是不是。
回到OC代码，我将之前的属性transform换成了4个变换矩阵，分别是两个M和VP。本文的例子将绘制两个矩形，所以我为它们分别定义了模型矩阵modelMatrix1和modelMatrix2。
@property (assign, nonatomic) GLKMatrix4 projectionMatrix; // 投影矩阵
@property (assign, nonatomic) GLKMatrix4 cameraMatrix; // 观察矩阵
@property (assign, nonatomic) GLKMatrix4 modelMatrix1; // 第一个矩形的模型变换
@property (assign, nonatomic) GLKMatrix4 modelMatrix2; // 第二个矩形的模型变换
接下来初始化这些属性。
// 使用透视投影矩阵
float aspect = self.view.frame.size.width / self.view.frame.size.height;
self.projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90), aspect, 0.1, 100.0);
// 设置摄像机在 0，0，2 坐标，看向 0，0，0点。Y轴正向为摄像机顶部指向的方向
self.cameraMatrix = GLKMatrix4MakeLookAt(0, 0, 2, 0, 0, 0, 0, 1, 0);
// 先初始化矩形1的模型矩阵为单位矩阵
self.modelMatrix1 = GLKMatrix4Identity;
// 先初始化矩形2的模型矩阵为单位矩阵
self.modelMatrix2 = GLKMatrix4Identity;
投影矩阵使用了透视投影进行初始化。两个模型矩阵初始化为单位矩阵。本文的主角观察矩阵初始化为摄像机在 0，0，2 坐标，看向 0，0，0点，向上朝向0，1，0。GLKMatrix4MakeLookAt提供了快捷创建观察矩阵的方法，需要传递9个参数，摄像机的位置eyeX，eyeY，eyeZ，摄像机看向的点centerX，centerY，centerZ，摄像机向上的朝向upX, upY, upZ。改变这几个参数就能控制摄像机在3D世界中通过不同角度拍摄物体。
我把上一篇的剖面示意图做了一下修改。
图中的lookAt就是center。
我们可以这么理解观察矩阵。在观察矩阵的作用下，透视矩阵的原点变成了摄像机的位置eye。up决定了摄像机围绕eye和lookAt形成的轴（本例中就是Z轴）的旋转角度，读者可以修改本例的中的up值看看效果。lookAt决定了摄像机能看到的区域，可以看做是控制摄像机在Y轴和X轴上的旋转角度。
在第一人称的游戏中，只要控制lookAt的位置就可以实现360度查看周边景物的效果，后面介绍到渲染3D场景的时候会深入讲解。
初始化完后在update中为这些矩阵赋新的值。
- (void)update {
[super update];
float varyingFactor = (sin(self.elapsedTime) + 1) / 2.0; // 0 ~ 1
self.cameraMatrix = GLKMatrix4MakeLookAt(0, 0, 2 * (varyingFactor + 1), 0, 0, 0, 0, 1, 0);
GLKMatrix4 translateMatrix1 = GLKMatrix4MakeTranslation(-0.7, 0, 0);
GLKMatrix4 rotateMatrix1 = GLKMatrix4MakeRotation(varyingFactor * M_PI * 2, 0, 1, 0);
self.modelMatrix1 = GLKMatrix4Multiply(translateMatrix1, rotateMatrix1);
GLKMatrix4 translateMatrix2 = GLKMatrix4MakeTranslation(0.7, 0, 0);
GLKMatrix4 rotateMatrix2 = GLKMatrix4MakeRotation(varyingFactor * M_PI, 0, 0, 1);
self.modelMatrix2 = GLKMatrix4Multiply(translateMatrix2, rotateMatrix2);
}
float varyingFactor = (sin(self.elapsedTime) + 1) / 2.0;的值从0到1。
摄像机的Z轴坐标为2 * (varyingFactor + 1)，从2到4。
第一个矩形向左偏移0.7，绕Y轴旋转varyingFactor * M_PI * 2，从0到360度。
第二个矩形向右偏移0.7，绕Z轴旋转varyingFactor * M_PI * 2，从0到360度。
最后给uniform赋值。
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
[super glkView:view drawInRect:rect];
GLuint projectionMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "projectionMatrix");
glUniformMatrix4fv(projectionMatrixUniformLocation, 1, 0, self.projectionMatrix.m);
GLuint cameraMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "cameraMatrix");
glUniformMatrix4fv(cameraMatrixUniformLocation, 1, 0, self.cameraMatrix.m);
GLuint modelMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "modelMatrix");
// 绘制第一个矩形
glUniformMatrix4fv(modelMatrixUniformLocation, 1, 0, self.modelMatrix1.m);
[self drawRectangle];
// 绘制第二个矩形
glUniformMatrix4fv(modelMatrixUniformLocation, 1, 0, self.modelMatrix2.m);
[self drawRectangle];
}
先给uniform projectionMatrix和uniform cameraMatrix赋值。每个矩形绘制之前，再将各自的modelMatrix赋值给uniform modelMatrix，就像开头说的那样，每个3D模型有自己的模型变换。
最终效果如下。
本篇主要介绍了摄像机（观察矩阵），三大基本矩阵MVP的概念。下一篇小试牛刀，开始渲染真正的3D物体-正方体。
网友评论