upside-down texture? | OpenGL-ES 2.0 (android)

Question

I tried to map my texture to a square made in opengl es 2.0, and when i do, the texture appears upside down, is my mapping wrong? or the way im drawing it? here is a picture of what it looks like:

here is my code for the onDrawFrame()

public void onDrawFrame(GL10 glUnused) {
    GLES20.glClearColor(0.0f, 0.0f, 1.0f, 1.0f);
    GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);
    GLES20.glUseProgram(mProgram);
    GLES20.glEnable(GLES20.GL_BLEND);
    GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA);
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureID);

    mTriangleVertices.position(TRIANGLE_VERTICES_DATA_POS_OFFSET);
    GLES20.glVertexAttribPointer(maPositionHandle, 3, GLES20.GL_FLOAT,
            false, TRIANGLE_VERTICES_DATA_STRIDE_BYTES, mTriangleVertices);

    mTriangleVertices.position(TRIANGLE_VERTICES_DATA_UV_OFFSET);
    GLES20.glEnableVertexAttribArray(maPositionHandle);

    GLES20.glVertexAttribPointer(maTextureHandle, 2, GLES20.GL_FLOAT,
            false, TRIANGLE_VERTICES_DATA_STRIDE_BYTES, mTriangleVertices);

    GLES20.glEnableVertexAttribArray(maTextureHandle);


    Matrix.orthoM(mProjMatrix, 0, 0, 200, 0, 100, -5, 5);
    GLES20.glUniformMatrix4fv(muMVPMatrixHandle, 1, false, mProjMatrix, 0);
    GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length,
            GLES20.GL_UNSIGNED_SHORT, drawListBuffer);
}

the coordination for the square and mapping UV are:

    private final float[] mTriangleVerticesData = {
        // X, Y, Z, U, V
        0f, 0f, 0, 0.0f, 0.0f,
        50f, 0f, 0, 1.0f, 0.0f,
        50f, 50f, 0, 1.0f, 1.0f,
        0f, 50f, 0.0f, 0.0f, 1.0f };
private short drawOrder[] = { 0, 1, 2, 0, 2, 3 };

how could i achieve a right-side up view?

Answer 1

This looks like a common mistake. You need to account for the fact that OpenGL's origin for textures is in the lower left corner (and not the upper-left corner).

There's a couple of things you can do to compensate:

• read the pixels lines from bottom to top;
• swap the pixel lines;
• or swap the texture Y coordinates;

You could try swapping the texture coordinates in a shader (source: http://en.wikibooks.org/wiki/OpenGL_Programming/Modern_OpenGL_Tutorial_06)

void main(void) {
  vec2 flipped_texcoord = vec2(f_texcoord.x, 1.0 - f_texcoord.y);
  gl_FragColor = texture2D(mytexture, flipped_texcoord);
}