立方体贴图（Cubemaps）
-
立方体贴图（cubemap）是一种纹理，包含来自立方体每个平面的6个独立的2D纹理：一个纹理立方体。立方体贴图的一种有用特性就是它可以使用方向矢量进行索引/采样。下面展示一个1X1X1单位立方体，棕色为方向矢量的图示：（图片取自书中）
立方体贴图采样 - 方向矢量的大小并不重要，OpenGL通过方向矢量与纹理面的撞击点检索和采样相应纹理值。
1. 创建立方体贴图
- 立方体贴图与其他纹理类型相似，我们在操作前创建并绑定到相应的纹理单元。
unsigned int textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);
- 因为立方体贴图包含6个纹理，这意味着我们需要为每个面的纹理调用
glTexImage2D函数。由于有6个面，OpenGL为我们提供了6个特别的纹理目标。如下表所示：
| 纹理目标 | 方向 |
|---|---|
| GL_TEXTURE_CUBE_MAP_POSITIVE_X | 右 |
| GL_TEXTURE_CUBE_MAP_NEGATIVE_X | 左 |
| GL_TEXTURE_CUBE_MAP_POSITIVE_Y | 上 |
| GL_TEXTURE_CUBE_MAP_NEGATIVE_Y | 下 |
| GL_TEXTURE_CUBE_MAP_POSITIVE_Z | 后 |
| GL_TEXTURE_CUBE_MAP_NEGATIVE_Z | 前 |
- 上面表格的纹理目标值与其他OpenGL枚举值相似，值为
int类型，并且线性递增。因此我们可以从GL_TEXTURE_CUBE_MAP_POSITIVE_X开始循环所有纹理目标。
int width, height, nrChannels;
unsigned char* data;
for(unsigned int i = 0; i < texture_faces.size(); i++)
{
data = stb_load(texture_faces[i].c_str(), & width, &height, &nrChannels, 0);
glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
}
- 为立方体贴图指定裁剪和过滤方法。
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
- 对于立方体贴图，在着色器中我们需要使用另外一种取样器类型
samplerCube并使用函数texture来进行采样。而且我们应该使用vec3类型的方向矢量而不是vec2。
in vec3 textureDir; // 方向矢量：3D纹理的坐标
unfirom samplerCube cubemap; // 立方体贴图纹理取样器
void main()
{
FragColor = texture(cubemap, textureDir);
}
2. 天空盒（Skybox）
- 一个天空盒就是一个包含整个场景和6张周围环境图像的立方体，能够给予观察者更大视觉空间的错觉。一般天空盒图像具有下面图像所展示的模式：（图片取自书中）
天空盒纹理图像
2.1 加载天空盒
- 因为天空盒其实就是个立方体贴图，因此加载与立方体贴图相似，下面我们将加载封装成一个函数。
unsigned int loadCubemap(std::vector<std::string> faces)
{
unsigned int textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);
int width, height, nrChannels;
unsigned char* data;
for(unsigned int i = 0; i < faces.size(); i++)
{
unsigned char* data = stbi_load(faces[i].c_str(), & width, &height, &nrChannels, 0);
if(data)
{
glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
stbi_image_free(data);
}
else
{
std::cout << "Cubemap failed to load at path: " << faces[i] << std::endl;
stbi_image_free(data);
}
}
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
return textureID;
}
- 接下来，我们只要指定图像路径，就可以将天空盒加载为纹理数据进行使用。
std::vector<std::string> faces = {
"right.jpg",
"left.jpg",
"top.jpg",
"bottom.jpg",
"front.jpg",
"back.jpg"
};
unsigned int cubemapTexture = loadCubemap(faces);
2.2 显示天空盒
- 因为当立方体使用立方体贴图时可以使用本地位置作为纹理坐标，因此我们只需提供位置矢量而无需设置纹理坐标。要渲染天空盒我们可以定义如下顶点着色器。
#version 330 core
layout (location = 0) in vec3 aPos;
out vec3 TexCoords;
uniform mat4 projection;
uniform mat4 view;
void main()
{
TexCoords = aPos;
gl_Position = projection * view * vec4(aPos, 1.0);
}
- 片元着色器则从顶点着色器接收纹理位置进行纹理取样。
#version 330 core
out vec4 FragColor;
in vec3 TexCoords;
uniform samplerCube skybox;
void main()
{
FragColor = texture(skybox, TexCoords);
}
- 要渲染天空盒，我们禁用深度测试，并将其首先在场景中进行绘制。
glDepthMask(GL_FALSE);
skyboxShader.use();
// ... 设置视矩阵和投影矩阵
glBindVertexArray(skyboxVAO);
glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);
glDrawArrays(GL_TRIANGLES, 0, 36);
glDepthMask(GL_TRUE);
// ... 绘制剩下的场景
-
这时候，我们运行程序并拉近视角，会出现如下渲染效果。
天空盒视角问题渲染 - 上面的渲染问题，是因为当前的视矩阵会对天空盒的位置进行变换，我们需要移除视矩阵中的平移变换，只保留旋转。从基本光照的章节我们知道，我们从4X4的矩阵中抽取左上角的3X3矩阵就可以去除平移变换。
glm::vec4 view = glm::mat4(glm::mat3(camera.GetViewMatrix()));
-
渲染效果，这时移动视角将只有立方体发送变化。
天空盒渲染 - 上面的渲染我们是先绘制天空盒然后绘制立方体，这样我们需要渲染天空盒的每个片元。通过使用早期深度测试（early depth testing）我们可以丢弃不可见的片元提高性能。但是如果最后才绘制天空盒，则会遮挡立方体，不管是在有深度测试或无的情况下。因此，我们需要使用一个小技巧来骗过深度缓冲区，让它认为天空盒拥有最大的深度值1.0，所以天空盒在有物体处在它前面时都会通不过深度测试。从坐标系统章节我们知道顶点着色器运行后会执行透视除法（perspective division），将坐标的xyz分量除以w分量，那么我们将z分量的值设为与w分量一样，则透视除法后标准设备坐标的z分量的值则为1。最后我们将深度测试的运算符设置为
GL_LEQUAL。
void main()
{
TexCoords = aPos;
vec4 pos = projection * view * vec4(aPos, 1.0);
gl_Position = pos.xyww;
}
3. 环境映射（Environment mapping）
- 像上一小节那样使用环境立方体贴图的技术我们称为环境映射（environment mapping）技术，其中最流行的两种：反射和折射。
3.1 反射
- 反射（Reflection）就是物体（或部分物体）反射周围环境的属性，即基于视角物体的颜色不同程度地等于环境的颜色，例如镜子就是一个反射物体。
- 下面的图示展示了我们如何计算反射矢量，并使用该矢量采样立方体贴图。（图片取自书中）
反射
从上图可知，我们可以基于视角矢量绕物体法向量
来计算反射矢量
.
- GLSL有个内置函数
reflect可用于计算反射矢量，然后我们就可以使用反射矢量 - 基于前面渲染天空盒的场景，我们修改立方体的片元着色器，为其添加反射属性。
#version 330 core
out vec4 FragColor;
in vec3 Normal;
in vec3 Position;
uniform vec3 cameraPos;
uniform samplerCube skybox;
void main()
{
vec3 I = normalize(Position - cameraPos);
vec3 R = reflect(I, normalize(Normal));
FragColor = vec4(texture(skybox, R).rgb, 1.0);
}
- 调整顶点着色器，输出法向量和位置变量到片元着色器。
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aNormal;
out vec3 Normal;
out vec3 Position;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
Normal = mat3(transpose(inverse(model))) * aNormal;
Position = vec3(model * vec4(aPos, 1.0));
gl_Position = projection * view * vec4(Position, 1.0);
}
- 因为立方体使用到了法向量，因此顶点数据原先的纹理坐标需要替换成法向量，具体可以参考前面章节的顶点数据。同时记得设置相机位置的uniform变量
cameraPos。 - 最后我们渲染绑定立方体和天空盒。
glBindVertexArray(cubeVAO);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);
glDrawArrays(GL_TRIANGLES, 0, 36);
-
渲染效果。
反射渲染
3.2 折射（Refraction）
- 另外一种形式的环境映射称为折射（refraction），与反射相似。折射是由于光穿过不同材质时光发生了方向的改变。如下图所示：（图片取自书中）
折射
与反射相似，我们有视角矢量，法向量
- 使用GLSL内置函数
refract可以很容易计算折射矢量，函数需要一个法向量，一个视角矢量和两种材质折射率之间的比率值。 - 常见材质折射率如下表所示：
| 材质 | 折射率 |
|---|---|
| 空气 | 1.00 |
| 水 | 1.33 |
| 冰 | 1.309 |
| 玻璃 | 1.52 |
| 钻石 | 2.42 |
- 假设我们的立方体由玻璃制成，那么场景中光线由空气进入玻璃发生折射，其比率值为
。
- 上面反射的渲染中我们已经设定了法向量，和相机位置等数据，对于折射，我们只需修改片元着色器即可将属性变更为折射。
void main()
{
float ratio = 1.00 / 1.52;
vec3 I = normalize(Position - cameraPos);
vec3 R = refract(I, normalize(Normal), ratio);
FragColor = vec4(texture(skybox, R).rgb, 1.0);
}
-
渲染效果。
折射渲染 - 注意：对于精确的物理结果，我们还需对光线离开物体时计算一次折射，现在我们只是使用单向折射。
