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

Question

我正在使用 OpenGL ES 2.0 开发 Android 应用程序。它由叠加在 3D 场景上的 2D HUD 组成。 3D 部分一切正常，但在 2D 中绘制时，我无法弄清楚如何将原点定位在屏幕的左上角(y 轴指向下方)。现在我的原点在屏幕的中心，我只是在绘制时从坐标中减去一半的宽度和高度。 (我知道这是一个 hacky 解决方案，我想解决这个问题!)

相关代码如下:

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 和 uMVPMatrix 的顺序。

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

我尝试的另一件事是将原点设置为偏离中心一个像素，然后是两个像素，然后是三个像素，依此类推。我越是偏离中心，图像就会变得越歪斜，最终变得太薄以至于看不见——但是仍然没有告诉我如何解决这个问题。

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

附言我的契约(Contract)(第一份工作!)将于 7 月 29 日到期，所以我需要尽快得到答复；我不想让下一个人留下这样的 hacky 修复程序。

Answer 1

在 OpenGL 中不是只有一个 mvpMatrix 的规则。这很好，因为您可以自定义很多 View 。

如果您的所有应用程序都基于您在此处显示的 mvpMatrix，我建议您为您提出的建议创建另一个 mvpMatrix:使 View 的中心位于左上角。

所以，答案很简单，让我们重新创建每个矩阵。首先，viewMatrix:

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);

附言:不需要更改 GLES20.glViewport(0, 0, surfaceWidth, surfaceHeight);

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

另一种解决方案是自定义您自己的矩阵，而不使用 Matrix.orthoM(..) 或 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;
}

上面的这个矩阵非常适合处理像素上的对象(比如用户界面)。

为了全面理解，我建议您阅读这篇文章:3D Graphics with OpenGL .它对我理解 opengl 魔法有很大帮助。

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

gl_Position = uMVPMatrix * aPosition;