在 OpenGL 中纹理四边形
Texturing a Quad in OpenGL
到目前为止,我已经学会了如何在 OpenGL 中创建带有纹理的立方体。
现在我想更改此代码以对四边形进行纹理化。我已将顶点 + 索引从立方体更改为四边形。
Quad 看起来像这样:
纹理完全扭曲,上三角缺失...
这是我正在使用的代码:
1.
GLfloat vertices[] = {
1.0f, 1.0f, 0.0f, 1.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 0.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 1.0f
};
unsigned int indices[]{
0,1,2,
1,2,3,
};
2.
for (size_t o = 0; o < 6; o++) {
glPixelStorei(GL_UNPACK_ROW_LENGTH, breite_komplett);
glPixelStorei(GL_UNPACK_SKIP_PIXELS, ausschnitt_x_counter);
glPixelStorei(GL_UNPACK_SKIP_ROWS, ausschnitt_y_counter);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
glTexImage2D(
GL_TEXTURE_CUBE_MAP_POSITIVE_X + o, 0, GL_RGBA, ausschnitt_breite, ausschnitt_höhe, 0, GL_RGBA, GL_UNSIGNED_BYTE, sprite_image.getPixelsPtr());
}
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glGenerateMipmap(GL_TEXTURE_CUBE_MAP);
glBindTexture(GL_TEXTURE_CUBE_MAP, 0);
glEnable(GL_TEXTURE_2D);
你知道我需要改变什么吗?
编辑:
unsigned int indices[]{
0,1,2,
0,2,3
};
这是我的对象生成器:
glGenVertexArrays(1, &obj_vao);
glBindVertexArray(obj_vao);
glGenBuffers(1, &obj_ibo);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, obj_ibo);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indicies[0])* indicies_count, indicies, GL_STATIC_DRAW);
glGenBuffers(1, &obj_vbo);
glBindBuffer(GL_ARRAY_BUFFER, obj_vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices[0]) * count_vertices, vertices, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(vertices[0]) * 5, 0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(vertices[0]) * 5, (void*)(sizeof(vertices[0]) * 3));
glEnableVertexAttribArray(1);
glBindVertexArray(0);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
编辑:
如果顶点是这样的:
GLfloat vertices[] = {
1.0f, 1.0f, -1.0f, 1.0f, 1.0f,
1.0f, -1.0f, -1.0f, 1.0f, 0.0f,
-1.0f, -1.0f, -1.0f, 0.0f, 0.0f,
-1.0f, 1.0f, -1.0f, 0.0f, 1.0f
};
一切都会好起来的,Quad 看起来像这样:
但我需要这样的原点中的四边形:
GLfloat vertices[] = {
1.0f, 1.0f, 0.0f, 1.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 0.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 1.0f
};
有了这个顶点,纹理被扭曲了...
2 个三角形图元的索引不构成四边形。指数必须是:
unsigned int indices[]{ 0, 1, 2, 1, 2, 3 };
unsigned int indices[]{ 0, 1, 2, 0, 2, 3 };
3 0
+-----+ +
| / / |
| / / |
+ +-----+
2 1
创建纹理时,您会混合 GL_TEXTURE_CUBE_MAP
和 GL_TEXTURE_2D
。这是没有意义的。要么创建立方体贴图纹理并设置 GL_TEXTURE_CUBE_MAP
的参数,要么创建二维纹理。
无论如何,如果你想创建一个立方体贴图,那么你必须在设置参数时使用GL_TEXTURE_CUBE_MAP
。
纹理立方体的纹理坐标是一个三维向量。更改立方体侧面的顶点坐标。例如:
(你根本不需要纹理坐标)
GLfloat vertices[] = {
// x y z
1.0f, 1.0f, 1.0f, 1.0f, 1.0f,
1.0f, -1.0f, 1.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 1.0f, 0.0f, 0.0f,
-1.0f, 1.0f, 1.0f, 0.0f, 1.0f
};
立方体的中心是 (0, 0, 0),因此您也可以使用纹理的顶点坐标:
顶点着色器
in vec3 position;
out vec3 cubeCoord;
void main()
{
cubeCoord = position;
// [...]
}
片段着色器:
in vec3 cubeCoord;
uniform samplerCube cubeTex;
void main()
{
vec4 color = texture(cubeTex, cubeCoord);
// [...]
}
或者,您可以为立方体贴图纹理使用单独的 3 维纹理坐标:
GLfloat vertices[] = {
// x y z u v w
1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, -1.0f, 1.0f,
-1.0f, -1.0f, 0.0f, -1.0f, -1.0f, 1.0f,
-1.0f, 1.0f, 0.0f, -1.0f, 1.0f, 1.0f,
};
到目前为止,我已经学会了如何在 OpenGL 中创建带有纹理的立方体。 现在我想更改此代码以对四边形进行纹理化。我已将顶点 + 索引从立方体更改为四边形。
Quad 看起来像这样:
纹理完全扭曲,上三角缺失...
这是我正在使用的代码:
1.
GLfloat vertices[] = {
1.0f, 1.0f, 0.0f, 1.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 0.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 1.0f
};
unsigned int indices[]{
0,1,2,
1,2,3,
};
2.
for (size_t o = 0; o < 6; o++) {
glPixelStorei(GL_UNPACK_ROW_LENGTH, breite_komplett);
glPixelStorei(GL_UNPACK_SKIP_PIXELS, ausschnitt_x_counter);
glPixelStorei(GL_UNPACK_SKIP_ROWS, ausschnitt_y_counter);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
glTexImage2D(
GL_TEXTURE_CUBE_MAP_POSITIVE_X + o, 0, GL_RGBA, ausschnitt_breite, ausschnitt_höhe, 0, GL_RGBA, GL_UNSIGNED_BYTE, sprite_image.getPixelsPtr());
}
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glGenerateMipmap(GL_TEXTURE_CUBE_MAP);
glBindTexture(GL_TEXTURE_CUBE_MAP, 0);
glEnable(GL_TEXTURE_2D);
你知道我需要改变什么吗?
编辑:
unsigned int indices[]{
0,1,2,
0,2,3
};
这是我的对象生成器:
glGenVertexArrays(1, &obj_vao);
glBindVertexArray(obj_vao);
glGenBuffers(1, &obj_ibo);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, obj_ibo);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indicies[0])* indicies_count, indicies, GL_STATIC_DRAW);
glGenBuffers(1, &obj_vbo);
glBindBuffer(GL_ARRAY_BUFFER, obj_vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices[0]) * count_vertices, vertices, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(vertices[0]) * 5, 0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(vertices[0]) * 5, (void*)(sizeof(vertices[0]) * 3));
glEnableVertexAttribArray(1);
glBindVertexArray(0);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
编辑:
如果顶点是这样的:
GLfloat vertices[] = {
1.0f, 1.0f, -1.0f, 1.0f, 1.0f,
1.0f, -1.0f, -1.0f, 1.0f, 0.0f,
-1.0f, -1.0f, -1.0f, 0.0f, 0.0f,
-1.0f, 1.0f, -1.0f, 0.0f, 1.0f
};
一切都会好起来的,Quad 看起来像这样:
但我需要这样的原点中的四边形:
GLfloat vertices[] = {
1.0f, 1.0f, 0.0f, 1.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 0.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 1.0f
};
有了这个顶点,纹理被扭曲了...
2 个三角形图元的索引不构成四边形。指数必须是:
unsigned int indices[]{ 0, 1, 2, 1, 2, 3 };
unsigned int indices[]{ 0, 1, 2, 0, 2, 3 };
3 0
+-----+ +
| / / |
| / / |
+ +-----+
2 1
创建纹理时,您会混合 GL_TEXTURE_CUBE_MAP
和 GL_TEXTURE_2D
。这是没有意义的。要么创建立方体贴图纹理并设置 GL_TEXTURE_CUBE_MAP
的参数,要么创建二维纹理。
无论如何,如果你想创建一个立方体贴图,那么你必须在设置参数时使用GL_TEXTURE_CUBE_MAP
。
纹理立方体的纹理坐标是一个三维向量。更改立方体侧面的顶点坐标。例如:
(你根本不需要纹理坐标)
GLfloat vertices[] = {
// x y z
1.0f, 1.0f, 1.0f, 1.0f, 1.0f,
1.0f, -1.0f, 1.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 1.0f, 0.0f, 0.0f,
-1.0f, 1.0f, 1.0f, 0.0f, 1.0f
};
立方体的中心是 (0, 0, 0),因此您也可以使用纹理的顶点坐标:
顶点着色器
in vec3 position;
out vec3 cubeCoord;
void main()
{
cubeCoord = position;
// [...]
}
片段着色器:
in vec3 cubeCoord;
uniform samplerCube cubeTex;
void main()
{
vec4 color = texture(cubeTex, cubeCoord);
// [...]
}
或者,您可以为立方体贴图纹理使用单独的 3 维纹理坐标:
GLfloat vertices[] = {
// x y z u v w
1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, -1.0f, 1.0f,
-1.0f, -1.0f, 0.0f, -1.0f, -1.0f, 1.0f,
-1.0f, 1.0f, 0.0f, -1.0f, 1.0f, 1.0f,
};