学习OpenGL ES之摄像机

作者: handyTOOL | 来源:发表于2017-05-02 17:23 被阅读588次

    本系列所有文章目录

    获取示例代码


    上一篇文章中说到了透视和正交两种投影矩阵,文末提到了三个基本矩阵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。本文的例子将绘制两个矩形,所以我为它们分别定义了模型矩阵modelMatrix1modelMatrix2

    @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 projectionMatrixuniform cameraMatrix赋值。每个矩形绘制之前,再将各自的modelMatrix赋值给uniform modelMatrix,就像开头说的那样,每个3D模型有自己的模型变换。

    最终效果如下。

    本篇主要介绍了摄像机(观察矩阵),三大基本矩阵MVP的概念。下一篇小试牛刀,开始渲染真正的3D物体-正方体。

    相关文章

      网友评论

      本文标题:学习OpenGL ES之摄像机

      本文链接:https://www.haomeiwen.com/subject/jqmctxtx.html