Search code examples
c++openglvisual-studio-2017stb-image

stb_image wont flip vertically when image loads for an opengl texture


The image I am trying to load is turned 90 degrees when rendered. I am using "stbi flip image vertically on load" but when the texture is rendered, the image is turned 90 degrees.

I tried to change the index and tex coords, that didnt work.

//Mesh struct
Mesh mesh = {
// Position         // Color                // Tex coords
0.5f, 0.5f, 0.0f,   1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f,
-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, 0.0f,  0.0f, 0.0f, 0.5f, 1.0f, 0.0f, 1.0f,
// Index
0,1,2,2,3,0
};

//The other code
/*Texture*/
int width, height, bpp;
unsigned char* image;
string path = "res/textures/Brick.png";
unsigned int texture;

stbi_set_flip_vertically_on_load(1);
image = stbi_load(path.c_str(), &width, &height, &bpp, 4);

glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, 
GL_UNSIGNED_BYTE, image);

if (image)
    stbi_image_free(image);

glActiveTexture(GL_TEXTURE0);
glUniform1i(glGetUniformLocation(shader, "Texture"), 0);

/*Position*/
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 9 * sizeof(float), 
(void*)0);
glEnableVertexAttribArray(0);
/*Color*/
glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE, 9 * sizeof(float), 
(void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
/*Texture*/
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 9 * sizeof(float), 
(void*)(7 * sizeof(float)));
glEnableVertexAttribArray(2);

glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);

The texture should apear as the image and not rotated 90 degrees. Image: https://opengameart.org/sites/default/files/oga-textures/brick_base.png


Solution

  • You said I tried to change the index and texture coordinates, that didn't work. but I think your problem is exactly in your 2D to 3D coordinate mapping.

    90 degree rotation is expected with current mapped coordination you shared. I mean :

    0.5f, 0.5f, 0.0f -> 0.0f, 0.0f
    0.5f, -0.5f, 0.0f -> 1.0f, 0.0f
    -0.5f, -0.5f, 0.0f -> 1.0f, 1.0f
    -0.5f, 0.5f, 0.0f -> 0.0f, 1.0f
    

    If you don't want the 90 degree rotation it should be :

    0.5f, 0.5f, 0.0f -> 0.0f, 0.0f
    0.5f, -0.5f, 0.0f -> 1.0f, 0.0f
    -0.5f, -0.5f, 0.0f -> 0.0f, 1.0f
    -0.5f, 0.5f, 0.0f -> 1.0f, 1.0f
    

    So your mesh should be like this (didn't swap the colors, change it if you need):

        Mesh mesh = {
    //  Position              Color               Texture coordinates
    //  X      Y      Z       R     G     B       X     Y
        -0.5f, -0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   0.0f, 0.0f,
        -0.5f, 0.5f,  0.0f,   0.0f, 1.0f, 0.0f,   0.0f, 1.0f,
        0.5f,  0.5f,  0.0f,   0.0f, 0.0f, 1.0f,   1.0f, 1.0f,
        0.5f,  -0.5f, 0.0f,   0.0f, 0.0f, 0.5f,   1.0f, 0.0f,
    // Index
        0, 1, 2,
        2, 3, 0
        };
    

    EDITED