Textured triangle strips - rows beyond first row gives garbled output

Question

I'm drawing some "simple" 2D graphics using OpenGL ES, glDrawArrays and GL_TRIANGLE_STRIP.

I'm writing a function whose purpose is to take one 13x13 point (or other arbitrarily sized) texture and output it in specified number of columns and rows. So for 2 rows and 3 columns that would mean an area covered with 6 tiles over 26x39 points. The first row works well with the below code but as soon as I specify 2 or more rows there's just garbled output.

for (int row = 0; row < heightInTiles; row++) {
    for (int col = 0; col < widthInTiles; col++) {
        vertexIndexOffset += 8;
        startX = (GLshort)(col * TEXTUREWIDTH);
        startY = (GLshort)(row * TEXTUREHEIGHT);

        // Vertices
        vertices[vertexIndexOffset] = startX; // 1
        vertices[vertexIndexOffset + 1] = startY; //0.0;

        vertices[vertexIndexOffset + 2] = startX; // 2
        vertices[vertexIndexOffset + 3] = startY + (GLshort)TEXTUREHEIGHT;

        vertices[vertexIndexOffset + 4] = (GLshort)(startX + TEXTUREWIDTH); // 3
        vertices[vertexIndexOffset + 5] = startY;

        vertices[vertexIndexOffset + 6] = (GLshort)(startX + TEXTUREWIDTH); // 4
        vertices[vertexIndexOffset + 7] = startY + (GLshort)TEXTUREHEIGHT;

        // Texture coords
        uvs[vertexIndexOffset] = WRESULT; // 1
        uvs[vertexIndexOffset + 1] = 0;
        uvs[vertexIndexOffset + 2] = WRESULT; // 2
        uvs[vertexIndexOffset + 3] = HRESULTNEXT;
        uvs[vertexIndexOffset + 4] = WRESULTNEXT; // 3
        uvs[vertexIndexOffset + 5] = 0;
        uvs[vertexIndexOffset + 6] = WRESULTNEXT; // 4
        uvs[vertexIndexOffset + 7] = HRESULTNEXT;
    }
}

Answer 1

Assuming heightInTiles=1 and widthInTiles=2, the code first generates two "stripped" triangles 1234; for the next cell, vertices 5678 are generated, where 3=5 and 4=6. So there are two degenerate triangles (having area 0). However, this works (well, after moving vertexIndexOffset += 8; to the end of the inner loop)

 2----------4/6----------8
 |           |           |          
 |           |           |          
 |           |           |          
 |           |           |          
 1----------3/5----------7

Assuming heightInTiles=2 and widthInTiles=1, the picture looks somewhat different:

 6-----------8
 |           |
 |           |
 |           |
 |           |
 2/5--------4/7
 |           |
 |           |
 |           |
 |           |
 1-----------3

Now, what happens if the strip 12345678 is drawn? 123, 234 is OK, but then 345? This overlaps, and note the texture coords for these vertices -- vertices 2 and 5 have different UVs! As above, there are two unwanted triangles, but this time, these don't have area 0 anymore.

When a new row is started, you need to insert two dummy vertices, essentially restarting the strip elsewhere. What if the triangle strip contained 1234455678? Now, 123 and 234 are drawn OK, then 344, 445, 455, and 556 have area 0, the next drawn triangles are 567 and 678.