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

天空和背景

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

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

天空盒

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

工作原理：

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

优点：

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

缺点：

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

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

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

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

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

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

实现思路

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

立方体的坐标

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

渲染代码（部分） 绘制立方体

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

片段着色器代码

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

采样器类型

代码实现

以下是运行效果

加载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 = 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;
}

片段着色器

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

#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. 动态环境贴图

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

相应实现原理

顶点着色器

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

#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博客