Batching OpenGL sprites

Question

i have been learning OpenGL and have been able to create a successful 2d drawing system using triangle strips. I wrote a particle generator to test batching the geometry and everything works well, i'm able to render 30k+ vertices at 60 fps on an iPhone 5. I use degenerative triangles to connect the particles and draw them at once. What i am trying to accomplish is batch rendering without using degenerative triangles as that would reduce the amount of data being sent to the GPU by 1/3 the amount which would be huge.

I am attempting to use glDrawElements with triangles to draw 2 sprites with the following code

//the vertices for the square (2d)
GLfloat square[] = {
    50, 50,  //bottom left
    100, 50, //bottom right
    50, 100, //top left
    100, 100, //top right

    150, 200,  //bottom left
    200, 150, //bottom right
    150, 200, //top left
    200, 200 //top right
};

//texture coords
GLfloat tex[] = {
    0,0,
    1,0,
    0,1,
    1,1,

    0,0,
    1,0,
    0,1,
    1,1
};

GLubyte indices[] =
{
    0,2,3, 
    0,3,1,

    0,2,3,
    0,3,1
};

//actual drawing code
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, GL_FALSE, 0, square);
glVertexAttribPointer(ATTRIB_TEX, 2, GL_FLOAT, GL_FALSE, 0, tex);

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, image);

glDrawElements(GL_TRIANGLES, 12, GL_UNSIGNED_BYTE, indices);

This code draws the first image without issue, but the second image is distorted. I have been looking online but have been unable to figure out how to make this work correctly.

Answer 1

First of all, you're currently using the same indices for both quads, so the second image shouldn't even be visible at all.

Other than that your vertex data for the second quad is messed, you have the point (150, 200) two times, the first one should probably be (150, 150) .