OpenGL.ES在Android上的简单实践：4-曲棍球（正交投影解决横屏变形）

OpenGL.ES在Android上的简单实践：4-曲棍球（正交投影解决横屏变形）

 

你可能还没注意到曲棍球桌子在横屏的时候是怎样的龌蹉难看。不信你看看：

桌子在横屏模式情况下被压扁了，这之所以会发生，是因为我们之前直接把坐标传递給OpenGL，但OpenGL在每个屏幕上都是归一化坐标系，没有考虑屏幕的宽高比。那么怎么处理科学的处理这个问题呢？

一个可行的方法就是把较小的范围固定在 [-1,1]内，而按屏幕尺寸的比例调整较大的范围。 举例来说，在竖屏情况下，其宽度是720， 而高度是1280，因此我们可以把宽度范围限定在 [-1,1]，并把高度范围调整为 [-1280/720, 1280/720]或 [-1.78,1.78]。横屏的时候同理，把宽度范围设为 [-1.78,1.78]，而高度范围控制在 [-1,1]。

在OpenGL开发团队肯定是能预料到的，以上方法（调整坐标空间）虽然能解决问题，但是从性能/编码程度来看，都不是一般的烦，那要怎么办？首先，我们需要停止直接在归一化设备坐标上工作，而开始在虚拟坐标空间里工作，紧接着，把虚拟坐标转换回归一化设备坐标的方法，这种转换应该把屏幕方向计算在内。以上操作我们称之为正交投影（ortho graphic projection）。

当我们使用正交投影把虚拟坐标变换回归一化设备坐标时，实际上定义了三维世界内部的一个区域，在这个区域的所有东西都会显示在屏幕上，而区域外的都会被裁剪。下面一幅来自灵魂画师的图，我们能在一个封闭的立方体内看到一个女孩和一棵树。当我们使用正交投影矩阵把这个立方体映射到屏幕上时，就会看到女孩和树的正照了。

利用正交投影矩阵改变立方体的大小，以使我们可以在屏幕上看到或多或少的场景，也能改变弥补屏幕的宽高比的影响。

 

OpenGL大量使用了向量和矩阵，矩阵的最重要的用途之一就是建立正交投影，和往后会学到的透视投影。其原因之一是，从本质上来说，使用矩阵做投影只涉及对一组数据按顺序执行大量的加法和乘法。回顾大学时代的线性代数，如果不太记得了，请到这里（矩阵数学）复习一下，一旦理解了这些基础的线性代数，就可以开始学习如何用矩阵做正交投影了。

我们将使用android.opengl.Matrix的orthoM方法定义生成一个正交投影。我们来看看orthoM的所有参数：

 

orthoM(float[] m, int mOffset, float left, float right, float bottom, float top, float near, float far)

float[] m：目标数组，这个数组的长度至少有16个元素，这样才能储存正交投影。
int mOffset：结果矩阵起始的偏移值。
float left：x轴的最小范围
float right：x轴的最大范围
float bottom：y轴的最小范围
float top：y轴的最大范围
float near：z轴的最小范围
float far：z轴的最大范围
当我们调用这个方法的时候，它应该产生下面的正交投影矩阵：

 

注意到z轴上的值有一个负号，它的效果是翻转z坐标。这就意味着，物体离得越远，z坐标的负值会越来越小。这说明什么？这是历史和传统的缘故，这里（左手与右手坐标系统）作出讲解，我们现在只需要知道结论就好了。因为Android上的OpenGL默认是使用右手坐标系的。（Direct3D使用的是左手坐标系）

好了，说了那么多废话，让我们现在更新代码吧。首先从着色器开始，我们更新simple_vertex_shader.glsl。

 

uniform mat4 u_Matrix;

attribute vec4 a_Position;
attribute vec4 a_Color;

varying vec4 v_Color;

void main()
{
    v_Color = a_Color;
    gl_Position = u_Matrix * a_Position;
    gl_PointSize = 20.0;
}gl_Position = u_Matrix * a_Position;
    gl_PointSize = 20.0;
}

我们添加了一个新的uniform定义“u_Matrix”，并把它定义为一个mat4类型，意思是这个uniform代表一个4*4的矩阵，随后我们把这个矩阵与传递的位置进行相乘。这意味着顶点数组不用再被翻译为归一化设备坐标了，其将理解为存在于正交矩阵所定义的虚拟坐标空间中。（重点）然后通过正交矩阵把坐标从虚拟坐标空间变换归一化设备坐标。

 

我们回到Renderer中，添加获取u_Matrix属性的模板代码：

 

private static final String U_MATRIX = "u_Matrix";
private int uMatrixLocation;

@Override
public void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {
       ... ...
       uMatrixLocation = GLES20.glGetUniformLocation(programId, U_MATRIX);

}

下一步就是创建正交投影矩阵，我们在onSurfaceChanged()更新代码：

 

 

    @Override
    public void onSurfaceChanged(GL10 gl10, int width, int height) {
        GLES20.glViewport(0,0,width,height);

        final float aspectRatio = width > height ?
                (float)width / (float)height   :
                (float)height / (float)width ;
        if(width > height){
            Matrix.orthoM(projectionMatrix,0, -aspectRatio, aspectRatio,   -1f,1f,    -1f,1f);
        } else {
            Matrix.orthoM(projectionMatrix,0, -1f,1f,    -aspectRatio, aspectRatio,   -1f,1f);
        }
    }

好了，就差一步，我们在onDrawFrame把正交矩阵传到着色器

@Override
    public void onDrawFrame(GL10 gl10) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        GLES20.glUniformMatrix4fv(uMatrixLocation,1, false,  projectionMatrix,0);
        ... ...
    }

运行程序，观察竖屏横屏的桌子吧。

额，横屏是没压扁了，但是怎么感觉不太对劲，长方桌子怎么变成了正方形了。还记得上边红色加粗的重点吗？我们还没修改顶点数据呢！让我们更新桌子的结构，让y轴拉伸（0.5->0.8）。

 

 

float[] tableVerticesWithTriangles = {
            // X, Y, R, G, B
            // 三角扇
             0,     0,     1f, 1f, 1f,
            -0.5f, -0.8f,  0.7f,0.7f,0.7f,
             0.5f, -0.8f,  0.7f,0.7f,0.7f,
             0.5f,  0.8f,  0.7f,0.7f,0.7f,
            -0.5f,  0.8f,  0.7f,0.7f,0.7f,
            -0.5f, -0.8f,  0.7f,0.7f,0.7f,
            // 中间的分界线
            -0.5f,  0f,    1f,0f,0f,
             0.5f,  0f,    1f,0f,0f,
            // 两个木槌的质点位置
             0f,   -0.4f,  0f,0f,1f,
             0f,    0.4f,  1f,0f,0f,
    };

大家自己去观察运行结果吧。 _(¦3」∠)_
 

 

小结：
        这节内容不多，我们引入了正交投影来解决屏幕长宽比例改变后，坐标归一化的问题。重点是，顶点数组不用再被直接设置为归一化设备坐标了，而是将其理解为存在于正交矩阵所定义的虚拟坐标空间中。