纹理未填充图形 - OpenGL

3
我正在尝试在整个窗口中显示一张图片。为此,我只绘制一个占据整个窗口的矩形,并将其应用于纹理。
问题是该图像并没有完全填满整个屏幕: 输出图像 由于图像的大小为5600 x 3000,因此图像并不太小。另外,我不希望图像重复。我不知道我错过了什么,为什么它不能填满屏幕,而且为什么只在左上角。我已经尝试了这个解决方案,但它没有起作用: Texture does not fit in the square - OpenGL 以下是我创建和绑定着色器的方法:
Shader::Shader(const char* vertSrcFile, const char* fragSrcFile, const char* texSrcFile) {
    GLuint vertShader = glCreateShader(GL_VERTEX_SHADER);
    GLuint fragShader = glCreateShader(GL_FRAGMENT_SHADER);

    GLint vlen;
    GLint flen;
    char* source = loadFile(vertSrcFile, vlen);
    char* fragment = loadFile(fragSrcFile, flen);

    glShaderSource(vertShader, 1, &source, &vlen);
    glShaderSource(fragShader, 1, &fragment, &flen);

    GLint compiled = 0;
    glCompileShader(vertShader);
    glGetShaderiv(vertShader, GL_COMPILE_STATUS, &compiled);
    if (!compiled) {
        GLint maxLength = 0;
        glGetShaderiv(vertShader, GL_INFO_LOG_LENGTH, &maxLength);

        // The maxLength includes the NULL character
        std::vector<GLchar> infoLog(maxLength);
        glGetShaderInfoLog(vertShader, maxLength, &maxLength, &infoLog[0]);

        // We don't need the shader anymore.
        glDeleteShader(vertShader);

        Logger::GetSystemLogger()->error("Vertex shader compilation error");
        Logger::GetSystemLogger()->error("{}", infoLog.data());

        return;
    }

    glCompileShader(fragShader);
    glGetShaderiv(fragShader, GL_COMPILE_STATUS, &compiled);
    if (!compiled) {
        GLint maxLength = 0;
        glGetShaderiv(fragShader, GL_INFO_LOG_LENGTH, &maxLength);

        // The maxLength includes the NULL character
        std::vector<GLchar> infoLog(maxLength);
        glGetShaderInfoLog(fragShader, maxLength, &maxLength, &infoLog[0]);

        // We don't need the shader anymore.
        glDeleteShader(fragShader);

        Logger::GetSystemLogger()->error("Fragment shader compilation error");
        Logger::GetSystemLogger()->error("{}", infoLog.data());

        return;
    }

    prog = glCreateProgram();

    glAttachShader(prog, vertShader);
    glAttachShader(prog, fragShader);

    glLinkProgram(prog);
    GLint isLinked = 0;
    glGetProgramiv(prog, GL_LINK_STATUS, (int*)&isLinked);
    if (isLinked == GL_FALSE)
    {
        GLint maxLength = 0;
        glGetProgramiv(prog, GL_INFO_LOG_LENGTH, &maxLength);

        // The maxLength includes the NULL character
        std::vector<GLchar> infoLog(maxLength);
        glGetProgramInfoLog(prog, maxLength, &maxLength, &infoLog[0]);

        // We don't need the program anymore.
        glDeleteProgram(prog);
        // Don't leak shaders either.
        glDeleteShader(vertShader);
        glDeleteShader(fragShader);

        Logger::GetSystemLogger()->error("Program link error");
        Logger::GetSystemLogger()->error("{}", infoLog.data());
        return;
    }

    glDetachShader(prog, vertShader);
    glDetachShader(prog, fragShader);

    glGenTextures(1, &texID); // generate texture ID

    glBindTexture(GL_TEXTURE_2D, texID);
    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_BORDER);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);

    LoadTexture(texSrcFile);
}

以下是我如何将图像作为纹理加载的方法:

void Shader::LoadTexture(const char* texSrcFile) const {
        int width, height, nrChannels;
        unsigned char* data = stbi_load(texSrcFile, &width, &height, &nrChannels, 0);
        if (data)
        {
            glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
            glGenerateMipmap(GL_TEXTURE_2D);
        }
        else
        {
            Logger::GetSystemLogger()->error("Failed to load textures");
        }
        stbi_image_free(data);
    }

这是我的着色器: 片段着色器:

#version 330
precision highp float; // needed only for version 1.30

layout(location = 0) out vec4 out_Color;

in vec2 ex_Tex;

uniform sampler2D textureUnit0;

void main(void){
    out_Color = texture(textureUnit0, ex_Tex);
}

顶点:

#version 330

layout (location = 0) in vec3 in_Position;
layout (location = 1) in vec2 in_Tex;

out vec2 ex_Tex;

void main(void){
    gl_Position = vec4(in_Position, 1.0);
    
    ex_Tex = in_Tex;
}

以下是主要代码:

glGenVertexArrays(1, &m_VAO);
glBindVertexArray(m_VAO);

glGenBuffers(1, &m_VBO);
glBindBuffer(GL_ARRAY_BUFFER, m_VBO);

GLfloat vertices[4 * 5]{
      // Positions           // Textures
    -1.0f, -1.0f, 0.0f,      0.0f, 0.0f,
     1.0f, 1.0f, 0.0f,       1.0f, 1.0f,
    -1.0f, 1.0f, 0.0f,       0.0f, 1.0f,
     1.0f, -1.0f, 0.0f,      1.0f, 0.0f
};

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// Position
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), nullptr);

// Texture coord
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), nullptr);

glGenBuffers(1, &m_IBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_IBO);

unsigned int indices[6] = { 0, 1, 2, 0, 1, 3 };
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

m_Shader = std::make_shared<Engine::Shader>("src/Shaders/Background.vert", "src/Shaders/Background.frag", "res/background.jpg");

这里是主循环

while (m_Running) {
    // clear the screen and set the background color to grey
    glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    m_Shader->Bind();

    glBindTexture(GL_TEXTURE_2D, m_Shader->GetTexID());
    glBindVertexArray(m_VAO);
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, nullptr);

    m_Window->OnUpdate();
}
1个回答

2
虽然视口坐标从负一到正一 [-1, 1),但纹理坐标从零到一 [0,1)。因此根据 GL_CLAMP_TO_BORDER 策略,你的视口有四分之三都是黑色的。
你需要按照以下方式修复你的 VAO 坐标:
GLfloat vertices[4 * 5]{
      // Positions           // Textures
    -1.0f, -1.0f, 0.0f,     0.0f, 0.0f,
     1.0f, 1.0f, 0.0f,      1.0f, 1.0f,
    -1.0f, 1.0f, 0.0f,      0.0f, 1.0f,
     1.0f, -1.0f, 0.0f,     1.0f, 0.0f
};

编辑: 此外,您的纹理坐标偏移不正确。 应该是:

// Texture coord
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3*sizeof(float)));

如果没有正确的偏移量,它会使用位置的X和Y作为纹理坐标。


即使我输入了那些坐标,图像仍然没有完全填充。我没有说清楚(我的错),但我不希望图像重复,GL_CLAMP_TO_EDGE 不能正确适应屏幕。 - Simon
1
@Simon:你能展示一下使用我答案中的纹理坐标会发生什么吗?此外,如果您的纹理适合屏幕,则夹紧模式无关紧要。 - Yakov Galka
好吧,这并不会改变任何东西,所以与此图像相同:https://i.stack.imgur.com/3vSGL.png - Simon
@Simon:哦,我又发现了一个问题(请参见编辑)。 - Yakov Galka
1
那就是我现在看到的问题!非常感谢你! - Simon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接