二维三角形与OpenGL ES 2.0

Question

编辑2：查看this GitHub project的Triangle2d sample以获取完整的工作示例。

编辑：查看accepted answer的链接，有一个很好的解释如何oortographic矩阵的作品。最后，我调整所提供的代码一点点：

float[] mvp = { 
    2f/width, 0f,   0f, 0f, 
    0f,  -2f/height, 0f, 0f, 
    0f,   0f,   0f, 0f, 
    -1f,   1f,   0f, 1f 
    }; 

请注意，我的小Z固定在0和W固定在1这个矩阵使原点（0,0）在左下角屏幕;如果你想在左上角的起源，尝试：

float[] mvp = { 
    2f/width, 0f,   0f, 0f, 
    0f,   2f/height, 0f, 0f, 
    0f,   0f,   0f, 0f, 
    -1f,  -1f,   0f, 1f 
    }; 

另一个问题是调用GLES20.glUniformMatrix4fv，我改为：

FloatBuffer b = ByteBuffer.allocateDirect(mvp.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer(); 
b.put(mvp).position(0); 
GLES20.glUniformMatrix4fv(uMvpPos, b.limit()/mvp.length, false, b); 

如果你想惹这一点，尝试this online calculator 。请记住，您的sorce文件中的行将在计算器中为列。

原问题： 我想在android上绘制一个使用OpenGL 2.0的二维三角形，但到目前为止，没有太大的成功。这是我的着色器：

(Vertex shader) 
uniform mat4 uMvp; 
attribute vec3 aPosition; 
attribute vec3 aColor; 
varying vec4 vColor; 
void main() { 
    vColor = vec4(aColor.xyz, 1.0); 
    vec4 position = vec4(aPosition.xyz, 1.0); 
    gl_Position = uMvp * position; 
}; 

(Fragment shader) 
precision mediump float; 
varying vec4 vColor; 
void main(void) 
{ 
    gl_FragColor = vColor; 
}; 

然后，在GLSurfaceView.Renderer的onSurfaceChanged方法，我把以下内容：

public void onSurfaceChanged(GL10 gl, int width, int height) 
{ 
    // here I load and compile the shaders and link the program. 
    // in the end, I use GLES20.glUseProgram(programHandle); 
    // (code omitted) 

    // create the matrix for the uniform 
    int uMvpPos = GLES20.glGetUniformLocation(programHandle, "uMvp"); 
    float[] mvp = {width, 0f, 0f, 0f, 
       0f, -height, 0f, 0f, 
       0f, 0f, -2f, 0f, 
       -1f, 1, -1f, 1}; 
    GLES20.glUniformMatrix4fv(uMvpPos, mvp.length * 4, false, mvp, 0); 

    // set viewport and clear color to white 
    GLES20.glViewport(0, 0, width, height); 
    GLES20.glClearColor(1f, 1f, 1f,1.0f); 
} 

我用的矩阵的值显示对this question。我的意图是以与画布工作相同的方式处理坐标：屏幕左上角的（0,0）和右下角的（宽度，高度）。

最后但并非最不重要的，这是onDrawFrame的代码：

public void onDrawFrame(GL10 gl) 
{ 
    int aPos = GLES20.glGetAttribLocation(programHandle,"aPosition"); 
    int aColor = GLES20.glGetAttribLocation(programHandle,"aColor"); 

    // assuming I correctly set up my coordinate system, 
    // these are the triangle coordinates and color 
    float[] data = 
     { 
     // XYZ, RGB 
     100f, 100f, 0f, 
     1f, 0f, 0f, 

     50f, 50f, 0f, 
     1f, 0f, 0f, 

     150f, 50f, 0f, 
     1f, 0f, 0f, 
     }; 

    // put all my data into a float buffer 
    // the '* 4' is because a float has 4 bytes 
    FloatBuffer dataVertex = ByteBuffer.allocateDirect(data.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer(); 
    dataVertex.put(data).position(0); 

    // set the POSITION values 
    // attribute, dataSize(number of elements), data type, normalized?, size(bytes), data 
    GLES20.glEnableVertexAttribArray(aPos); 
    GLES20.glVertexAttribPointer(aPos, 3, GLES20.GL_FLOAT, false, 6 * 4, dataVertex); 

    // set the COLOR values 
    dataVertex.position(3); // offset 
    GLES20.glEnableVertexAttribArray(aColor); 
    GLES20.glVertexAttribPointer(aColor, 3, GLES20.GL_FLOAT, false, 6 * 4, dataVertex); 

    // put a white background 
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT); 

    // and finally draw the triangle! 
    GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3); 
} 

最终的结果是......一个无聊的白色屏幕，而三角形。我想我犯了一个非常简单的错误，但我无法发现它。有什么想法吗？

Answer 1

您的正交投影矩阵是错误的。 Orthographic projection is defined as（列优先的顺序）：

2/(r-l), 0, 0, 0, 
0, 2/(t-b), 0, 0, 
0, 0, 2/(f-n), 0, 
(r+l)/(l-r), (t+b)/(b-t), (f+n)/(n-f), 1 

在你的情况r=0, l=width, t=height, b=0, f=1, n=0，你会得到：

-2/width, 0, 0, 0, 
0, 2/height, 0, 0, 
0, 0, 2, 0, 
1, -1, -1, 1