OpenGL ES 2.0 Android drawing textured triangles

Question

I have the book "OpenGL ES 2 for Android A Quick-Start Guide" and it is going through a good tutorial on OpenGL and android. The issue I am having though is that it's examples don't use index buffers for the creation of their shapes.

I am trying to texture a square which I define the 4 verticies of the square (plus an S coordinate and T coordinate for the textures) and then render using the index buffer. However, I the color of the square is only the bottom left corner of the PNG texture file and it is not getting rendered correctly on my square.

This is my render function:

 public void onDrawFrame(float[] matrixViewProjection)
    {
        super.onDrawFrame(matrixViewProjection);

        GLES20.glUseProgram(this.shaderProgram);
        int posHandle = GLES20.glGetAttribLocation(shaderProgram,"vPosition");
        GLES20.glEnableVertexAttribArray(posHandle);

        GLES20.glVertexAttribPointer(posHandle,coordsPerVertex,GLES20.GL_FLOAT,false,vertexStride,vertexBuffer);

        int colHandle = GLES20.glGetUniformLocation(shaderProgram,"vColor");
        GLES20.glUniform4fv(colHandle,1,color,0);

        int mvpHandle = GLES20.glGetUniformLocation(shaderProgram,"uMVPMatrix");
        GLES20.glUniformMatrix4fv(mvpHandle,1,false,matrixSum,0);

        GLES20.glDrawElements(GLES20.GL_TRIANGLES,indexBufferCount,GLES20.GL_UNSIGNED_SHORT,drawListBuffer);
        GLES20.glDisableVertexAttribArray(posHandle);
    }

And this is my constructor for my square object:

 public ShapeSquare(Context context, int program, float size)
    {
        float squareCoords[] = {
                -(size/2.0f),-(size/2.0f),0f, 0f, 0f,
                -(size/2.0f), (size/2.0f),0f, 0f, 1f,
                 (size/2.0f), (size/2.0f),0f, 1f, 1f,
                 (size/2.0f),-(size/2.0f),0f, 0f, 0f
        };

        short drawOrder[] = {0,1,3,1,2,3};

        indexBufferCount = drawOrder.length;

        ByteBuffer bb = ByteBuffer.allocateDirect(squareCoords.length*4);
        bb.order(ByteOrder.nativeOrder());

        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(squareCoords);
        vertexBuffer.position(0);

        ByteBuffer dlb = ByteBuffer.allocateDirect(drawOrder.length*2);
        dlb.order(ByteOrder.nativeOrder());
        drawListBuffer = dlb.asShortBuffer();
        drawListBuffer.put(drawOrder);
        drawListBuffer.position(0);

        shaderProgram = program;

        shaderProgram = program;

        textureID = TextureHelper.loadTexture(context, R.raw.texture1);
    }

And these are some of the definitions I have, although I don't know if they are correct

    protected static int coordsPerVertex = 3;
    protected int vertexCount = 12/coordsPerVertex;
    protected static final int vertexStride = coordsPerVertex*4+8;

Here is what is rendered...

And this is the texture I have. (Take note of the bottom left corner)

Answer 1

You have to specify 2 array of vertex attribute data ( glVertexAttribPointer ). 1 for the vertex coordinates and 1 for the texture coordinates:

int posHandle = GLES20.glGetAttribLocation(shaderProgram, "vPosition");
int texHandle = GLES20.glGetAttribLocation(shaderProgram, ???);

GLES20.glEnableVertexAttribArray(posHandle);
GLES20.glEnableVertexAttribArray(texHandle );

vertexBuffer.position(0);       
GLES20.glVertexAttribPointer(posHandle, coordsPerVertex, GLES20.GL_FLOAT, false,
                             vertexStride, vertexBuffer);

vertexBuffer.position(3);        
GLES20.glVertexAttribPointer(texHandle, coordsPerVertex, GLES20.GL_FLOAT, false,
                             vertexStride, vertexBuffer);

Note the vertexBuffer contains tuples of 5 elements (x, y, z, u, v). The stride in bytes is 5*4. The offset of the vertex coordinates is 0 and the offset of the texture coordinates is 3*4 respectively 3 elements in the float buffer.

Since you do not use Vertex Buffer Objects , you should prefer to create separate arrays (respectively float buffers) for the attributes.