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

Answer 3

Unfortunately OpenGL ES 2.0 uses the red headed step child version of GLSL, 1.4. Most of the tutorials people post do not work under this version. All of the helper variables such as ftransform and gl_TexCoord[0] have been removed. Finding specific ES 2.0 tutorials that go further than just pure basics is difficult.

OpenGL ES 2.0 is a completly programmable pipeline, they have done away with anything fixed function. If you want to use it you'll have to provide your own matrices to keep track of what used to be the model view and projection matrices.

I know you posted a few months ago but if anyone is still looking for information do a search on opengl.org for anything relating to OpenGL 3.0. There were a number of good source releases that are semi applicable. The forums there are also a very good source of information.

Answer 4

Have you tried a "normal" OpenGL tutorial like this tutorial from Lighthouse3D or this tutorial from clockworkcoders? This should also work for OpenGL ES.