OpenGL立方体纹理贴图
OpenGL正方体纹理贴图
- 0. 写在最前面
- 1. 正方体顶点属性构建
- 2. 绑定多个VAO、VBO
- 3. 创建多个纹理
- 4. 渲染循环
- 5. 实现代码
- 6. 多个立方体纹理贴图
0. 写在最前面
要实现本篇的内容，建议先学习下以下内容
- 多个着色器与多个VAO,VBO绘制三角形
- OpenGL纹理贴图
- OpenGL坐标变换
1. 正方体顶点属性构建
依据之前学习的坐标变换，构造一个立方体
首先需要构造三维顶点(x,y,z)以及相应的纹理坐标(u,v)
每个面由2个三角形构成所以一共有6个三维顶点和纹理坐标
我们依次对每个面进行处理
float vertices1[] = {
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f,
0.5f, -0.5f, 0.5f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 1.0f,
0.5f, 0.5f, 0.5f, 1.0f, 1.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 1.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f
};
[...]
//第一个顶点属性vertices1[]至第六个顶点属性vertices6[],完整代码给出
2. 绑定多个VAO、VBO
多个VAO、VBO相关内容可以参考这一篇文章多个着色器与多个VAO,VBO绘制三角形
此外还需要绑定6个VAO和VBO，这边调用Facei函数实现
void Facei(int a, int b, int size_c, float c[])
{
glBindVertexArray(a);
glBindBuffer(GL_ARRAY_BUFFER, b);
glBufferData(GL_ARRAY_BUFFER, size_c, c, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// texture coord attribute
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
}
3. 创建多个纹理
纹理贴图相关内容可以看这篇文章OpenGL纹理贴图
然后创建并导入6张纹理图片，这边列出一张图片的，其余类似，这边注意在导入图片的过程当中可能出现图片纹理错误等问题，这边建议先使用画图工具打开，然后保存（如果还是有问题需要进一步修改图片参数）
//纹理1
glGenTextures(1, &texture1);
glBindTexture(GL_TEXTURE_2D, texture1);
// set the texture wrapping parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
// set texture filtering parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
// load image, create texture and generate mipmaps
int width, height, nrChannels;
stbi_set_flip_vertically_on_load(true); // tell stb_image.h to flip loaded texture's on the y-axis.
unsigned char *data = stbi_load(FileSystem::getPath("resources/textures/a0.png").c_str(), &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
{
std::cout << "Failed to load texture" << std::endl;
}
stbi_image_free(data);
[...]
//纹理6
4. 渲染循环
接下来是渲染循环
在渲染循环当中我们需要关注的是坐标变换的MVP矩阵
MVP矩阵的实现可以看这篇文章OpenGL坐标变换
while (!glfwWindowShouldClose(window))
{
// input
// -----
processInput(window);
// render
// ------
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // also clear the depth buffer now!
// bind textures on corresponding texture units
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);
glActiveTexture(GL_TEXTURE2);
glBindTexture(GL_TEXTURE_2D, texture3);
glActiveTexture(GL_TEXTURE3);
glBindTexture(GL_TEXTURE_2D, texture4);
glActiveTexture(GL_TEXTURE4);
glBindTexture(GL_TEXTURE_2D, texture5);
glActiveTexture(GL_TEXTURE5);
glBindTexture(GL_TEXTURE_2D, texture6);
// activate shader
ourShader.use();
// create transformations
glm::mat4 model = glm::mat4(1.0f); // make sure to initialize matrix to identity matrix first
glm::mat4 view = glm::mat4(1.0f);
glm::mat4 projection = glm::mat4(1.0f);
model = glm::rotate(model, glm::radians(60.0f), glm::vec3(1.0f, 1.0f, 0.0f));
view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));
projection = glm::perspective(glm::radians(45.0f), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);
// retrieve the matrix uniform locations
unsigned int modelLoc = glGetUniformLocation(ourShader.ID, "model");
unsigned int viewLoc = glGetUniformLocation(ourShader.ID, "view");
// pass them to the shaders (3 different ways)
glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
glUniformMatrix4fv(viewLoc, 1, GL_FALSE, &view[0][0]);
// note: currently we set the projection matrix each frame, but since the projection matrix rarely changes it's often best practice to set it outside the main loop only once.
ourShader.setMat4("projection", projection);
// render box
ourShader.setInt("mixValue", 1);
glBindVertexArray(VAO[0]);
glDrawArrays(GL_TRIANGLES, 0, 6);
ourShader.setInt("mixValue", 2);
glBindVertexArray(VAO[1]);
glDrawArrays(GL_TRIANGLES, 0, 6);
ourShader.setInt("mixValue", 3);
glBindVertexArray(VAO[2]);
glDrawArrays(GL_TRIANGLES, 0, 6);
ourShader.setInt("mixValue", 4);
glBindVertexArray(VAO[3]);
glDrawArrays(GL_TRIANGLES, 0, 6);
ourShader.setInt("mixValue", 5);
glBindVertexArray(VAO[4]);
glDrawArrays(GL_TRIANGLES, 0, 6);
ourShader.setInt("mixValue", 6);
glBindVertexArray(VAO[5]);
glDrawArrays(GL_TRIANGLES, 0, 6);
// glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
// -------------------------------------------------------------------------------
glfwSwapBuffers(window);
glfwPollEvents();
}
注意在渲染循环当中要使用深度缓冲测试
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
所以在循环前应该开启深度缓冲：
glEnable(GL_DEPTH_TEST);
没开启深度缓冲：图片穿透
开启深度缓冲：目标效果
改变模型旋转角度
此外我们可以将模型矩阵与时间联系起来，实现模型的动态变换，如图所示：
5. 实现代码
顶点着色器
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;
out vec2 TexCoord;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
gl_Position = projection * view * model * vec4(aPos, 1.0f);
TexCoord = vec2(aTexCoord.x, aTexCoord.y);
}
片段着色器
#version 330 core
out vec4 FragColor;
in vec2 TexCoord;
uniform int mixValue;
// texture samplers
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D texture3;
uniform sampler2D texture4;
uniform sampler2D texture5;
uniform sampler2D texture6;
void main()
{
// linearly interpolate between both textures (80% container, 20% awesomeface)
//FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 1);
if(mixValue==1)
FragColor = texture(texture1, TexCoord);
else if(mixValue==2)
FragColor = texture(texture2, TexCoord);
else if(mixValue==3)
FragColor = texture(texture3, TexCoord);
else if(mixValue==4)
FragColor = texture(texture4, TexCoord);
else if(mixValue==5)
FragColor = texture(texture5, TexCoord);
else
FragColor = texture(texture6, TexCoord);
}
主程序
#include 6. 多个立方体纹理贴图
此外我们可以修改代码在渲染循环中实现多个模型的repeat哈哈哈，结果如图所示：
