LearnOpenGL笔记——四、高级OpenGL：4.6“立方体贴图”

四、高级OpenGL：4.6“立方体贴图”

• 立方体贴图(Cube Map)：将多个纹理组合起来映射到一张纹理上的一种纹理类型。
• 简单来说，立方体贴图就是一个包含了6个2D纹理的纹理，每个2D纹理都组成了立方体的一个面：一个有纹理的立方体。
• 立方体贴图有一个非常有用的特性，它可以通过一个方向向量来进行索引/采样。假设我们有一个1x1x1的单位立方体，方向向量的原点位于它的中心。使用一个橘黄色的方向向量来从立方体贴图上采样一个纹理值会像是这样：
  

创建立方体贴图

• 直接贴代码

  unsigned int loadCubemap(vector<std::string> faces)
  {
      unsigned int textureID;
      glGenTextures(1, &textureID);
      glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);
  
      int width, height, nrComponents;
      for (unsigned int i = 0; i < faces.size(); i++)
      {
          unsigned char* data = stbi_load(faces[i].c_str(), &width, &height, &nrComponents, 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;
  }
  

• 对比创建普通纹理贴图的代码

  {
      unsigned int textureID;
      glGenTextures(1, &textureID);
  
      int width, height, nrComponents;
      unsigned char* data = stbi_load(path, &width, &height, &nrComponents, 0);
      if (data)
      {
          GLenum format;
          if (nrComponents == 1)
              format = GL_RED;
          else if (nrComponents == 3)
              format = GL_RGB;
          else if (nrComponents == 4)
              format = GL_RGBA;
  
          glBindTexture(GL_TEXTURE_2D, textureID);
          glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
          glGenerateMipmap(GL_TEXTURE_2D);
  
          glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT);  // GL_REPEAT
          glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
          glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
          glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  
          stbi_image_free(data);
      }
      else
      {
          std::cout << "Texture failed to load at path: " << path << std::endl;
          stbi_image_free(data);
      }
  
      return textureID;
  }
  

• 在片段着色器中，我们使用了一个不同类型的采样器，samplerCube，我们将使用texture函数使用它进行采样，但这次我们将使用一个vec3的方向向量而不是vec2。使用立方体贴图的片段着色器会像是这样的：

  in vec3 textureDir; // 代表3D纹理坐标的方向向量
  uniform samplerCube cubemap; // 立方体贴图的纹理采样器
  
  void main()
  {             
      FragColor = texture(cubemap, textureDir);
  }
  

• 这可以用来做，天空盒！

天空盒

加载天空盒

• 在调用上面给出的函数之前，我们需要将合适的纹理路径按照立方体贴图枚举指定的顺序加载到一个vector中：

  vector<std::string> faces
  {
      "right.jpg",
      "left.jpg",
      "top.jpg",
      "bottom.jpg",
      "front.jpg",
      "back.jpg"
  };
  unsigned int cubemapTexture = loadCubemap(faces);
  

显示天空盒

• 由于天空盒是绘制在一个立方体上的，和其它物体一样，我们需要另一个VAO、VBO以及新的一组顶点

• 当立方体处于原点(0, 0, 0)时，它的每一个位置向量都是从原点出发的方向向量。这个方向向量正是获取立方体上特定位置的纹理值所需要的。正是因为这个，我们只需要提供位置向量而不用纹理坐标了。

• 要渲染天空盒的话，我们需要一组新的着色器，它们都不是很复杂。因为我们只有一个顶点属性，顶点着色器非常简单：

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

• 顶点着色器中很有意思的部分是，我们将输入的位置向量作为输出给片段着色器的纹理坐标。片段着色器会将它作为输入来采样samplerCube：

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

• 绘制天空盒时，我们需要将它变为场景中的第一个渲染的物体，并且禁用深度写入。这样子天空盒就会永远被绘制在其它物体的背后了。

• 当前的观察矩阵会旋转、缩放和位移来变换天空盒的所有位置，所以当玩家移动的时候，立方体贴图也会移动！我们希望移除观察矩阵中的位移部分，让移动不会影响天空盒的位置向量：

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

• 这将移除任何的位移，但保留旋转变换，让玩家仍然能够环顾场景。

优化

• 目前我们是首先渲染天空盒，之后再渲染场景中的其它物体。这样子能够工作，但不是非常高效。
• 如果我们先渲染天空盒，我们就会对屏幕上的每一个像素运行一遍片段着色器，即便只有一小部分的天空盒最终是可见的。
• 可以使用提前深度测试(Early Depth Testing)轻松丢弃掉的片段能够节省我们很多宝贵的带宽。
• 问题是，天空盒只是一个1x1x1的立方体，它很可能会不通过大部分的深度测试，导致渲染失败。
• 不用深度测试来进行渲染不是解决方案，因为天空盒将会复写场景中的其它物体.
• 我们需要欺骗深度缓冲，让它认为天空盒有着最大的深度值1.0，只要它前面有一个物体，深度测试就会失败。
• 怎么欺骗？

  void main()
  {
      TexCoords = aPos;
      vec4 pos = projection * view * vec4(aPos, 1.0);
      gl_Position = pos.xyww;
  }
  

• 我们还要改变一下深度函数，将它从默认的GL_LESS改为GL_LEQUAL。深度缓冲将会填充上天空盒的1.0值，所以我们需要保证天空盒在值小于或等于深度缓冲而不是小于时通过深度测试。

环境映射

• 我们现在将整个环境映射到了一个纹理对象上了，能利用这个信息的不仅仅只有天空盒。
• 通过使用环境的立方体贴图，我们可以给物体反射和折射的属性。
• 这样使用环境立方体贴图的技术叫做环境映射(Environment Mapping)，其中最流行的两个是反射(Reflection)和折射(Refraction)。

反射

• 反射的原理并不难。下面这张图展示了我们如何计算反射向量，并如何使用这个向量来从立方体贴图中采样：
  
• 片段着色器的实现

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

折射

• 折射是通过斯涅尔定律(Snell’s Law)来描述的，使用环境贴图的话看起来像是这样：
  
• 唯一要修改的就是片段着色器：

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

动态环境贴图

• 通过使用帧缓冲，我们能够为物体的6个不同角度创建出场景的纹理，并在每个渲染迭代中将它们储存到一个立方体贴图中。
• 之后我们就可以使用这个（动态生成的）立方体贴图来创建出更真实的，包含其它物体的，反射和折射表面了。
• 这就叫做动态环境映射(Dynamic Environment Mapping)，因为我们动态创建了物体周围的立方体贴图，并将其用作环境贴图。
• 虽然它看起来很棒，但它有一个很大的缺点：我们需要为使用环境贴图的物体渲染场景6次，这是对程序是非常大的性能开销。
• 现代的程序通常会尽可能使用天空盒，并在可能的时候使用预编译的立方体贴图，只要它们能产生一点动态环境贴图的效果。
• 虽然动态环境贴图是一个很棒的技术，但是要想在不降低性能的情况下让它工作还是需要非常多的技巧的。

练习