Search code examples
opengl-estexturestexture-mapping

OpenGL ES : Mapping texture on a cube


I'm making a skybox (cube with different texture on each of its 6 faces) here's what I do :

I define my vertices :

const float vertices[8u][3u] = {
    {-1.0f, -1.0f, -1.0f},
    {-1.0f, -1.0f, 1.0f},
    {-1.0f, 1.0f, -1.0f},
    {-1.0f, 1.0f, 1.0f},
    {1.0f, -1.0f, -1.0f},
    {1.0f, -1.0f, 1.0f},
    {1.0f, 1.0f, -1.0f},
    {1.0f, 1.0f, 1.0f}
};

I define my triangles (quads are not available in ES version) based on the vertices array :

const unsigned short elements[8u][3u] = {
    {4u, 6u, 2u},
    {4u, 0u, 2u},
    {6u, 3u, 2u},
    {6u, 3u, 7u},
    {7u, 1u, 5u},
    {7u, 1u, 3u},
    {5u, 0u, 4u},
    {5u, 0u, 1u}
};

As I understood I now need to define my texture coordinates, I tried many different things, for now it looks like this :

float texCoords[4u][2u] = {
    {0.0f, 0.0f},
    {1.0f, 0.0f},
    {1.0f, 1.0f},
    {0.0f, 1.0f}
};

Edit: The skybox absolutely doesn't display itself, I only see a 2d flat image where my texture is repeated in a strange way. Absolutly no cube

The drawing part is working, I think my problem is based on the Texture coordinate, Am I right ? what did I've made wrong ?


Solution

  • Sorry my question wasn't clear. I didn't really understood what was the idea of Texture coordinates. Now I think I did : Telling how much you want each face to be fulled by your texture. My example is for full-filling. Here's my new (looking like) working code, in case it may help someone :

    //The 24 vertex of the 3d cube (the skybox)
    static const float vertices[24u][3u] = {
            {-1.0f, -1.0f, -1.0f}, //face 1 (front)
            {-1.0f, 1.0f, -1.0f},
            {1.0f, -1.0f, -1.0f},
            {1.0f, 1.0f, -1.0f},
    
            {1.0f, 1.0f, 1.0f}, //face 2 (back)
            {1.0f, -1.0f, 1.0f},
            {-1.0f, 1.0f, 1.0f},
            {-1.0f, -1.0f, 1.0f},
    
            {-1.0f, -1.0f, -1.0f}, //face 3 (left)
            {-1.0f, -1.0f, 1.0f},
            {-1.0f, 1.0f, -1.0f},
            {-1.0f, 1.0f, 1.0f}, 
    
            {1.0f, 1.0f, 1.0f}, //face 4 (right)
            {1.0f, 1.0f, -1.0f},
            {1.0f, -1.0f, 1.0f},
            {1.0f, -1.0f, -1.0f},
    
            {-1.0f, 1.0f, -1.0f}, // face 5 (up)
            {-1.0f, 1.0f, 1.0f},
            {1.0f, 1.0f, 1.0f},
            {1.0f, 1.0f, -1.0f},
    
            {1.0f, -1.0f, 1.0f}, //face 6 (bot)
            {1.0f, -1.0f, -1.0f},
            {-1.0f, -1.0f, -1.0f},
            {-1.0f, -1.0f, 1.0f},
    };
    
    //Coordinate of the textures
    float texCoords[24u][2u] = {
            {0.0f, 0.0f},
            {0.0f, 1.0f},
            {1.0f, 1.0f},
            {1.0f, 0.0f},
    
            {0.0f, 0.0f},
            {0.0f, 1.0f},
            {1.0f, 1.0f},
            {1.0f, 0.0f},
    
            {0.0f, 0.0f},
            {0.0f, 1.0f},
            {1.0f, 1.0f},
            {1.0f, 0.0f},
    
            {0.0f, 0.0f},
            {0.0f, 1.0f},
            {1.0f, 1.0f},
            {1.0f, 0.0f},
    
            {0.0f, 0.0f},
            {0.0f, 1.0f},
            {1.0f, 1.0f},
            {1.0f, 0.0f},
    
            {0.0f, 0.0f},
            {0.0f, 1.0f},
            {1.0f, 1.0f},
            {1.0f, 0.0f},        
    };
    
    //Defining triangles based on the vertice array indexes
    const unsigned short elements[12u][3u] = {
            {0, 2, 1},
            {2, 1, 3},
    
            {4, 5, 6},
            {5, 6, 7},
    
            {8, 9, 10},
            {9, 10, 11},
    
            {12, 13, 14},
            {13, 14, 15},
    
            {16, 17, 18},
            {17, 18, 19},
    
            {20, 21, 22},
            {21, 22, 23}
    };