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的左上角放置原点？

P.S。我的合同（第一份工作！）在7月29日结束，所以我很快就需要答案;我不想让下一个人有这样的hacky修复。

Answer 1

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

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

所以，答案很简单，让我们重新创建每个矩阵。首先，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);

P.S：不需要改变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：着色器中出现错误。将matrix4x4乘以向量4x1的正确方法是：

gl_Position = uMVPMatrix * aPosition;

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

1 个答案: