stb_image在加载 opengl 纹理的图像时不会垂直翻转

stb_image wont flip vertically when image loads for an opengl texture

本文关键字：图像 垂直翻转 纹理 image 加载 opengl stb      更新时间：2023-10-16

我尝试加载的图像在渲染时旋转了 90 度。我正在使用"加载时垂直翻转图像"，但是当渲染纹理时，图像会旋转 90 度。

我试图更改索引和 tex 坐标，但没有奏效。

//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);

纹理应与图像相似，而不是旋转 90 度。图片：https://opengameart.org/sites/default/files/oga-textures/brick_base.png

你说我试图更改索引和纹理坐标，但没有用。 但我认为您的问题恰恰出在您的 2D 到 3D 坐标映射中。

预计使用您共享的当前映射坐标进行 90 度旋转。我的意思是：

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

如果您不想要 90 度旋转，它应该是：

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

所以你的mesh应该是这样的（没有交换颜色，如果需要，可以改变它）：

    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
    };

编辑

相关文章：