OpenGL ES 2.0 Rendering with a Texture

Question

The iPhone SDK has an example of using ES 2.0 with a set of (Vertex & Fragment) GLSL shaders to render a varying colored box. Is there an example out there on how to render a simple texture using this API? I basically want to take a quad, and draw a texture onto it.

The old ES 1.1 API's don't work at all anymore, so I'm needing a bit of help getting started. Most shader references talk mainly about advanced shading topics, but I'm really unsure about how to tell the shader to use the bound texture, and how to reference the UV's.

Answer 1

There's a nice tutorial on this in the web site to go with the book OpenGL ES 2 The examples from the book are all at www.opengles-book.com.

Chapter 9, Simple_Texture2D does exactly what you want. It sets up a shader that samples a texture, initializes it, and shades the triangles using the texture.

The shader program is close to:

varying vec2 v_texCoord;
uniform sampler2D s_texture;
void main() {
  gl_FragColor = texture2D(s_texture, v_texCoord);
}

and you set it up thusly:

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, userData->textureId);
// Set the sampler texture unit to 0
glUniform1i(userData->samplerLoc, 0);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);

But see the actual code, from the links I gave above, to really see the example.

Answer 2

Here's the simplest version I could make that actually worked:

---

Setup (immediately after you've done the glVertexAttribPointer for your vertex arrays)

GLint program; // your shader-program, pre-filled

...

// AFTER you've created *and set* the EAGLContext
GLKTextureInfo* appleTexture = [GLKTextureLoader
         textureWithContentsOfFile:... options:... error:...];
// NB: make sure that the returned texture is not nil!
// if it's nil, you'll get black objects, and need to check
// your path to your texture file

...

// INSIDE your VAO setup (usually "setupGL" in Apple's template),
// assuming you're using VAO,
// i.e. after "glBindVertexArrayOES"
GLint _textureBuffer; // an empty buffer that we'll create and fill
glEnableVertexAttribArray( glGetAttribLocation(program, "a_textureCoordinate") );
glGenBuffers(1, &_textureBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _textureBuffer);
glBufferData(GL_ARRAY_BUFFER, 
        self.currentScene.meshNumVertices * sizeof( (*self->sharedMeshTextureCoords) ),
        self->sharedMeshTextureCoords, GL_DYNAMIC_DRAW);
glVertexAttribPointer( glGetAttribLocation(program, "a_textureCoordinate"),
        2, GL_FLOAT, GL_FALSE, 0, 0);

glActiveTexture(GL_TEXTURE0);

---

Render (last thing before calling glDrawArrays or similar)

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, [appleTexture name]);
glUniform1i( glGetUniformLocation( program, "s_texture"), 0); // No idea

---

Texture shader:

attribute vec4 position;
attribute vec2 a_textureCoordinate;

varying vec2 v_textureCoordinate;

uniform mat4 modelViewProjectionMatrix;
uniform mat3 normalMatrix;

void main()
{
    v_textureCoordinate = a_textureCoordinate;
    gl_Position = modelViewProjectionMatrix * position;
}

---

Fragment shader:

uniform sampler2D s_texture;
varying mediump vec2 v_textureCoordinate;

void main(void)
{
    gl_FragColor = texture2D( s_texture, v_textureCoordinate );
}