LearnOpenGL17——立方体贴图

最新推荐文章于 2022-06-04 21:29:46 发布

baixiaofei567

最新推荐文章于 2022-06-04 21:29:46 发布

阅读量458

点赞数

分类专栏：图形学文章标签： opengl 图形学

原文链接：https://learnopengl-cn.github.io/04%20Advanced%20OpenGL/06%20Cubemaps/#_4

版权

图形学专栏收录该内容

29 篇文章 2 订阅

订阅专栏

什么是立方体贴图

简单来说，立方体贴图就是一个包含了6个2D纹理的纹理，每个2D纹理都组成了立方体的一个面，我们知道如果将一张贴图赋给一个立方体模型，那么这个立方体的六个面都显示该贴图，但是对于立方体贴图，我们就能对立方体各个面都使用不同的贴图附在立方体上，如图：每个面展示的图片都不一样。
在这里插入图片描述

立方体贴图原理

下图展示纹理映射的原理
在这里插入图片描述
对于立方体贴图，也使用了类似的映射原理，核心是对立方体的面进行展开，处理成2D纹理，然后再进行对应的纹理映射。如图：将立方体六个面展开成平面后进行纹理映射：

在这里插入图片描述

立方体贴图应用——天空盒

理解了立方体贴图的相关原理，就可以对其进行应用了，其最常见的应用就是创建游戏的“边界”——天空盒子
对于实际应用，我们不能简单使用一张展开的贴图来映射，而是要使用六张贴图做对应的映射，原因是一张贴图只能映射到一个面上。我们可以使用一个数组来保存这六张贴图。

创建立方体贴图

和创建2D纹理的不同之处在于glBindTexture传GL_TEXTURE_CUBE_MAP

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

因为立方体贴图包含有6个纹理，每个面一个，我们需要调用glTexImage2D函数6次，参数和之前教程中很类似。但这一次我们将纹理目标(target)参数设置为立方体贴图的一个特定的面，告诉OpenGL我们在对立方体贴图的哪一个面创建纹理。这就意味着我们需要对立方体贴图的每一个面都调用一次glTexImage2D。
立方体贴图的六个面分别是：

纹理目标	方位
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	前

这些值从GL_TEXTURE_CUBE_MAP_POSITIVE_X 开始递增，即GL_TEXTURE_CUBE_MAP_POSITIVE_X+1=GL_TEXTURE_CUBE_MAP_NEGATIVE_X 以此类推
使用循环为六个面附加对应的纹理

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

设置环绕和过滤方式

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

在着色器中使用cubeMap

in vec3 textureDir; // 指定立方体纹理坐标的方向向量
uniform samplerCube cubemap; // 立方体贴图的纹理采样器

void main()
{             
    FragColor = texture(cubemap, textureDir);
}

加载天空盒

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

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

优化

目前我们是首先渲染天空盒，之后再渲染场景中的其它物体。这样子能够工作，但不是非常高效。如果我们先渲染天空盒，我们就会对屏幕上的每一个像素运行一遍片段着色器，即便只有一小部分的天空盒最终是可见的。可以使用提前深度测试(Early Depth Testing)轻松丢弃掉的片段能够节省我们很多宝贵的带宽。

我们只需要在提前深度测试通过的地方渲染天空盒的片段就可以了，很大程度上减少了片段着色器的调用。所以，我们将会最后渲染天空盒。