OpenGL纹理渲染与原始不匹配

Posted

技术标签:

【中文标题】OpenGL纹理渲染与原始不匹配【英文标题】:OpenGL texture rendering does not match original 【发布时间】:2021-01-17 09:27:02 【问题描述】:

我正在尝试使用 OpenGL 渲染纹理。我用作测试的纹理是一堆白色背景上的黑色矩形,如下:

但是,在渲染时,纹理似乎在其自身之上多次复制和叠加:

我使用以下方法设置场景:

std::string vertexSource = ShaderLoader::load("vertexSource.vert");
const char* vsource = vertexSource.c_str();
std::string fragmentSource = ShaderLoader::load("fragmentSource.frag");
const char* fsource = fragmentSource.c_str();

int vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vsource, NULL);
glCompileShader(vertexShader);
int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fsource, NULL);
glCompileShader(fragmentShader);
shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

float vertices[] = 
            0.5f,  0.5f, 0.0f,
            0.5f, -0.5f, 0.0f,
            -0.5f, -0.5f, 0.0f,
            -0.5f,  0.5f, 0.0f,
            1.0f, 1.0f,
            1.0f, 0.0f,
            0.0f, 0.0f,
            0.0f, 1.0f,
;
unsigned int indices[] = 
            0, 1, 3,
            1, 2, 3
;

glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1,2,GL_FLOAT, GL_FALSE, 2* sizeof(float), (void*)(sizeof(float)*12));
glEnableVertexAttribArray(1);

glBindBuffer(GL_ARRAY_BUFFER, 0);

glBindVertexArray(0);

unsigned char* data = stbi_load("image.png", &width, &height,&nrOfChannels, 0);
glGenTextures(1, &textureId);
glBindTexture(GL_TEXTURE_2D, textureId);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
stbi_image_free((void *) data);

我的渲染代码是:

glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glBindTexture(GL_TEXTURE_2D, textureId);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

我的顶点着色器是:

#version 330 core
layout (location = 0) in vec3 inVertex;
layout (location = 1) in vec2 inTexture;

out vec2 TextureCoordinate;

void main()

    gl_Position = vec4( inVertex, 1 );
    TextureCoordinate = inTexture;

我的片段着色器是:

#version 330 core
out vec4 FragColor;

in vec2 TextureCoordinate;

uniform sampler2D Texture;

void main() 
    FragColor = texture(Texture,TextureCoordinate);

【问题讨论】:

您确定图像有 3 个通道 (RGB),而不是 4 个 (RGBA)? 【参考方案1】:

当一个3通道的图像(GL_RGB)加载到一个纹理对象时,GL_UNPACK_ALIGNMENT需要设置为1。默认GL_UNPACK_ALIGNMENT是4,所以假设图像的每一行都是对齐的到 4 个字节。缓冲区中的像素大小为 3 字节,并且被紧密打包,这会导致错位。

glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glPixelStorei(GL_UNPACK_ALIGNMENT, 4); // default

由于图片格式是PNG,所以图片很有可能有4个通道(GL_RGBA)。在指定纹理图像之前评估nrOfChannels

unsigned char* data = stbi_load("image.png", &width, &height, &nrOfChannels, 0);
// [...]

unsigned int format = nrOfChannels == 4 ? GL_RGBA : GL_RGB; 
glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);

也可以强制stbi_load 生成具有4个通道的图像,通过显式将4传递给最后一个参数:

int reqChannels= 4; 
unsigned char* data = stbi_load("image.png", &width, &height, &nrOfChannels, reqChannels);
// [...]

glTexImage2D(GL_TEXTURE_2D, GL_RGBA, format, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);

【讨论】:

以上是关于OpenGL纹理渲染与原始不匹配的主要内容,如果未能解决你的问题,请参考以下文章

OpenGL:一次只有一个 FBO 工作

OpenGL纹理渲染颠倒和模糊

OpenGL:当尺寸不能被 4 整除时,灰度纹理数据布局不匹配

OpenGL不使用纹理渲染

使用现代 OpenGL 渲染纹理

如何在OpenGL中实现灰度渲染?