different texture on each GLKit cube face

Question

I am using GL Kit to draw a cube which rotates on the screen. I have this working very well with the same texture drawn on each face. I would like to draw a different texture on each face.

This is currently how my code draws the cube (note that I actually have 6 different textures loaded in the theTextures array, but so far I only draw all the sides of the cube the same when I change textures).

self.effect.texture2d0.name = theTextures[i].name;
self.effect.texture2d0.enabled = true;
self.effect.texture2d0.target = GLKTextureTarget2D;

glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);

glBindVertexArrayOES(_vertexArray); 

glDrawElements(GL_TRIANGLES, sizeof(Indices)/sizeof(Indices[0]), GL_UNSIGNED_BYTE, 0);

I have done a lot of searches here on stackOverflow and looked at many tutorials, but can't find a simple way to do this. I assume that I can create a vertex array for each of the sides and use glDrawElements for each vertex array, but that seems very inefficient. Is there a way for me to do this without having to create 6 different vertex arrays? Thanks!

Answer 1

A fairly common way to do this is to use a texture-map. That is, one texture that contains all the sub-textures you need. In this way, you don't overload the system with tons of textures, but you can still get at all the graphics you need. Example, if here were only 4 textures, you might have an image that looks like this:

A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 
A A A A A A A A * * * * * * * * x x x x x x x x x . . . . . . . . 

(NOTE: things work best if the sides of your textures are a power of two (2, 4, 8, 16, 32...), though it does not need to be square!)

Then, when you want to use part of the texture, just select the correct tx.s/tx.t coordinates to get the part of the image you want on that face.

Answer 2

I found away to do this in a somewhat efficient way, although I still draw each side separately. I create a different vertex array & texture for each side, but use only one Indice array with the vertices described in two triangles. If you have any suggestions, please send them my way,

// draw one texture per side

for (int i = 0; i <= 5; i++)
{
    glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer[i]);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);

    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid *) offsetof(Vertex, Position));
    glEnableVertexAttribArray(GLKVertexAttribColor);
    glVertexAttribPointer(GLKVertexAttribColor, 4, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid *) offsetof(Vertex, Color));
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid *) offsetof(Vertex, TexCoord));

    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, myTexture[i].name);

    glDrawElements(GL_TRIANGLES, sizeof(Indices1)/sizeof(Indices1[0]), GL_UNSIGNED_BYTE, 0);
}