在 OpenGL ES 2 中将原点设置为屏幕的左上角

我正在使用 OpenGL ES 2.0 开发 Android 应用程序。它由覆盖在 3D 场景上的 2D HUD 组成。 3D 部分一切都很好，但我无法弄清楚如何将原点定位在屏幕的左上角（y 轴朝下）在二维绘图时。现在，我的原点位于屏幕中心，我只是在绘制时从坐标中减去宽度和高度的一半。 （我知道这是一个很棘手的解决方案，我想解决这个问题！）

这是相关代码：

GLES20.glViewport(0, 0, surfaceWidth, surfaceHeight);
Matrix.orthoM(projectionMatrix, 0, -width / 2, width / 2, height / 2, -height / 2, -1, 1);
Matrix.setLookAtM(viewMatrix, 0, 0, 0, 2f, 0, 0, 0, 0, -1, 0);
Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, viewMatrix, 0);

以下是相关的着色器：

private final static String vertexShaderCode =
                "uniform mat4 uMVPMatrix;" +
                "attribute vec2 aTexCoordinate;" +
                "varying vec2 vTexCoordinate;" +
                "attribute vec4 aPosition;" +
                "attribute vec4 aColor;" +
                "varying vec4 vColor;" +
                "void main() {" +
                "  vColor = aColor;" +
                "  vTexCoordinate = aTexCoordinate;" +
                "  gl_Position = aPosition * uMVPMatrix;" +
                "}";

private final static String fragmentShaderCode =
                "precision mediump float;" +
                "uniform sampler2D uTexture;" +
                "varying vec2 vTexCoordinate;" +
                "varying vec4 vColor;" +
                "void main() {" +
                "  gl_FragColor = vColor * texture2D(uTexture, vTexCoordinate);" +
                "}";

我尝试过的：

• 我尝试使用这一行代替：

  Matrix.orthoM(projectionMatrix, 0, 0, width, height, 0, -1, 1);
  

• 我尝试将原点定位在左下角，而不是左上角（我不应该这样做，但我还是尝试了）。

• 我尝试过切换顺序aPosition and uMVPMatrix在顶点着色器的倒数第二行。

这三个更改的组合没有解决我的问题（2D 对象不渲染）。

我尝试的另一件事是将原点设置为偏离中心一个像素，然后是两个，然后是三个，依此类推。随着我偏离中心的距离越来越远，图像不断倾斜，最终变得太薄而无法看到——但这仍然不存在。不要告诉我如何解决这个问题。

那么问题又来了：如何在 OpenGL ES 2.0 中将原点定位在左上角？

附：我的合同（第一份工作！）将于 7 月 29 日结束，所以我很快就需要答复；我不想给后来的人留下这样的小问题。

OpenGL中没有一个规则只有一个mvpMatrix。这很好，因为您可以自定义很多视图。

如果您的所有应用程序都基于您在此处显示的 mvpMatrix，我建议您为您要求的提案创建另一个 mvpMatrix：将视图的中心放在左上角。

所以，答案很简单，让我们重新创建每个矩阵。首先，查看Matrix：

Matrix.setLookAtM(viewMatrix, 0, 
     0, 0,  6,   //eye
     0, 0,  0,   //center
     0, 1,  0);  //UP *remove your -1

魔术如下。你必须颠倒底部和顶部：

float screenRatio = (float) width / height;
Matrix.orthoM(projectionMatrix, 0, 
        0, screenRatio, // left, right
        1, 0,           // bottom, top        <----Solution is invert bottom with top
        -1, 10);        // near, far

最后：

    Matrix.multiplyMM(
            viewProjectionMatrix, 0, 
            projectionMatrix, 0, 
            viewMatrix, 0);

PS：不需要改变GLES20.glViewport(0, 0, surfaceWidth, surfaceHeight);

OpenGL对于这个问题有很多解决方案，因为你可以尽可能地处理所有矩阵。

另一种解决方案是自定义您自己的矩阵，而不使用Matrix.orthoM(..) or Matrix.frustum(..):

public static final float[] topLeftMatrix(int width, int height){
    float matrix[] = new float[16];

    // This is inverse of viewPort matrix
    matrix[0] = 2.0f/width;
    matrix[1] = 0;
    matrix[2] = 0;
    matrix[3] = 0;

    matrix[4] = 0;
    matrix[5] = -2.0f/height;
    matrix[6] = 0;
    matrix[7] = 0;

    matrix[8] = 0;
    matrix[9] = 0;
    matrix[10] = 1;
    matrix[11] = 0;

    matrix[12] = -1;
    matrix[13] = 1;
    matrix[14] = 0;
    matrix[15] = 1;

    return matrix;
}

上面的这个矩阵非常适合处理像素上的对象（例如用户界面）。

为了充分理解，我建议您阅读这篇文章：使用 OpenGL 的 3D 图形。它对我理解 opengl 的魔力帮助很大。

P.S：您的着色器有错误。将矩阵 4x4 乘以向量 4x1 的正确方法是：

gl_Position = uMVPMatrix * aPosition;