在 OpenGL ES 2 中将原点设置为屏幕的左上角 [英] Set origin to top-left corner of screen in OpenGL ES 2

问题描述

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

I'm developing an Android app with OpenGL ES 2.0. It consists of a 2D HUD overlaid on a 3D scene. Everything is fine with the 3D part, but I cannot figure out how to position the origin at the top-left corner of the screen (with the y-axis pointing down) when drawing in 2D. Right now I have the origin at the center of the screen and I am just subtracting half the width and height from the coordinates as I draw. (I know this is a hacky solution and I want to fix this!)

相关代码如下:

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);" +
                "}";

我尝试过的:

• 我试过改用这条线:

• I have tried using this line instead:

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

我尝试将原点定位在左下角，而不是左上角(我不应该这样做，但我还是尝试了).

I have tried positioning the origin at the bottom-left, not the top-left (I shouldn't be doing this but I tried anyway).

我尝试在顶点着色器的倒数第二行中切换 aPosition 和 uMVPMatrix 的顺序.

I have tried switching the order of aPosition and uMVPMatrix in the second-to-last line of the vertex shader.

这三个更改的组合都不能解决我的问题(2D 对象不渲染).

No combination of these three changes solved the problem for me (the 2D objects do not render).

我尝试的另一件事是将原点设置为偏离中心一个像素，然后是两个像素，然后是三个像素，等等.图像越偏离中心越偏斜，最终变得太薄而无法看到——但是仍然没有告诉我如何解决这个问题.

The other thing I tried was setting the origin to be one pixel off center, then two, then three, etc. The images kept getting skewed the more I moved off center, eventually becoming too thin to be visible -- but that still doesn't tell me how to fix this.

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

So again, the question is: how do I position the origin at the top-left in OpenGL ES 2.0?

附言我的合同(第一份工作！)将于 7 月 29 日到期，所以我很快就需要答复；我不想让下一个人像这样的黑客修复.

P.S. My contract (first job!) ends on July 29 so I need an answer pretty soon; I don't want to leave the next people with a hacky fix like this.

推荐答案

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

Is not a rule have only one mvpMatrix in OpenGL. It is good because you can customize a lot of views.

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

If all of your application is based in mvpMatrix that you showed here, I recommend you create another mvpMatrix for the proposal that you are asking: Make the center of the view in top-left corner.

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

So, the answer is simple, lets recreate every matrix. At first, viewMatrix:

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

魔法在下面.你必须颠倒底部和顶部:

The magic is below. You have to invert bottom and top:

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 有很多解决这个问题的方法，因为你可以尽可能地处理所有矩阵.

OpenGL have a lot of solution for this problem, because you can handle all matrix as you can.

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

Another solution is to customize your own matrix, without using 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;
}

上面的这个矩阵适用于处理像素上的对象(如用户界面).

This matrix above is good for handling objects over pixels (like user-interface).

为了充分理解，我建议你阅读这篇文章:3D带有 OpenGL 的图形.它对我理解 opengl 的魔力有很大帮助.

For full understanding, I recommend you read this article: 3D Graphics with OpenGL. It helped me a lot to understand the opengl magic.

P.S:你的着色器有错误.将 matrix4x4 乘以向量 4x1 的正确方法是:

P.S: there is an error in your shader. The correct way to multiply matrix4x4 by a vector 4x1 is:

gl_Position = uMVPMatrix * aPosition;

这篇关于在 OpenGL ES 2 中将原点设置为屏幕的左上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！