How to draw a texture into a quad with OpenGL ES 2?

Question

Quads are not included in OpenGL ES 2.0 as they were in 1.1. With the programmable pipeline offered by OpenGL ES 2.0, how can I simply draw a texture (originally a png file) into 4 defined points?

Do I need a VBO? Do I need to compute a perspective matrix? All these things are messy for me... The platform used is the iPhone.

Beata

Answer 1

I found the answer. It is mandatory to use a perspective matrix and a shader, even for such a simple task. This answer helped me to do it.

Here is the code I used, with functions es*() from this book:

// generate an orthographic matrix
esMatrixLoadIdentity( &projectionMatrix );
esOrtho(&projectionMatrix, -1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
// generate a model view
esMatrixLoadIdentity(&modelviewMatrix);
// compute the final MVP
esMatrixMultiply(&modelviewProjectionMatrix, &modelviewMatrix, &projectionMatrix);
// setting up the viewport
glViewport(0, 0, width, height);
// binding
glBindFramebuffer(GL_FRAMEBUFFER, viewFramebuffer);
glViewport(0, 0, backingWidth, backingHeight);

glClearColor(0, 0, 0, 0);
glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );   
glEnable(GL_TEXTURE_2D);
glActiveTexture(0);
glBindTexture(GL_TEXTURE_2D, videoTexture);

// setting up shader
useProgram(projectionProgram);

// updating uniform values
GLint uMVPIndex      = indexUniform(projectionProgram, "mvpMatrix");
GLint uTextureIndex  = indexUniform(projectionProgram, "textureImg");
glUniformMatrix4fv( uMVPIndex, 1, GL_FALSE, (GLfloat*) &modelviewProjectionMatrix.m[0][0] );
glUniform1i(uTextureIndex, 0);  

// updating attribute values
GLint aPositionIndex = indexAttribute(projectionProgram, "position");
GLint aTextureIndex  = indexAttribute(projectionProgram, "inputTextureCoordinate");

// drawing quad
static int strideVertex  = 2*sizeof(GLfloat); // 2D position
static int strideTexture = 2*sizeof(GLfloat); // 2D texture coordinates

// beginning of arrays
const GLvoid* vertices  = (const GLvoid*) &screenVertices[0];
const GLvoid* textures  = (const GLvoid*) &texCoordsFullScreen [0];

// enabling vertex arrays  
glVertexAttribPointer(aPositionIndex, 2, GL_FLOAT, GL_FALSE, strideVertex, vertices);
glEnableVertexAttribArray(aPositionIndex);
glVertexAttribPointer(aTextureIndex, 2, GL_FLOAT, GL_FALSE, strideTexture, textures);
glEnableVertexAttribArray(aTextureIndex);

// drawing
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

// resetting matrices
esMatrixLoadIdentity(&projectionMatrix);
esMatrixLoadIdentity(&modelviewMatrix);
esMatrixLoadIdentity(&modelviewProjectionMatrix);
// resetting shader
releaseProgram(projectionProgram);
// unbinding texture
glBindTexture(GL_TEXTURE_2D, 0);

Beata

Answer 2

Instead of quad with vertices 1, 2, 3, 4 draw two triangles with vertices 1, 2, 4 and 4, 2, 3 respectively.

Oconnor

why not 1,2,3 and 3,4,1 ? – Pickering

Answer 3

How to draw a texture as a 2D background in OpenGL ES 2.0

Calque

thanks, I know this code, but it's only to draw a texture in a framebuffer and display it, there's not geometrical transform of it... – Zoogloea