当前位置： 首页 > news >正文

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 09.天空和背景

news 来源：原创 2025/5/13 6:04:27

天空和背景

对于 3D 场景，通常可以通过在远处的地平线附近创造一些逼真的效果，来增强其真实感。

我们可以采用天空盒、天空柱（Skydome）或天空穹（Skydome）等技术来模拟天空。

天空盒

天空盒（Skybox）是一种在3D图形渲染中用于模拟远处背景的技术。它通过将场景包裹在一个巨大的立方体（或球体）中，并在其内表面贴上纹理来实现。天空盒通常用于表示天空、云、山脉或其他远景背景。

工作原理：

  1. 立方体模型：天空盒通常是一个立方体，摄像机位于其中心。
  2. 纹理贴图：立方体的六个面分别贴上对应的纹理（前、后、左、右、上、下），这些纹理拼接在一起形成完整的背景。
  3. 固定位置：天空盒始终跟随摄像机移动，但不会旋转或缩放，从而给人一种背景无限远的错觉。
  4. 渲染顺序：天空盒通常在渲染场景之前绘制，并禁用深度测试，以确保它始终位于场景的最远处。

优点：

  • 高效：天空盒的实现简单，性能开销低。
  • 真实感：可以通过高质量纹理提供逼真的背景效果。
  • 灵活性：适用于各种场景，如白天、夜晚、宇宙等。

缺点：

  • 分辨率限制：纹理分辨率过低可能导致模糊或失真。
  • 接缝问题：如果纹理拼接不当，可能会在立方体的边缘出现接缝。

天空盒广泛应用于游戏和虚拟现实中，用于增强场景的沉浸感和视觉效果。

对于天空盒，可以有两下两种实现方式：

  1. 采用6张图片，对应立方体的六个面，分别贴上图片，然后渲染。
  2. 采用一张图片，将图片贴在立方体的六个面，然后渲染。

我们先采用第二种方式，实现天空盒。
下面是将6张图片放到一张图片上形成的纹理

其与立方体六个面的关系如下：

实现思路

  1. 创建一个立方体模型，设置其纹理坐标，使其与天空盒纹理对应。
  2. 创建一个纹理对象，将天空盒纹理加载到该对象中。
  3. 在渲染循环中，将纹理对象绑定到着色器，并绘制立方体模型。
  4. 立方体的中心位置始终与摄像机的位置相同。在摄像机移动时，更新立方体的位置，使其始终跟随摄像机。
  5. 渲染时，不要启用深度测试，以确保天空盒始终位于场景的最远处。
  6. 由于摄像机是在内部，而我们定义立方体时，是从外部定义，外部立方体三角形是逆时针，当我们从内部看时，需要将三角形定义为顺时针

4

立方体的坐标
float cubeVertexPositions[108] ={	-1.0f,  1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f, 1.0f,  1.0f, -1.0f, -1.0f,  1.0f, -1.0f,1.0f, -1.0f, -1.0f, 1.0f, -1.0f,  1.0f, 1.0f,  1.0f, -1.0f,1.0f, -1.0f,  1.0f, 1.0f,  1.0f,  1.0f, 1.0f,  1.0f, -1.0f,1.0f, -1.0f,  1.0f, -1.0f, -1.0f,  1.0f, 1.0f,  1.0f,  1.0f,-1.0f, -1.0f,  1.0f, -1.0f,  1.0f,  1.0f, 1.0f,  1.0f,  1.0f,-1.0f, -1.0f,  1.0f, -1.0f, -1.0f, -1.0f, -1.0f,  1.0f,  1.0f,-1.0f, -1.0f, -1.0f, -1.0f,  1.0f, -1.0f, -1.0f,  1.0f,  1.0f,-1.0f, -1.0f,  1.0f,  1.0f, -1.0f,  1.0f,  1.0f, -1.0f, -1.0f,1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f,  1.0f,-1.0f,  1.0f, -1.0f, 1.0f,  1.0f, -1.0f, 1.0f,  1.0f,  1.0f,1.0f,  1.0f,  1.0f, -1.0f,  1.0f,  1.0f, -1.0f,  1.0f, -1.0f};float cubeTextureCoord[72] ={	1.00f, 0.6666666f, 1.00f, 0.3333333f, 0.75f, 0.3333333f,	// back face lower right0.75f, 0.3333333f, 0.75f, 0.6666666f, 1.00f, 0.6666666f,	// back face upper left0.75f, 0.3333333f, 0.50f, 0.3333333f, 0.75f, 0.6666666f,	// right face lower right0.50f, 0.3333333f, 0.50f, 0.6666666f, 0.75f, 0.6666666f,	// right face upper left0.50f, 0.3333333f, 0.25f, 0.3333333f, 0.50f, 0.6666666f,	// front face lower right0.25f, 0.3333333f, 0.25f, 0.6666666f, 0.50f, 0.6666666f,	// front face upper left0.25f, 0.3333333f, 0.00f, 0.3333333f, 0.25f, 0.6666666f,	// left face lower right0.00f, 0.3333333f, 0.00f, 0.6666666f, 0.25f, 0.6666666f,	// left face upper left0.25f, 0.3333333f, 0.50f, 0.3333333f, 0.50f, 0.0000000f,	// bottom face upper right0.50f, 0.0000000f, 0.25f, 0.0000000f, 0.25f, 0.3333333f,	// bottom face lower left0.25f, 1.0000000f, 0.50f, 1.0000000f, 0.50f, 0.6666666f,	// top face upper right0.50f, 0.6666666f, 0.25f, 0.6666666f, 0.25f, 1.0000000f		// top face lower left};
渲染代码（部分） 绘制立方体
void display()
{//...//立方体的位置始终同摄像机位置相同mMat = glm::translate(glm::mat4(1.0f), glm::vec3(cameraX, cameraY, cameraZ))glDisable(GL_DEPTH_TEST); // 关闭深度测试glEnable(GL_CULL_FACE); // 开启面剔除glFrontFace(GL_CCW); // 设置正面为顺时针glDrawArrays(GL_TRIANGLES, 0, 36); // 绘制三角形}

顶点着色器代码

顶点着色器相对简单，只是将顶点位置和纹理坐标传递给片段着色器。

#version 430
// 指定 GLSL 的版本为 4.30layout (location=0) in vec3 position;
layout (location=1) in vec2 texCoord; // 输入变量，表示顶点的颜色，绑定到 location = 1uniform mat4 mv_matrix;
// uniform 变量，表示模型-视图矩阵，用于将顶点从模型空间变换到视图空间uniform mat4 proj_matrix;
// uniform 变量，表示投影矩阵，用于将顶点从视图空间变换到裁剪空间out vec2 tc;
// 输出变量，表示顶点的颜色，绑定到 location = 0
void main(void)
// 主函数，计算顶点的最终位置
{gl_Position = proj_matrix * mv_matrix * vec4(position,1.0);// 将顶点位置从模型空间依次变换到视图空间和裁剪空间// 最终结果存储在内置变量 gl_Position 中，用于后续的光栅化阶段tc = texCoord;}

片段着色器代码

#version 430
// 指定 GLSL 的版本为 4.30in vec2 tc;out vec4 color;
// 输出变量，表示片段的最终颜色uniform mat4 mv_matrix;
// uniform 变量，模型-视图矩阵（未使用）uniform mat4 proj_matrix;
// uniform 变量，投影矩阵（未使用）
layout (binding=0) uniform sampler2D tex0;
//uniform sampler2D tex0;void main(void)
// 主函数，计算片段的最终颜色
{color = texture(tex0, tc);
}

下图上方能看到立方体的接缝

使用 OpenGL 立方体贴图

用 OpenGL 立方体贴图有自己的优点，例如可以减少接缝以及支持环境贴图
OpenGL 纹理立方体贴图类似于稍后将要研究的3D 纹理，它们都使用带有3 个变量的纹理坐标访问——通常标记为**(s, t, r)**，而不是我们目前为止用到的带有两个变量的纹理坐标。OpenGL立方体贴图的另一个特性是，其中的图像以纹理图像的左上角而不是通常的左下角）作为纹理坐标(0, 0, 0)

实现思路

  1. 创建一个立方体模型，无需额外立方体纹理坐标，立方体顶点坐标就是纹理坐标。
  2. 创建一个纹理对象（片段着色器中 samplerCube），将6张天空盒图片加载到该对象中。
  3. 在渲染循环中，将纹理对象绑定到着色器，并绘制立方体模型。
  4. 立方体的中心位置始终与摄像机的位置相同。在摄像机移动时，更新立方体的位置，使其始终跟随摄像机。
  5. 渲染时，不要启用深度测试，以确保天空盒始终位于场景的最远处。
  6. 由于摄像机是在内部，而我们定义立方体时，是从外部定义，外部立方体三角形是逆时针，当我们从内部看时，需要将三角形定义为顺时针

采样器类型

采样器类型维度主要用途特点
sampler2D2D普通2D纹理采样• 用于常规2D纹理映射
• 返回(r,g,b,a)四个分量
• 最常用的纹理采样器类型
samplerCube3D立方体贴图采样• 用于环境映射、天空盒等
• 使用3D向量作为采样坐标
• 六个面的纹理组合成立方体
sampler2DShadow2D阴影贴图采样• 专门用于阴影映射
• 返回单个深度值(0.0到1.0)
• 自动进行深度值比较
• 通常与深度纹理配合使用

代码实现

以下是运行效果

加载6张天空盒图片
GLuint Utils::loadCubeMap(const char* mapDir) {GLuint textureRef;string xp = mapDir; xp = xp + "/xp.jpg";string xn = mapDir; xn = xn + "/xn.jpg";string yp = mapDir; yp = yp + "/yp.jpg";string yn = mapDir; yn = yn + "/yn.jpg";string zp = mapDir; zp = zp + "/zp.jpg";string zn = mapDir; zn = zn + "/zn.jpg";textureRef = SOIL_load_OGL_cubemap(xp.c_str(), xn.c_str(), yp.c_str(), yn.c_str(), zp.c_str(), zn.c_str(),SOIL_LOAD_AUTO, SOIL_CREATE_NEW_ID, SOIL_FLAG_MIPMAPS);if (textureRef == 0) cout << "didnt find cube map image file" << endl;//	glBindTexture(GL_TEXTURE_CUBE_MAP, textureRef);// reduce seams//	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 textureRef;
}
渲染立方体

此部份与之前代码基本相同，只是绑定 GL_TEXTURE_CUBE_MAP

    glActiveTexture(GL_TEXTURE0);                    // 激活纹理单元 glBindTexture(GL_TEXTURE_CUBE_MAP, cubeTexture); // 绑定纹理对象glDisable(GL_DEPTH_TEST);          // 关闭深度测试glEnable(GL_CULL_FACE);            // 开启面剔除glFrontFace(GL_CCW);               // 设置正面为顺时针
顶点着色器

此处采用 mat4(mat3(mv_matrix)) 来将模型-视图矩阵转换为模型-视图矩阵，去除平移部分，这样确保天空盒与摄像机始终处于同一位置


#version 430
// 指定 GLSL 的版本为 4.30
layout (location=0) in vec3 position; // 输入变量，表示顶点的三维位置，绑定到 location = 0out vec3 texCoord; // 输出变量uniform mat4 mv_matrix;
// uniform 变量，表示模型-视图矩阵，用于将顶点从模型空间变换到视图空间
uniform mat4 proj_matrix;
// uniform 变量，表示投影矩阵，用于将顶点从视图空间变换到裁剪空间
void main(void)
// 主函数，计算顶点的最终位置
{mat4 vrot_matrix=mat4(mat3(mv_matrix)); //remove the translation partgl_Position = proj_matrix * vrot_matrix * vec4(position,1.0);// 将顶点位置从模型空间依次变换到视图空间和裁剪空间// 最终结果存储在内置变量 gl_Position 中，用于后续的光栅化阶段texCoord = position;
}
片段着色器

片段着色器中 只是进行纹理采样

#version 430
// 指定 GLSL 的版本为 4.30in vec3 texCoord; // 输入变量，表示顶点对应的纹理坐标
out vec4 fragColor; // 输出变量，表示片元最终的颜色
uniform samplerCube texCube; // 纹理采样器，表示立方体贴图
void main(void)
{fragColor = texture(texCube, texCoord); // 采样立方体贴图，得到片元的颜色
}

环境贴图

环境贴图概述

环境贴图是一种模拟物体表面反射周围环境的渲染技术，主要用于实现镜面反射、金属材质等效果。

工作原理

反射原理

  • 通过采集物体周围环境的图像信息
  • 根据视角和表面法线计算反射向量
  • 使用反射向量从立方体贴图中采样颜色

主要应用场景

  1. 镜面物体

    • 镜子
    • 金属表面
    • 光滑水面

  2. 金属材质

    • 车身漆面
    • 金属器皿
    • 珠宝首饰

优缺点

优点
  • 渲染效率高
  • 可以实现逼真的反射效果
  • 适合实时渲染
缺点
  • 无法实现真实的反射折射
  • 环境贴图分辨率限制细节表现
  • 难以实现动态场景的实时反射

常见变体

  1. 球形环境贴图

    • 使用单张球形投影的图像
    • 实现简单但有畸变

  2. 立方体环境贴图

    • 使用六张图构成立方体
    • 质量更好，无畸变问题

  3. 动态环境贴图

    • 实时渲染场景到环境贴图
    • 可实现动态反射效果

相应实现原理

顶点着色器

#version 430
// 指定 GLSL 的版本为 4.30layout (location=0) in vec3 position;
layout (location=1) in vec2 texCoord; // 输入变量，表示顶点的颜色，绑定到 location = 1
layout (location=2) in vec3 normal; // 输入变量，表示顶点的法线，绑定到 location = 2
// 输入变量，表示顶点的三维位置，绑定到 location = 0uniform mat4 mv_matrix;
// uniform 变量，表示模型-视图矩阵，用于将顶点从模型空间变换到视图空间uniform mat4 proj_matrix;
// uniform 变量，表示投影矩阵，用于将顶点从视图空间变换到裁剪空间uniform mat4 normal_matrix;
out vec2 tc;out vec3 fragNormal;out vec3 vertPos; 
void main(void)
// 主函数，计算顶点的最终位置
{vertPos=(mv_matrix*vec4(position,1.0)).xyz;gl_Position = proj_matrix * mv_matrix * vec4(position,1.0);// 将顶点位置从模型空间依次变换到视图空间和裁剪空间// 最终结果存储在内置变量 gl_Position 中，用于后续的光栅化阶段tc = texCoord;fragNormal = mat3(normal_matrix) * normal;// 将法线从模型空间变换到视图空间}

片段着色器

核心代码为 vec3 R = -reflect(V, N); 其中 reflect 函数的第一个参数为入射向量，第二个参数为法线向量，返回值为反射向量。

#version 430
// 指定 GLSL 的版本为 4.30in vec2 tc;in vec3 fragNormal;
in vec3 vertPos;
out vec4 color;
// 输出变量，表示片段的最终颜色uniform mat4 mv_matrix;
// uniform 变量，模型-视图矩阵（未使用）uniform mat4 proj_matrix;
// uniform 变量，投影矩阵（未使用）
layout (binding=0) uniform samplerCube tex0;void main(void)
// 主函数，计算片段的最终颜色
{vec3 N = normalize(fragNormal);vec3 V = normalize(-vertPos); // 视线方向vec3 R = -reflect(V, N); // 反射方向color = texture(tex0, R);// 采样环境贴图，获取反射颜色//color=vec4(R,1.0); // 仅用于调试，显示反射方向
}

参考

  1. 学习笔记完整代码下载
  2. OpenGL shader开发实战学习笔记：第十一章 立方体贴图和天空盒_opengl 天空盒-CSDN博客

相关文章：

  • 交叉类型的属性合并规则
  • 数组作为指针计算大小时的误区
  • 扩展：React 项目执行 yarn eject 后的 config 目录结构详解
  • Kotlin 内联函数（Inline Functions）：性能优化与实战指南
  • CSS3 遮罩
  • 嵌入式Linux I2C驱动开发详解
  • 架构、构架、结构、框架之间有什么区别？｜系统设计｜系统建模
  • Golang 应用的 CI/CD 与 K8S 自动化部署全流程指南
  • TCPIP详解 卷1协议 九 广播和本地组播（IGMP 和 MLD）
  • geoserver发布arcgis瓦片地图服务（最新版本）
  • cursor 出现 unauthorized request
  • 编译原理AST以Babel为例进行解读、Webpack中自定义loader与plugin
  • 主流编程语言中ORM工具全解析
  • 区块链钱包开发全解析：从架构设计到安全生态构建
  • edge设置位IE模式打开网页
  • BMIDE部署失败 BMIDE Deploy failure
  • uniapp使用npm下载
  • WebRTC:去中心化网络P2P框架解析
  • DICOM 网络服务实现：医学影像传输与管理的技术实践
  • Node和npm初学
  • 长沙潮宗街内“金丝楠木老屋文旅博物馆”起火：明火已扑灭，无伤亡
  • 综艺还有怎样的新可能？挖掘小众文化领域
  • 国际足联女子世界杯再次扩军，2031年起增至48支球队
  • 春秋航空：如果供应链持续改善、油价回落到合理水平，公司补充运力的需求将会增长
  • 比特币价格重返10万美元，哪些因素使然？
  • 异域拾异｜大脚怪的形状：一项神秘社会学研究