title: Opengl ES 1.1/Android -- The texture-mapping-to-a-square debacle of 2011
body: <p>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: </p>
  
  <p><img src="https://i.stack.imgur.com/7j1Sb.jpg" alt="enter image description here">
  The texture code is:</p>
  
  <pre><code>
  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();
  </code>
  </pre>
  
  <p>and the code for the rendering is:</p>
  
  <pre><code>
  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);
  </code></pre>
  
  <p>And the square:</p>
  
  <pre><code>
  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);
  </code></pre>
  
  <p>I am using an ortho perspective
  <code>gl.glOrthof(-windowRatio, windowRatio, -1,1, -4, 4)</code>
  . I have tried drawArrays(), which makes no difference, and also using many combinations of <code>glTexParameter</code>. 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.</p>