OpenGL ES MVP/变换投影矩阵(8)

OpenGL ES MVP/变换投影矩阵(8)

简述

通过前面几节的学习，目前我们已经可以渲染自己想要的图像，也可以通过纹理加载图片进行渲染。接下来我们来学习一下MVP，这里的MVP不是Android应用开发里的框架MVP，而是Model，View，Projection。
首先我们先来解释一下这个是做什么的，这三者都是用来计算最终图像呈现的，举个例子，我们如果要开发一个游戏，游戏里的一个物体放在那里，物体放置的角度不同，我们看到的效果可能不一样，我们从不同的位置角度看物体，看到的也可能不一样，MVP就是在计算物体在不同的放置情况，不同的观察角度最终的成像，接下来我们一个一个介绍。

变换矩阵

在开始介绍MVP三个概念之前，我们先来介绍一下变换矩阵。
变换矩阵是MVP的基础原理，我们这里只介绍一下概念，不会深入它的原理，因为它的原理是一些数学运算，需要一些线性代数的基础。
我们对图像的变换计算，都是通过乘以一个矩阵来实现的，我们只需要知道我们将坐标乘以一个矩阵，将它映射到另一个坐标，这样就可以完成图形的变换，比如平移，缩放，翻转等等，所以我们各种变换都是通过乘以一个变换矩阵实现的，每一个模型都有一个对应的矩阵。

MVP

坐标变换：
最终坐标 = Mat(projection) * Mat(View) * Mat(model) * 原坐标

投影（Projection）

我们的图像可能是3D的，但是最终需要显示在我们的屏幕上，我们的屏幕是2D的，只能显示一个平面，所以我们需要通过计算将3D图像最终显示在2D到图像上，这便是一种投影。
投影矩阵一般有两种，一种是透视投影矩阵，另一种是正交投影矩阵。
透视投影矩阵是可以越远越小，类似现在的3D游戏，而正交投影有点类似2.5D游戏，大小不会受到远近的影响。

视口（View）

视口所处理的问题就是相机位置，比如相机向左移动，其实看到的图像就向右移动了，View的变换矩阵就是用于描述这个逻辑。

模型（Model）

这个变换矩阵描述的是物体自己的变化，比如物体自己放大，翻转，平移等等。

渲染正方体

我们以渲染一个旋转的正方体为例来介绍这几个模型。

顶点数据

我们需要渲染一个正方体，有8个顶点，正方体由6个面组成，每个面是2个三角形，就是12个三角形，我们索引缓冲区就是12个三角形，36个点。

private float[] vertexArray = new float[] {
        -0.5f, -0.5f, -0.5f,
        0.5f, -0.5f, -0.5f,
        -0.5f, 0.5f, -0.5f,
        0.5f, 0.5f, -0.5f,
        -0.5f, -0.5f, 0.5f,
        0.5f, -0.5f, 0.5f,
        -0.5f, 0.5f, 0.5f,
        0.5f, 0.5f, 0.5f,
};

private short[] indexArray = new short[] {
        0,1,2,
        1,2,3,

        0,1,4,
        1,4,5,

        2,3,7,
        2,6,7,

        4,5,6,
        5,6,7,

        0,2,4,
        2,6,4,

        1,3,5,
        3,5,7
};

着色器

顶点着色器有一个统一变量mvpMatrix，这个矩阵由model矩阵，view矩阵，projection矩阵相乘得到，我们这里只是演示就将乘法放在Cpu上处理，其实这种乘法操作放在GPU上效率会更高。
片段着色器中我们使用一个统一变量表示颜色，这里我们想要把每一个面渲染成不同颜色，因为如果是同颜色又没有边界，就看不出立体的效果。
这里我们会在每渲染两个三角形后修改统一变量来修改颜色，后面渲染的时候会看到，这个方法其实效率不是最高的，因为会多次调用DrawCall，多次DrawCall必然会增加开销，不过我们这里主要是为了演示变换矩阵的用法，所以就怎么方便怎么来了。

private final String vertexShaderCode =
        "attribute vec4 vPosition;" +
                "uniform mat4 mvpMatrix;" +
                "void main() {" +
                "  gl_Position = mvpMatrix * vPosition;" +
                "}";

private final String fragmentShaderCode =
        "precision mediump float;" +
                "uniform vec4 outputColor;" +
                "void main() {" +
                "  gl_FragColor = outputColor;" +
                "}";

顶点缓冲区/索引缓冲区数据填充

填充流程和之前基本一样，新增了一个GLES30.glEnable(GL_DEPTH_TEST)调用，这个表示需要OpenGL ES根据Z轴来判断深度，处理覆盖关系。

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    // 清除颜色
    GLES30.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    GLES30.glEnable(GL_DEPTH_TEST);
    // 创建顶点缓冲区
    int[] idBuffer = new int[2];
    GLES30.glGenBuffers(2, idBuffer, 0);
    vertexBufferId = idBuffer[0];
    elementBufferId = idBuffer[1];

    // 顶点缓冲区数据填充
    FloatBuffer vertexBuffer = ByteBuffer.allocateDirect(vertexArray.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
    vertexBuffer.put(vertexArray);
    vertexBuffer.position(0);

    GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vertexBufferId);
    GLES30.glBufferData(
            GLES30.GL_ARRAY_BUFFER,
            vertexArray.length * 4,
            vertexBuffer,
            GLES30.GL_STATIC_DRAW
    );
    GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, 0);

    ShortBuffer indexBuffer = ByteBuffer.allocateDirect(indexArray.length * 2).order(ByteOrder.nativeOrder()).asShortBuffer();
    indexBuffer.put(indexArray);
    indexBuffer.position(0);
    GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, elementBufferId);
    GLES30.glBufferData(
            GLES30.GL_ELEMENT_ARRAY_BUFFER,
            indexArray.length * 2,
            indexBuffer,
            GLES30.GL_STATIC_DRAW
    );
    GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, 0);

    // shader
    shaderProgramId = initShaderProgram(vertexShaderCode, fragmentShaderCode);
}

初始化projection和view矩阵

setIdentityM初始化矩阵，会将矩阵所有值初始化为0，斜角线值初始化为1。
使用setLookAtM获取视口矩阵，使用perspectiveM获取透视投影矩阵，参数下面介绍了。
将两个矩阵相乘存放在vpMatrix，这里之所以没有把model矩阵也放上，是因为我们需要通过model矩阵变化实现正方体旋转，所以需要将model矩阵放在渲染的时候。

public void onSurfaceChanged(GL10 gl, int width, int height) {
    GLES30.glViewport(0, 0, width, height);
    // setLookAtM用于获取view矩阵，参数为相机位置x,y,z。模型中心位置坐标x,y,z。向上向量x,y,z
    float[] viewMatrix = new float[16];
    Matrix.setIdentityM(viewMatrix, 0);
    Matrix.setLookAtM(viewMatrix, 0, 3,3,5,0,0f,0f,0f,1f, 0f);

    float[] projectionMatrix = new float[16];
    Matrix.setIdentityM(projectionMatrix, 0);
    // 获取透视投影矩阵，参数有：视角范围45度，宽高比，透视最近距离和最远距离。
    Matrix.perspectiveM(projectionMatrix,0,45f, ((float) getWidth()) / getHeight(),0.3f,50);
    Matrix.multiplyMM(vpMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
}

渲染

我们这里用radiu表示渲染角度，每次渲染加2度，如果是60HZ则一秒钟会旋转120度。
通过model矩阵旋转radius度，每次渲染两个三角形换一个颜色，以实现不同面不同颜色。
乘出来最终的矩阵就是mvp矩阵，通过统一变量传递mvp矩阵。

public void onDrawFrame(GL10 gl) {
    // 清除屏幕
    GLES30.glClear(GL_DEPTH_BUFFER_BIT);
    GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT);
    // 使能着色器程序
    GLES30.glUseProgram(shaderProgramId);

    GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vertexBufferId);
    int positionLocation = GLES30.glGetAttribLocation(shaderProgramId, "vPosition");
    GLES30.glEnableVertexAttribArray(positionLocation);
    GLES30.glVertexAttribPointer(positionLocation, 3, GLES30.GL_FLOAT, false, 3 * 4, 0);

    radiu += 2;
    if (radiu >= 360) {
        radiu = radiu % 360;
    }
    Matrix.setIdentityM(modelMatrix, 0);
    // model矩阵旋转。后三个参数x,y,z为变量轴
    Matrix.rotateM(modelMatrix, 0, radiu, 1, 1, 0);
    Matrix.multiplyMM(mvpMatrix, 0, vpMatrix, 0, modelMatrix, 0);

    int matrixLocation = GLES30.glGetUniformLocation(shaderProgramId, "mvpMatrix");
    FloatBuffer mvpMatrixBuffer = ByteBuffer.allocateDirect(vertexArray.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
    mvpMatrixBuffer.put(mvpMatrix);
    mvpMatrixBuffer.position(0);
    // 将mvp矩阵通过统一变量传给着色器
    GLES30.glUniformMatrix4fv(matrixLocation, 1, false, mvpMatrixBuffer);
    int outputColorLocation = GLES30.glGetUniformLocation(shaderProgramId, "outputColor");

    GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, elementBufferId);
    // 调用DrawCall绘制三角形
    // 每次渲染6个顶点，两个三角形，然后就换颜色。  
    for (int i = 0; i < 6; i++) {
        GLES30.glUniform4f(outputColorLocation, colorList[i][0], colorList[i][1], colorList[i][2], colorList[i][3]);
        GLES30.glDrawElements(GLES30.GL_TRIANGLES, 6, GLES30.GL_UNSIGNED_SHORT, 6 * i * 2);
    }

    // 清除配置
    GLES30.glDisableVertexAttribArray(positionLocation);
    GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, 0);
    GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, 0);
    GLES30.glUseProgram(0);
}

效果

小结

我们这节通过实现一个旋转的正方体来简单的介绍了一下MVP的矩阵变换模式。这也是我们OpenGL ES最后一节了，其实OpenGL ES还有很多高级的技术，但是几乎都是跟图像数学相关的，OpenGL ES自身的核心接口能力以及介绍的差不多了。
也许在遥远的未来，我们还会写一章Vulkan的教程，在这里埋个坑。