Android OpenGL ES 4.正交投影

2019年5月26日 187次阅读 来源: Benhero

前言

之前我们的所有图形效果，都是变形的，比如我们原本绘制的是长宽比是1:1的，结果在手机屏幕上的效果展示却是长方形。那么，本节课我们通过正交投影来解决这个问题。
本节课主要讲解如何去编写相关代码来解决问题，而具体的原理、概念、GL坐标体系变换等暂不做深入说明，会在之后的课程在讲解。

归一化设备坐标

在OpenGL中，我们要渲染的所有物体都要映射到x轴、y轴、z轴上的[-1, 1]范围内，这个范围内的坐标被称为归一化设备坐标，其独立于屏幕的实际尺寸或者形状。归一化设备坐标假定的坐标空间是一个正方形。如下图

《Android OpenGL ES 4.正交投影》 归一化设备坐标.png

但是我们手机设备一般都不是正方形的，而是长方形的。所以导致x和y两个方向上，同样的比例值，但是视觉上所占的长度却是不一样的。如下图，绘制一个半径占0.5的圆时，效果却是一个椭圆。

《Android OpenGL ES 4.正交投影》 归一化设备坐标实际效果.png

解决这个问题，一般我们的解决方案步骤如下：

  1. 在设置物体的坐标、尺寸时，将短边视为标准边，取值范围是[-1,1]，而较长边的取值范围则是[-N,N]，其中N≥1，N是长边/短边的比例系数。
  2. 顶点着色器设置顶点参数的时候，将长边上的值从[-N,N]换算为[-1,1]的范围内。

步骤如下图：

《Android OpenGL ES 4.正交投影》 解决步骤1.png
《Android OpenGL ES 4.正交投影》 解决步骤2.png

代码实现

针对上面的解决步骤，步骤1只需要我们在设置顶点的时候按照这个标准即可。而步骤2则是本课程的关键。
要对坐标向量进行换算，可以使用矩阵来解决问题。

在三维图形学中，一般使用的是4阶矩阵。OpenGL中使用的是列向量，如[xyzw]T，所以与矩阵相乘时，矩阵在前，向量在后。

知道了原理之后，我们代码实现上需要解决以下几个问题：

  1. 如何获得一个矩阵，可以把坐标范围从[-N,N]换算为[-1,1]的范围内
  2. 如何将矩阵传递到GLSL中
  • 对于问题1，Android提供了Matrix.orthoM这个方法来处理矩阵。
  • 对于问题2，与获取顶点索引类似，可以再GLSL中声明一个mat4类型的矩阵变量，获取其索引，再传递值给她

具体代码实现如下：

private static final String VERTEX_SHADER = "" +
    // mat4：4×4的矩阵
    "uniform mat4 u_Matrix;\n" +
    "attribute vec4 a_Position;\n" +
    "void main()\n" +
    "{\n" +
    // 矩阵与向量相乘得到最终的位置
    "    gl_Position = u_Matrix * a_Position;\n" +
    "}";
private int uMatrixLocation;
/**
 * 矩阵数组
 */
private final float[] mProjectionMatrix = new float[]{
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1,
};

@Override
public void onSurfaceCreated(GL10 glUnused, EGLConfig config) {
    // 省略部分代码
    uMatrixLocation = getUniform("u_Matrix");
}

@Override
public void onSurfaceChanged(GL10 glUnused, int width, int height) {
    // 边长比(>=1)，非宽高比
    float aspectRatio = width > height ?
            (float) width / (float) height :
            (float) height / (float) width;

    // 1. 矩阵数组
    // 2. 结果矩阵起始的偏移量
    // 3. left：x的最小值
    // 4. right：x的最大值
    // 5. bottom：y的最小值
    // 6. top：y的最大值
    // 7. near：z的最小值
    // 8. far：z的最大值
    if (width > height) {
        // 横屏
        Matrix.orthoM(mProjectionMatrix, 0, -aspectRatio, aspectRatio, -1f, 1f, -1f, 1f);
    } else {
        // 竖屏or正方形
        Matrix.orthoM(mProjectionMatrix, 0, -1f, 1f, -aspectRatio, aspectRatio, -1f, 1f);
    }
    // 更新u_Matrix的值，即更新矩阵数组
    GLES20.glUniformMatrix4fv(uMatrixLocation, 1, false, mProjectionMatrix, 0);
}

参考

见Android OpenGL ES学习资料所列举的博客、资料。

GitHub代码工程

本系列课程所有相关代码请参考我的GitHub项目GLStudio。

课程目录

本系列课程目录详见 简书 – Android OpenGL ES教程规划

    原文作者：Benhero
    原文地址: https://www.jianshu.com/p/51a405bc52ed
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞