I can't correctly read the picture by OpenGL and stb_load()

Question

I can't load the following picture correctly enter image description here

Here is my loading result. enter image description here

Here is my code. I use stb_load() and glTexImage2d() to read the picture and use GL_RGB format but the result is the dislocation just like the picture displays.

#include <GLFW/glfw3.h>
#include <glad/glad.h>

#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>

#include "Shader.hpp"

#define STB_IMAGE_IMPLEMENTATION
#include <stb-master/stb_image.h>

#include <iostream>
using namespace std;

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);


// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 800;


int main()
{
    // glfw: initialize and configure
    // ------------------------------
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // uncomment this statement to fix compilation on OS X
#endif

    // glfw window creation
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // glad: load all OpenGL function pointers
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    float imgVertices[] = {
        // positions          // texture Coords (note we set these higher than 1 (together with GL_REPEAT as texture wrapping mode). this will cause the floor texture to repeat)
        0.5f, -0.5f, 1.0, 1.0,
        -0.5f, -0.5f, 0.0, 1.0,
        -0.5f, 0.5f, 0.0, 0.0,

        -0.5, 0.5, 0.0, 0.0,
        0.5, 0.5, 1.0, 0.0,
        0.5, -0.5, 1.0, 1.0
    };

    // Create plane VAO, VBO
    // ---------------
    unsigned int imgVAO, imgVBO;
    glGenVertexArrays(1, &imgVAO);
    glBindVertexArray(imgVAO);
    glGenBuffers(1, &imgVBO);
    glBindBuffer(GL_ARRAY_BUFFER, imgVBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(imgVertices), imgVertices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 4*sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 4*sizeof(float), (void*)(sizeof(float) * 2));
    glEnableVertexAttribArray(1);

    // load textures
    // -------------
    unsigned int imageTexture;
    glGenTextures(1, &imageTexture);
    glBindTexture(GL_TEXTURE_2D, imageTexture);

    int width, height, urChannel;
    unsigned char *data = stbi_load("img/image1.jpg", &width, &height, &urChannel, 0);
    if(data){
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);

        glGenerateMipmap(GL_TEXTURE_2D);

        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

        stbi_image_free(data);
    }
    else{
        cout << "Read iamge failed\n";
        stbi_image_free(data);
    }


    // configuration
    // --------------------
    Shader imgShader("shader/image.vs", "shader/image.fs");

    // configure the shaders
    // ---------------------
    imgShader.use();
    imgShader.setInt("texture1", 0);

    // render loop
    // -----------
    while(!glfwWindowShouldClose(window))
    {
        // input
        // -----
        processInput(window);

        // render
        // ------
        glClearColor(1.0, 1.0, 1.0, 1.0);
        glClear(GL_COLOR_BUFFER_BIT);

        imgShader.use();
        glBindVertexArray(imgVAO);
        glBindTexture(GL_TEXTURE_2D, imageTexture);
        glDrawArrays(GL_TRIANGLES, 0, 6);
        glBindVertexArray(0);

        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // optional: de-allocate all resources once they've outlived their purpose:
    // ------------------------------------------------------------------------
    glDeleteVertexArrays(1, &imgVAO);
    glDeleteBuffers(1, &imgVBO);

    glfwTerminate();
    return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    glViewport(0, 0, width, height);
}

I don't know where is wrong and I'm glad if you could help me.

Answer 1

OpenGL assumes that the rows of your image are multiples of 4 bytes long, but that's not the case (they're 3 x 515 bytes long). To fix that, use

glPixelStorei(GL_UNPACK_ALIGNMENT, 1)

before your glTexImage2D call.

Answer 2

Replace this line:

unsigned char *data = stbi_load("img/image1.jpg", &width, &height, &urChannel, 0);

with

unsigned char *data = stbi_load("img/image1.jpg", &width, &height, &urChannel, 3);

That's because you mentioned that your format is RGB. It forces the component count to 3 instead of whatever the file may contain.