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

龙湾开发2025-05-13 8:45

天空和背景

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

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

天空盒

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

工作原理：

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

优点：

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

缺点：

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

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

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

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

我们先采用第二种方式，实现天空盒。

下面是将6张图片放到一张图片上形成的纹理

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

实现思路

  1. 创建一个立方体模型，设置其纹理坐标，使其与天空盒纹理对应。
  2. 创建一个纹理对象，将天空盒纹理加载到该对象中。
  3. 在渲染循环中，将纹理对象绑定到着色器，并绘制立方体模型。
  4. 立方体的中心位置始终与摄像机的位置相同。在摄像机移动时，更新立方体的位置，使其始终跟随摄像机。
  5. 渲染时，不要启用深度测试，以确保天空盒始终位于场景的最远处。
  6. 由于摄像机是在内部，而我们定义立方体时，是从外部定义，外部立方体三角形是逆时针，当我们从内部看时，需要将三角形定义为顺时针
立方体的坐标
cpp 复制代码 
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 right
		0.75f, 0.3333333f, 0.75f, 0.6666666f, 1.00f, 0.6666666f,	// back face upper left
		0.75f, 0.3333333f, 0.50f, 0.3333333f, 0.75f, 0.6666666f,	// right face lower right
		0.50f, 0.3333333f, 0.50f, 0.6666666f, 0.75f, 0.6666666f,	// right face upper left
		0.50f, 0.3333333f, 0.25f, 0.3333333f, 0.50f, 0.6666666f,	// front face lower right
		0.25f, 0.3333333f, 0.25f, 0.6666666f, 0.50f, 0.6666666f,	// front face upper left
		0.25f, 0.3333333f, 0.00f, 0.3333333f, 0.25f, 0.6666666f,	// left face lower right
		0.00f, 0.3333333f, 0.00f, 0.6666666f, 0.25f, 0.6666666f,	// left face upper left
		0.25f, 0.3333333f, 0.50f, 0.3333333f, 0.50f, 0.0000000f,	// bottom face upper right
		0.50f, 0.0000000f, 0.25f, 0.0000000f, 0.25f, 0.3333333f,	// bottom face lower left
		0.25f, 1.0000000f, 0.50f, 1.0000000f, 0.50f, 0.6666666f,	// top face upper right
		0.50f, 0.6666666f, 0.25f, 0.6666666f, 0.25f, 1.0000000f		// top face lower left
	};
渲染代码（部分） 绘制立方体
cpp 复制代码 
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); // 绘制三角形

}

顶点着色器代码

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

cpp 复制代码 
#version 430
// 指定 GLSL 的版本为 4.30

layout (location=0) in vec3 position;
layout (location=1) in vec2 texCoord; // 输入变量，表示顶点的颜色，绑定到 location = 1



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

片段着色器代码

cpp 复制代码 
#version 430
// 指定 GLSL 的版本为 4.30

in 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. 由于摄像机是在内部，而我们定义立方体时，是从外部定义，外部立方体三角形是逆时针，当我们从内部看时，需要将三角形定义为顺时针

采样器类型

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

代码实现

以下是运行效果

加载6张天空盒图片
cpp 复制代码 
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

cpp 复制代码 
    glActiveTexture(GL_TEXTURE0);                    // 激活纹理单元 
    glBindTexture(GL_TEXTURE_CUBE_MAP, cubeTexture); // 绑定纹理对象

    

    glDisable(GL_DEPTH_TEST);          // 关闭深度测试
    glEnable(GL_CULL_FACE);            // 开启面剔除
    glFrontFace(GL_CCW);               // 设置正面为顺时针
顶点着色器

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

cpp 复制代码 
#version 430
// 指定 GLSL 的版本为 4.30
layout (location=0) in vec3 position; // 输入变量，表示顶点的三维位置，绑定到 location = 0


out 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 part
    gl_Position = proj_matrix * vrot_matrix * vec4(position,1.0);
    // 将顶点位置从模型空间依次变换到视图空间和裁剪空间
    // 最终结果存储在内置变量 gl_Position 中，用于后续的光栅化阶段
    texCoord = position;
}
片段着色器

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

cpp 复制代码 
#version 430
// 指定 GLSL 的版本为 4.30

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

环境贴图

环境贴图概述

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

工作原理

反射原理

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

主要应用场景

  1. 镜面物体

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

  2. 金属材质

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

优缺点

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

常见变体

  1. 球形环境贴图

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

  2. 立方体环境贴图

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

  3. 动态环境贴图

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

相应实现原理

顶点着色器

cpp 复制代码 
#version 430
// 指定 GLSL 的版本为 4.30

layout (location=0) in vec3 position;
layout (location=1) in vec2 texCoord; // 输入变量，表示顶点的颜色，绑定到 location = 1
layout (location=2) in vec3 normal; // 输入变量，表示顶点的法线，绑定到 location = 2
// 输入变量，表示顶点的三维位置，绑定到 location = 0

uniform 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 函数的第一个参数为入射向量，第二个参数为法线向量，返回值为反射向量。

cpp 复制代码 
#version 430
// 指定 GLSL 的版本为 4.30

in 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博客
相关推荐
陌尘(MoCheeen)26 分钟前
技术书籍推荐(002)
java·javascript·c++·python·go
Wooden-Flute34 分钟前
十二、操作符重载
c++
&Cheems43 分钟前
ZYNQ笔记（二十一）： VDMA HDMI 彩条显示
笔记·嵌入式硬件·fpga开发
忧伤火锅麻辣烫1 小时前
Spark，RDD中的转换算子
笔记·微信
Brookty1 小时前
【Java学习】Lambda表达式
java·学习
孤寂大仙v1 小时前
【Linux笔记】——进程信号的保存
java·linux·笔记
Clockwiseee1 小时前
SSTI记录
运维·服务器·redis·学习
Huazzi.1 小时前
使用SSH协议克隆详细步骤
linux·运维·学习·ssh·编程
饕餮争锋1 小时前
feign.RequestInterceptor 简介-笔记
java·开发语言·笔记
huangyuchi.1 小时前
【C++】智能指针
开发语言·jvm·c++·笔记·c++11·智能指针·shared_ptr
热门推荐
01【分布式】Hadoop完全分布式的搭建（零基础）02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07DeepSeek各版本说明与优缺点分析08苍穹外卖面试总结09西电B测-计算机网络综合实验(含验收问题)10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）