Opengl ES 1.1/Android -- The texture-mapping-to-a-square debacle of 2011

Question

I am trying to map a texture onto a square where the texture stretches to fit the square. Currently the texture maps, but it doesn't map to the correct location and OGL performs some skewing or such that is unbeknownst to me. The image is 64x64 and the squares I've tried are from -2 to 2 (hor and ver) and -1 to 1. Here is the image:

The texture code is:

float texture[] = { 0,0,0,1, 1,0,1,1 };
ByteBuffer byteBuf = ByteBuffer.allocateDirect(texture.length * 4);
byteBuf.order(ByteOrder.nativeOrder());
FloatBuffer textureBuffer = byteBuf.asFloatBuffer();
textureBuffer.put(texture);
textureBuffer.flip();
int[] buffer = new int[1];
gl11.glGenBuffers(1, buffer, 0);
textureCoordPointer = buffer[0];
gl11.glBindBuffer(GL11.GL_TEXTURE_COORD_ARRAY, textureCoordPointer);
gl11.glBufferData(GL11.GL_TEXTURE_COORD_ARRAY, textureBuffer.capacity() 
   * 4, textureBuffer, GL11.GL_STATIC_DRAW);
gl11.glBindBuffer(GL11.GL_TEXTURE_COORD_ARRAY, 0);
Bitmap bitmap = BitmapFactory.decodeResource(context
   .getResources(),R.drawable.afd);
int textures[] = new int[1];
gl.glGenTextures(1, textures, 0);
texturePointer = textures[0];
gl.glBindTexture(GL10.GL_TEXTURE_2D, texturePointer);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
bitmap.recycle();

and the code for the rendering is:

gl11.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, vertexPointerSquare);
gl11.glVertexPointer(3, GL10.GL_FLOAT, 0, 0);       
gl11.glBindBuffer(GL11.GL_ELEMENT_ARRAY_BUFFER, indexPointerSquare);
gl.glBindTexture(GL10.GL_TEXTURE_2D, texturePointer);
gl11.glBindBuffer(GL11.GL_TEXTURE_COORD_ARRAY, textureCoordPointer);
gl11.glTexCoordPointer(2, GL10.GL_FLOAT, 0, 0);

gl11.glPushMatrix();
gl11.glScalef(.4f,.4f,0);
gl11.glColor4f(1,1,1,1);
gl11.glDrawElements(GL11.GL_TRIANGLE_STRIP, indicesSquare, 
   GL11.GL_UNSIGNED_SHORT, 0);
gl11.glPopMatrix();
gl.glBindTexture(GL10.GL_TEXTURE_2D, 0);

And the square:

GL11 gl11 = (GL11) gl;
FloatBuffer vertexSquareBuffer = ByteBuffer.allocateDirect(verticesSquare * 3 * 4)
.order(ByteOrder.nativeOrder()).asFloatBuffer();

ShortBuffer indexSquareBuffer = ByteBuffer.allocateDirect(indicesSquare * 2)
.order(ByteOrder.nativeOrder()).asShortBuffer();

float vertices[] = { 1f, 1f, 0, 1f, -1f, 0, -1f, 1f, 0, -1f, -1f, 0 };
short indices[] = { 0, 1, 2, 3 };
vertexSquareBuffer.put(vertices);
indexSquareBuffer.put(indices);
indexSquareBuffer.flip();
vertexSquareBuffer.flip();
int[] bufferSquare = new int[1];
gl11.glGenBuffers(1, bufferSquare, 0);
vertexPointerSquare = bufferSquare[0];
gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, vertexPointerSquare);
gl11.glBufferData(GL11.GL_ARRAY_BUFFER, vertexSquareBuffer.capacity() * 4,
    vertexSquareBuffer, GL11.GL_STATIC_DRAW);
gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, 0);
gl11.glGenBuffers(1, bufferSquare, 0);
indexPointerSquare = bufferSquare[0];
gl11.glBindBuffer(GL11.GL_ELEMENT_ARRAY_BUFFER, indexPointerSquare);
gl11.glBufferData(GL11.GL_ELEMENT_ARRAY_BUFFER, indexSquareBuffer.capacity() * 2,
    indexSquareBuffer, GL11.GL_STATIC_DRAW);

I am using an ortho perspective gl.glOrthof(-windowRatio, windowRatio, -1,1, -4, 4) . I have tried drawArrays(), which makes no difference, and also using many combinations of glTexParameter. The problem seems twofold: (1) the image doesn't stretch to fit, and (2) only the left triangle of the square correctly renders the texture. Something I've noticed is that changing the texture coordinates has no effect on the image. How do I get this to work as intended? Thanks for looking.

Answer 1

You use GL_TEXTURE_COORD_ARRAY as buffer binding point. That is just wrong. The glTexCoordPointer sources its data from the current GL_ARRAY_BUFFER, like the glVertexPointer. So in your first part substitute

gl11.glBindBuffer(GL11.GL_TEXTURE_COORD_ARRAY, textureCoordPointer);
gl11.glBufferData(GL11.GL_TEXTURE_COORD_ARRAY, textureBuffer.capacity() 
   * 4, textureBuffer, GL11.GL_STATIC_DRAW);
gl11.glBindBuffer(GL11.GL_TEXTURE_COORD_ARRAY, 0);

by

gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, textureCoordPointer);
gl11.glBufferData(GL11.GL_ARRAY_BUFFER, textureBuffer.capacity() 
   * 4, textureBuffer, GL11.GL_STATIC_DRAW);
gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, 0);

and in the rendering code substitute

gl11.glBindBuffer(GL11.GL_TEXTURE_COORD_ARRAY, textureCoordPointer);

by

gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, textureCoordPointer);

This works because the gl...Pointer commands take their data from the buffer that is bound to GL_ARRAY_BUFFER at the moment they are called. So just select the appropriate buffer, then call gl...Pointer and then you can bind another buffer to GL_ARRAY_BUFFER (but the index buffer needs to be bound to GL_ELEMENT_ARRAY_BUFFER when calling glDrawElements, of course. But as Tommy already mentioned in a comment, you could also just go without the trivial index buffer and with glDrawArrays).

So, as the call to glBindBuffer(GL_TEXTURE_COORD_ARRAY, ...) fails (as GL_TEXTURE_COORD_ARRAY is no valid binding point), you have the vertex buffer still bound when setting the texcoord pointer. But since you specify your vertices to have 3 components and your texcoords 2, you actually get { 1f, 1f, 0f, 1f, -1f, 0f, -1f, 1f } as texture coordinates (the first eight values of your vertex array). So as you render your array as

2   0

3   1

you get as texture coords:

-1,0   1,1

-1,1   0,1

After making the proposed changes you will get

1,0   0,0

1,1   0,1

So your texture is still flipped horizontally and vertically (I don't know if that's intended). You have to make sure that your textrue coordinates match your vertices. But after changing your above mentioned buffer error, it should at least look a bit nicer.