立方体贴图(Cube Map)

立方体贴图是由“上下左右前后”6个2D纹理合并成的一张纹理。与2D纹理使用（u，v）坐标采样不同的是，立方体纹理使用一个方向向量进行采样。

1. 方向向量 长度不重要，重要的是 方向。
2. 采样时，会将向量的原点放到立方体的中心，把向量当做一条无线延长的射线，因此必将与立方体产生交点，根据交点即可确定采样哪个2D纹理以及采样坐标。

立方体纹理的采样方法：

1. 把一个1x1x1的单位立方体中心放置原点(0,0,0)，并给它应用立方体贴图。

1. 在片元着色器中，把插值后的顶点位置坐标当做采样立方体贴图的方向向量。

1. （顶点位置坐标 - 原点 = 顶点位置向量）且因为原点为(0,0,0)，顶点位置坐标与顶点位置向量形式上相等，因此可以直接当做进行采样的方向向量。

1. 接下来对所有插值后的顶点执行相同的操作即可。

因此通过对一个单位立方体的渲染，就可完成对立方体纹理所有面的采样。

创建立方体贴图

与生成其他纹理类似，只不过此次要绑定到GL_TEXTURE_CUBE_MAP的纹理目标。

unsigned int textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);

与创建2D纹理仅需调用glTexImage2D一次不同的，立方体纹理需要调用六次。需要为每个面使用特定的纹理目标(target)参数进行纹理绑定设定。

该纹理目标参数其实是枚举类型，其背后的int值时线性增加的。因此可以按顺序准备好纹理资源的路径放到一个叫做textures_faces的vector中，之后可通过for循环进行加载。

int width, height, nrChannels;
unsigned char *data;
for(unsigned int i = 0; i < textures_faces.size(); i++)
{data = stbi_load(textures_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);
}

之后再设定纹理的环绕和过滤方式。其中需要将环绕设定为GL_CLAMP_TO_EDGE，当在两个面之间采样时，永远返回它们之间的边界值。

完整代码：

将整个加载过程封装到一个loadCubemap函数中，逻辑清晰，方便理解。

vector<std::string> faces
{"right.jpg","left.jpg","top.jpg","bottom.jpg","front.jpg","back.jpg"
};
unsigned int cubemapTexture = loadCubemap(faces);unsigned int loadCubemap(vector<std::string> faces)
{unsigned int textureID;glGenTextures(1, &textureID);glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);int width, height, nrChannels;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 texture failed to load at path: " << faces[i] << std::endl;stbi_image_free(data);}}glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_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;
}

天空盒

玩过cf类似的3D游戏，就知道游戏的天空背景就是采用天空盒。在其中有两个很明显的特征：

1. 背景永远覆盖在最底层，其他物体绘制在其之上。

1. 无论玩家怎么移动，天空盒总是没有任何变化，给玩家产生周围环境非常大的印象。

特征一实现

方式一：关闭深度写入，首先绘制天空盒。打开深度写入，再绘制其他物体进行覆盖。

1. 方式一中，对于天空盒，我们其实可以想象有一个单位立方体套在摄像机头上，不管摄像机怎么移动，它总是跟随着它，而且我们看到的一直是立方体的内部。并且它的体积是比较小的，因此要是开启深度写入，其必然会遮挡住场景中的其他物体。所以关闭深度写入，我们先把天空盒绘制到颜色缓存区中，进行一次打底操作，然后打开深度写入，再绘制其他物体在内存缓冲区中进行覆盖。
2. 然而方有可能因为大量物体的遮挡，最后只呈现出一部分的天空盒，造成一定浪费，因此该方式并不高效。有没有一种方法能够最后绘制天空盒，从而避免对被遮挡住的部分进行绘制？
3. 为了减少对一些被遮挡片元的绘制，可以使用 提前深度测试(Early Depth Testing)。但是天空盒仍然是一个1x1x1的立方体，在深度测试中，它的深度值仍然小于绝大部分物体。考虑一下基本情况，其实我们想要天空盒置于最底层，也就是尽量不让其通过 提前深度测试，也就意味着它在ndc坐标的z值需要足够大,比如说是1.0，这样子只要其前面有任何物体都会被遮挡住。因此我们可以想办法修改它的z值，以达到我们的目的。
4. 透视除法是在顶点着色器之后运行的，因此我们可以采取一种欺骗的手段，在顶点着色器中将经过mvp矩阵计算过后顶点坐标的z分量修改为w分量。这样子就能在ndc坐标中让z值为1.0。

方式二：先绘制物体，再绘制天空盒。开启提前深度测试，在天空盒顶点着色器中，将透视除法前的z分量修改为w分量。

顶点着色器：

#version 330 core
layout (location = 0) in vec3 aPos;out vec3 TexCoords;uniform mat4 projection;
uniform mat4 view;void main()
{TexCoords = aPos;vec4 pos = projection * view * vec4(aPos, 1.0);gl_Position = pos.xyww;
}

片元着色器：

#version 330 core
out vec4 FragColor;in vec3 TexCoords;uniform samplerCube skybox;void main()
{    FragColor = texture(skybox, TexCoords);
}

特征二实现

可以想象有个套在摄像机上的天空盒立方体，无论摄像机怎么位移，该天空盒总是和它保持相对位置不变。但是其并不受摄像机的旋转操作影响。

方式一：在世界空间中，让天空盒的位置与摄像机的位置重合。因此需要在天空的模型变化中加上一个位移，即位移到摄像机的位置。

方式二：天空盒在没有任何模型变换时，就处于世界坐标的原点。观测变换可理解为一种逆变换，即把摄像机位移到世界原点，并把轴旋转至于世界坐标重合。通常来说，是需要对所有物体使用相同的观测变化。但是天空盒是个例外，我们是希望天空盒与摄像机的位置是重合的。因此对天空盒进行观测变换时，需要去除位移的部分，只保留旋转的部分即可。具体操作时保留观测矩阵的左上角3x3的部分并以4x4形式储存。

glm::mat4 view = glm::mat4(glm::mat3(camera.GetViewMatrix()));

环境映射

立方体纹理除了可以制作天空盒，还可以作用于物体之上，给予物体反射和折射的属性，这种使用环境立方体贴图的技术叫做环境映射(Environment Mapping)。

反射

镜子就是一个反射的物体，它会根据观察者的视角反射周围的环境。GLSL内建的reflect函数来计算这个反射向量。反射向量将作为采样立方体纹理的方向向量，返回环境的颜色值。

整个计算过程是在世界空间中完成的。

顶点着色器：

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 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 * model * vec4(aPos, 1.0);
}

片元着色器：

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

折射

水就是一个折射的例子。这是由于不同介质之间的折射率不同所导致的。GLSL的内建refract函数来实现了折射效果，除了法向量和观察方向，我们还需指定两个材质之间的折射率。

片元着色器需要修改的地方：

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

动态环境贴图

之前使用的是静态的图像来组成天空盒，效果已十分不错，可惜它并没有场景中的其他物体。因此在实现一些反射或折射效果时，并不是那么真实。

因此我们可以采用上一节内容 OpenGL 入门 16：帧缓冲 中的技术。在渲染循环中，使用帧缓冲为一个物体在六个方向分别创建场景纹理并存储到一个立方体贴图中。这样使用这个动态生成的立方体贴图，就可以生成更真实的，包含了其他物体的反射和折射效果。这就是动态环境映射。

虽然它的效果很好，但是它的性能开销十分之大。