Opengl on CGLabhttps://blog.cglab.top/tags/opengl/Recent content in Opengl on CGLabHugozh-cnSat, 21 Mar 2026 14:13:19 +0800【OpenGL】计算着色器入门https://blog.cglab.top/posts/opengl-compute-shader-1/Sat, 21 Mar 2026 14:13:19 +0800https://blog.cglab.top/posts/opengl-compute-shader-1/<h2 id="摘要">摘要</h2> <p>OpenGL4.3 引入了 <strong>计算着色器（Compute Shader）</strong> 这使得我们可以在 GPU 上直接利用 GPU 的并行计算能力来处理非图形任务，标志着 OpenGL正式具备了 GPGPU（通用图形处理器计算）的能力 这篇文章将会以例子的角度来介绍如何使用 Compute Shader</p>摘要

OpenGL4.3 引入了 计算着色器（Compute Shader） 这使得我们可以在 GPU 上直接利用 GPU 的并行计算能力来处理非图形任务，标志着 OpenGL正式具备了 GPGPU（通用图形处理器计算）的能力 这篇文章将会以例子的角度来介绍如何使用 Compute Shader

第一个Compute Shader

在这个例子中，我们将使用 Compute Shader 来将大小为1024的数组中所有的元素乘以2

1. 编写 compute shader

 1#version 460 core
 2
 3// 定义本地工作组大小 (Local Work Group Size)
 4// 这里我们让每个小组处理 64 个元素
 5layout (local_size_x = 64, local_size_y = 1, local_size_z = 1) in;
 6
 7// 定义SSBO
 8layout (std430, binding = 0) buffer DataBuffer {
 9    float data[]; 
10};
11
12void main() {
13    // 获取当前线程在全局任务中的索引
14    uint index = gl_GlobalInvocationID.x;
15
16    // 简单地将数组中的每个值乘以 2
17    data[index] = data[index] * 2.0;
18}

这涉及了非常多的概念，我们先从第二行代码开始：

1layout (local_size_x = 64, local_size_y = 1, local_size_z = 1) in;

先介绍两个概念：

  • 全局工作组(Global Work Groups)：它直接对应了 NVIDA GPU 中的 SM （Streaming Multiprocessor）,一个 SM 中可以有多个 Warp。而 Warp 是什么请看本地工作组，而 SM 是什么呢？我们后续再介绍。
  • 本地工作组(Local Work Groups)：它直接对应了 GPU 中的线程，在 NVIDIA 架构中通常将 32 个线程组成一个线程块称为 Warp ,在同一个 Warp 中，所有的线程会执行相同的指令，这种运行模式叫做 SIMT(Single Instruction, Multiple Threads),例如当执行 加法指令的时候，一个 warp 中的指令解码器会调度该 warp 中的所有线程执行加法指令。

这行代码定义了 本地工作组 的大小，它指定了在一个 SM 中使用多少线程来处理数据，这里将使用 64 个线程也就是 2 个 Warp 来处理一批数据，我们计划使用16个全局工作组，每个全局工作组中使用64个本地工作组进行计算，也就是使用 $16\times64=1024$ 个线程来处理数据, 这样我们每个数据都会被映射到一个线程上去。 而 local_size_x = 64, local_size_y = 1, local_size_z = 1指定了如何映射数据，这是纯软件上的概念，GPU 本身都是一堆并行执行的线程，这样做的好处是方便你处理不同维度的数据，让你省去复杂的下标转换计算。

  • 1D (x=64, y=1, z=1): 适合处理线性数据。比如数组运算、顶点缓冲区修改、简单的粒子列表。
  • 2D (x=16, y=16, z=1): 适合处理平面数据。比如图像处理、高斯模糊、地形高度图。
  • 3D (x=8, y=8, z=4): 适合处理空间数据。比如 3D 纹理、体素（Voxel）计算、流体模拟。 内线程的总数是 $x \times y \times z$ ，这里是 $$64 \times 1 \times 1 = 64$$个线程
1layout (std430, binding = 0) buffer DataBuffer {
2    float data[]; 
3};

这里我们定义了一个 SSBO 用于与 CPU 进行数据交换，这不是 compute shader 中的概念这里不做过多介绍。

1uint index = gl_GlobalInvocationID.x;

这里我们获取线程在整个任务中的唯一绝对的索引，gl_GlobalInvocationID是 opengl4.3 中新增的一个内建变量, 还有其他的内建变量

  • gl_LocalInvocationID : 线程在当前“本地组”内的坐标。(sm中的哪个线程)
  • gl_WorkGroupID:当前“本地组”在“全局范围”内的索引。(哪个sm)
  • gl_WorkGroupSize: 当前“本地组”的大小。(sm中的线程数)
  • gl_GlobalInvocationID:当前线程在“全局范围”内的索引。(全局中的哪个线程) 他们之间有如下关系 $$GlobalID = WorkGroupID \times WorkGroupSize + LocalInvocationID$$
1data[index] = data[index] * 2.0;

这里我们将当前线程中的数据乘以2，因为我们的数据大小为1024，线程数量也是1024，每个线程都会被分配到一个数据，所以一个全局线程id就对应了一个数据，将这个数据乘以2

2. 创建 compute shader

创建一个 compute shader 的方式和创建普通 shader 的方式非常类似，但是不需要将其 link 到渲染管线上的 shader program 中去，将着色器类型改为GL_COMPUTE_SHADER

1GLuint computeShader = glCreateShader(GL_COMPUTE_SHADER);
2glShaderSource(computeShader, 1, &shaderCode, NULL);
3glCompileShader(computeShader);
4
5GLuint computeProgram = glCreateProgram();
6glAttachShader(computeProgram, computeShader);
7glLinkProgram(computeProgram);

3. 创建数据

1float myData[1024];
2for(int i = 0; i < 1024; i++) myData[i] = (float)i;

4. 创建 SSBO

1GLuint ssbo;
2glGenBuffers(1, &ssbo);
3glBindBuffer(GL_SHADER_STORAGE_BUFFER, ssbo);
4// 将数据传给 GPU
5glBufferData(GL_SHADER_STORAGE_BUFFER, sizeof(myData), myData, GL_DYNAMIC_DRAW);
6// 绑定到 binding = 0，与着色器中的声明对应
7glBindBufferBase(GL_SHADER_STORAGE_BUFFER, 0, ssbo);

5. 启动计算

这是最关键的一步，你需要决定全局工作组的数量。我们的本地工作组是一组64个线程，所以我们为了让每个线程只处理一次数据，全局工作组数量应该为 $\frac{1024}{64}=16$

1glUseProgram(computeProgram);
2// 启动 16 个小组，每组 64 个线程，总计 1024 个线程
3glDispatchCompute(16, 1, 1); 
4
5// 强制同步：确保 GPU 计算完成，且结果已写回显存，才允许后续读取
6glMemoryBarrier(GL_SHADER_STORAGE_BARRIER_BIT);

其中glDispatchCompute 是启动计算，参数为全局工作组(sm)的数量，它也有三个维度，他们的关系也是乘法关系总的线程数等于全局工作组不同分量的数量乘以本地工作组不同分量的数量，也是便于程序员使用。 glMemoryBarrier 是一个同步函数，用于等待 GPU 计算完成，并确保结果已写回显存，才允许后续读取。因为 GPU 和 CPU 是异步的，如果你不等待 GPU 计算完把数据写回，CPU就会读取到错误的数据。 glMemoryBarrier 函数的参数是一个位掩码，用于指定等待的资源类型。在这里，我们传入GL_SHADER_STORAGE_BARRIER_BIT，表示等待 SSBO 的数据写入完成。

6. 读取数据

最后我们等待 GPU 计算完成，读取数据就行了

1for (int i = 0; i < N_; i++) {
2        ImGui::Text("%f", myData[i]);
3}
]]>【Rendering】延迟渲染基于OpenGLhttps://blog.cglab.top/posts/rendering-deffered-rendering/Thu, 19 Mar 2026 21:15:53 +0800https://blog.cglab.top/posts/rendering-deffered-rendering/<p><strong>延迟渲染（Deferred Rendering）</strong> 是一种专为高效处理海量光源而设计的渲染技术，旨在解决传统<strong>前向渲染（Forward Rendering）</strong> 在多光源场景下的性能瓶颈。在前向渲染中，每个物体在绘制时都必须遍历场景内的所有光源并逐一计算光照。这意味着，若场景中有 $n$ 个几何片段和 $m$ 个光源，计算复杂度将达到 $O(n \times m)$。当光源数量增加时，渲染开销会呈线性爆发式增长。</p>延迟渲染（Deferred Rendering） 是一种专为高效处理海量光源而设计的渲染技术，旨在解决传统前向渲染（Forward Rendering） 在多光源场景下的性能瓶颈。在前向渲染中，每个物体在绘制时都必须遍历场景内的所有光源并逐一计算光照。这意味着，若场景中有 $n$ 个几何片段和 $m$ 个光源，计算复杂度将达到 $O(n \times m)$。当光源数量增加时，渲染开销会呈线性爆发式增长。

为了打破这种耦合，延迟渲染将渲染流程解构为两个核心阶段：

1. 几何处理阶段（Geometry Pass）

在该阶段，场景仅进行一次常规渲染，但不立即执行复杂的光照计算。取而代之的是，我们将物体的各项几何与材质属性——如 反射率（Albedo、法线（Normal）、金属度（Metalic）、粗糙度（Roughness）、自发光（Emissive）、 环境光遮蔽（AO） 等——提取出来。

这些数据被渲染并存储在一系列高度集成的纹理缓冲区中，即 G-Buffer。由于 G-Buffer 只记录最终通过深度测试、对摄像机可见的片段信息，这为后续阶段剔除无效计算奠定了基础。下图展示了部分G-Buffer

2. 光照处理阶段（Lighting Pass）

在这一阶段，渲染器不再关注场景中有多少个复杂的模型几何体，而是直接遍历 G-Buffer 中的像素。通过读取每个像素点的几何与材质“档案”，结合场景中的光源信息进行统一的着色计算。

此时，计算复杂度由原来的“物体数量 $\times$ 光源数量”优化为屏幕像素数量。这种将几何处理与光照计算分离的设计，使得在场景中实时渲染成百上千个光源成为可能。

下面这幅图片很好地展示了延迟着色法的整个过程：

OpenGL 实现

由于G-Buffer是由多个纹理组成的，所以我们需要使用多渲染目标(Multiple Render Targets)来在一个阶段（Pass）之内渲染多个颜色缓冲

 1void AdvanceLightingState::CreateGBuffer(int width, int height)
 2{
 3    resources_.g_buffer_width = width;
 4    resources_.g_buffer_height = height;
 5
 6    glCreateFramebuffers(1, &resources_.g_buffer_fbo);
 7
 8    glCreateTextures(GL_TEXTURE_2D, 1, &resources_.g_position_texture);
 9    glTextureStorage2D(resources_.g_position_texture, 1, GL_RGBA16F, width, height);
10    glTextureParameteri(resources_.g_position_texture, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
11    glTextureParameteri(resources_.g_position_texture, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
12    glTextureParameteri(resources_.g_position_texture, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
13    glTextureParameteri(resources_.g_position_texture, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
14    glNamedFramebufferTexture(
15        resources_.g_buffer_fbo, GL_COLOR_ATTACHMENT0, resources_.g_position_texture, 0);// 将g_position_texture绑定到g_buffer_fbo的GL_COLOR_ATTACHMENT0纹理槽
16
17    glCreateTextures(GL_TEXTURE_2D, 1, &resources_.g_normal_texture);
18    glTextureStorage2D(resources_.g_normal_texture, 1, GL_RGBA16F, width, height);
19    glTextureParameteri(resources_.g_normal_texture, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
20    glTextureParameteri(resources_.g_normal_texture, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
21    glTextureParameteri(resources_.g_normal_texture, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
22    glTextureParameteri(resources_.g_normal_texture, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
23    glNamedFramebufferTexture(
24        resources_.g_buffer_fbo, GL_COLOR_ATTACHMENT1, resources_.g_normal_texture, 0); // 将法向量纹理绑定到g_buffer_fbo的COLOR_ATTACHMENT1纹理槽
25
26    glCreateTextures(GL_TEXTURE_2D, 1, &resources_.g_albedo_spec_texture);
27    glTextureStorage2D(resources_.g_albedo_spec_texture, 1, GL_RGBA8, width, height);
28    glTextureParameteri(resources_.g_albedo_spec_texture, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
29    glTextureParameteri(resources_.g_albedo_spec_texture, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
30    glTextureParameteri(resources_.g_albedo_spec_texture, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
31    glTextureParameteri(resources_.g_albedo_spec_texture, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
32    glNamedFramebufferTexture(
33        resources_.g_buffer_fbo, GL_COLOR_ATTACHMENT2, resources_.g_albedo_spec_texture, 0); // 将反射率和高光纹理绑定到g_buffer_fbo的GL_COLOR_ATTACHMENT2纹理槽
34
35    glCreateRenderbuffers(1, &resources_.g_depth_rbo);
36    glNamedRenderbufferStorage(resources_.g_depth_rbo, GL_DEPTH_COMPONENT24, width, height);
37    glNamedFramebufferRenderbuffer(
38        resources_.g_buffer_fbo, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, resources_.g_depth_rbo);
39
40    GLenum attachments[3] = {GL_COLOR_ATTACHMENT0, GL_COLOR_ATTACHMENT1, GL_COLOR_ATTACHMENT2};
41    glNamedFramebufferDrawBuffers(resources_.g_buffer_fbo, 3, attachments); //out 0 = GL_COLOR_ATTACHMENT0 , out  1 = GL_COLOR_ATTACHMENT1, out  2 = GL_COLOR_ATTACHMENT2
42}

在 Fragment Shader 中，我们需要将不同的数据输出到对应的 layout(location = n) 中。

 1#version 460 core
 2
 3layout(location = 0) in vec3 a_Position;
 4layout(location = 1) in vec3 a_Normal;
 5layout(location = 2) in vec2 a_TexCoord;
 6
 7uniform mat4 u_model;
 8uniform mat4 u_view;
 9uniform mat4 u_projection;
10
11out vec3 v_FragPos;
12out vec3 v_Normal;
13out vec2 v_TexCoord;
14
15void main()
16{
17    vec4 world_pos = u_model * vec4(a_Position, 1.0);
18    v_FragPos = world_pos.xyz;
19    v_Normal = mat3(transpose(inverse(u_model))) * a_Normal;
20    v_TexCoord = a_TexCoord;
21
22    gl_Position = u_projection * u_view * world_pos;
23}

 1#version 460 core
 2
 3in vec3 v_FragPos;
 4in vec3 v_Normal;
 5in vec2 v_TexCoord;
 6
 7layout(location = 0) out vec4 g_Position; // 输出到0号纹理槽
 8layout(location = 1) out vec4 g_Normal; //  输出到1号纹理槽
 9layout(location = 2) out vec4 g_AlbedoSpec; //  输出到2号纹理槽
10
11uniform sampler2D u_AlbedoTexture;
12
13void main()
14{
15    g_Position = vec4(v_FragPos, 1.0);
16    g_Normal = vec4(normalize(v_Normal) * 0.5 + 0.5, 1.0);
17    g_AlbedoSpec.rgb = texture(u_AlbedoTexture, v_TexCoord).rgb;
18    g_AlbedoSpec.a = 1.0;
19}

G-Buffer Pass 就结束了接下来是光照处理 Pass 在光照阶段，我们渲染一个全屏四边形（Screen-filling Quad），并从 G-Buffer 纹理中重构光照所需的所有变量。

1glBindTextureUnit(0, resources_.g_position_texture);
2glUniform1i(resources_.lighting_shader->Uniform("u_GPosition"), 0);
3glBindTextureUnit(1, resources_.g_normal_texture);
4glUniform1i(resources_.lighting_shader->Uniform("u_GNormal"), 1);
5glBindTextureUnit(2, resources_.g_albedo_spec_texture);
6glUniform1i(resources_.lighting_shader->Uniform("u_GAlbedoSpec"), 2);
7glBindTextureUnit(3, resources_.depth_map_texture);
8glUniform1i(resources_.lighting_shader->Uniform("u_ShadowMap"), 3);

使用G-Buffer中的数据来获取光照所需的信息

 1uniform sampler2D u_GPosition;
 2uniform sampler2D u_GNormal;
 3uniform sampler2D u_GAlbedoSpec;
 4uniform sampler2D u_ShadowMap;
 5...
 6vec3 frag_pos = texture(u_GPosition, v_TexCoord).xyz;
 7vec4 albedo_spec = texture(u_GAlbedoSpec, v_TexCoord);
 8if (albedo_spec.a <= 0.001) {
 9    FragColor = vec4(0.0, 0.0, 0.0, 1.0);
10    BrightColor = vec4(0.0, 0.0, 0.0, 1.0);
11    return;
12}
13vec3 normal = normalize(texture(u_GNormal, v_TexCoord).xyz * 2.0 - 1.0);
14vec3 albedo = albedo_spec.rgb;
15float specular_mask = albedo_spec.a;
16vec3 view_dir = normalize(u_ViewPos - frag_pos);

总结

延迟渲染是现代游戏引擎的基石。但它对处理半透明物体不太友好需要结合前向渲染实现混合渲染，但其在处理复杂动态光照场景时的性能优势是无可替代的。

]]>【CG】HDR & Tone Mappinghttps://blog.cglab.top/posts/cg-hdr-tone-mapping/Tue, 17 Mar 2026 00:00:00 +0000https://blog.cglab.top/posts/cg-hdr-tone-mapping/<h1 id="hdr">HDR</h1> <p>传统的显示设备使用的是 LDR 模式，即线性 Device-Independent-RGB 模式，它通常使用 8 位来代表一个每个颜色通道的值。 但是在 LDR 模式下所有的颜色都被限制到了 0 到 1 之间，这导致如果场景中存在一个颜色值超过 1 的物体，那么这个物体的颜色就会变成纯白。 HDR 模式则允许颜色的值超过 1，因此 HDR 模式下可以处理更丰富的场景。 如下图所示，LDR 模式下物体的纹理细节根本看不见</p>HDR

传统的显示设备使用的是 LDR 模式，即线性 Device-Independent-RGB 模式，它通常使用 8 位来代表一个每个颜色通道的值。 但是在 LDR 模式下所有的颜色都被限制到了 0 到 1 之间，这导致如果场景中存在一个颜色值超过 1 的物体，那么这个物体的颜色就会变成纯白。 HDR 模式则允许颜色的值超过 1，因此 HDR 模式下可以处理更丰富的场景。 如下图所示，LDR 模式下物体的纹理细节根本看不见

图1

在 OpenGL 中默认的帧缓冲是使用的是 GL_RGBA8 即8 位的 RGBA 模式，因此在片段着色器运行之后无论你的颜色值是否超过了1，颜色都被限制在了 0 到 1 之间。 因此，HDR 模式下需要使用 GL_RGBA16F 即 16 位的 RGBA 模式，这样颜色值就可以超过 1 了。

1glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB16F, width, height, 0, GL_RGB, GL_FLOAT, NULL);

虽然这么设置之后确实能够输出颜色值在 1 以上的颜色，但是在操作系统和显示设备之间进行颜色转换的时候，这些颜色值最终还是会被限制在了 0 到 1 之间，因此我们需要通过 Tone Mapping 来解决这个问题。

Tone Mapping

Tone Mapping 是一种将 HDR 颜色值映射到 LDR 颜色值的方法。

Reinhard tone mapping

最基础的 Reinhard 公式非常简洁：

$$L_{out} = \frac{L_{in}}{1 + L_{in}}$$
  • $ L_{in} $ 表示输入的 HDR 颜色值
  • $ L_{out} $ 输出的 LDR 颜色值
  • 当 $L_{in}$ 很小的时候，$L_{out} \approx L_{in}$ 保持暗部细节
  • 当 $L_{in} \to \infty$ 时，$L_{out} \to 1$ 高光永远不会超过最大亮度

这个算法是倾向明亮的区域的，暗的区域会不那么精细也不那么有区分度

图2

Exposure tone mapping

Exposure tone mapping 模仿的是真实摄像机的工作原理

$$L_{out} = 1 - \exp(-exposure * L_{in})$$
  • $ L_{in} $ 表示输入的 HDR 颜色值
  • $ L_{out} $ 输出的 LDR 颜色值
  • $exposure$ 表示曝光度

图3

他们的glsl实现如下：

 1
 2 vec4 final_color = vec4(ambient + (1.0 - shadow) * (diffuse + specular), 1.0);
 3
 4    // HDR Tone Mapping
 5    if (u_EnableHDR == 1) {
 6        vec3 hdr_color = final_color.rgb;
 7        if (u_ToneMappingMode == 0) {
 8            // Reinhard tone mapping
 9            final_color.rgb = hdr_color / (hdr_color + vec3(1.0));
10        } else {
11            // Exposure tone mapping
12            final_color.rgb = vec3(1.0) - exp(-hdr_color * u_Exposure);
13        }
14    }
]]>【CG】Shadow Mapping 使用OpenGL实现https://blog.cglab.top/posts/opengl-shadow-mapping-1/Mon, 16 Mar 2026 00:00:00 +0000https://blog.cglab.top/posts/opengl-shadow-mapping-1/<p>如果你玩过现代 3D 游戏那么其中大多数的的动态物体阴影都是 **阴影映射（Shadow Mapping）**这个算法的变种。</p> <p>所以为了研究其他的现代的实时动态阴影我们必须先学习一下 Shadow Mapping 的原理，以及如何使用OpenGL去实现。</p>如果你玩过现代 3D 游戏那么其中大多数的的动态物体阴影都是 **阴影映射（Shadow Mapping）**这个算法的变种。

所以为了研究其他的现代的实时动态阴影我们必须先学习一下 Shadow Mapping 的原理，以及如何使用OpenGL去实现。

原理

他的思想原理非常简单，如果一个点能被光源看到（直射）并且也能被摄像机看到，那么这个点就在光照下（不在阴影中），反之如果一个点只能被摄像机看到，而不能被光源看到，那么他就在阴影中。

详细的实现是：

  • 对于 平行光（Directional Light）：由于平行光的位置我们假设是无限远的，但是我们需要从光源位置看向场景 $(0,0,0)$ 点，所以我们为了简便直接假设光源位置在 从 $(0,0,0)$ 点沿着光照方向的反方向位移一段距离得到一个新的点 $\mathbf P$ ，以这个 $\mathbf P$ 点作为我们的光源位置（事实上这个方案非常不严谨，因为如果位移的距离不够，但是摄像机的视锥体包含了更多的场景，就会导致某些场景区域计算不到阴影位置。一般可以根据视锥体动态计算，并且光源的 LookAt 目标通常应该是 “视锥体中心” ）。
    • Pass one：有了 $\mathbf P$点，我们从该点使用正交投影并定义 lookAt，走一遍渲染管线，不需要计算着色，将深度信息保存到TexImage2D上
    • Pass two：再从摄像机走一遍正常的管线，在 Fragment Shader中结合保存的深度信息实现该点是否在阴影中的逻辑。
  • 对于 聚光灯（Spot Light）:因为聚光灯都有一个明确的方向、张角和位置，所以我们不需要做那么多假设在平行光中的问题在这里都没有。
    • Pass one：我们只需要在聚光灯的位置看向它的照射方向，并且使用透视投影FOV应该与聚光灯的参数一致，并定义lookAt，走一遍渲染管线，不需要计算着色，将深度信息保存到TexImage2D上
    • Pass two：再从摄像机走一遍正常的管线，在 Fragment Shader中结合保存的深度信息实现该点是否在阴影中的逻辑就行了。
  • 对于 点光源（Point Light）：点光源，有具体的位置，但是点光源四面八方都有光照，所以我们需要特殊处理。
    • Pass one：我们通过在点光源的位置向上下左右前后六个方向都计算一次深度信息，存入一张 Cube Map
    • Pass two：再从摄像机走一遍正常的管线，在 Fragment Shader中结合保存的Cube Map实现该点是否在阴影中的逻辑就行了。

实现

这里只实现平行光的Shadow Mapping。

首先我们定义 Pass one 中要使用的 FBO 和 TexImage2D，和Shader

1std::unique_ptr<gl::Shader> depth_shader_;
2GLuint depth_map_fbo_ = 0;
3GLuint depth_map_texture_ = 0;
4
5// TexImage2D的大小
6const unsigned int shadow_width_ = 1'024;
7const unsigned int shadow_height_ = 1'024;

并且初始化

 1depth_shader_ = std::make_unique<gl::Shader>();
 2depth_shader_->CompileFromFile("shaders/AdvanceLighting/shadow_mapping.vert",
 3                                   "shaders/AdvanceLighting/shadow_mapping.frag");
 4
 5// Depth map texture for shadow mapping
 6glCreateTextures(GL_TEXTURE_2D, 1, &depth_map_texture_);
 7glTextureStorage2D(depth_map_texture_, 1, GL_DEPTH_COMPONENT24, shadow_width_, shadow_height_);
 8glTextureParameteri(depth_map_texture_, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
 9glTextureParameteri(depth_map_texture_, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
10glTextureParameteri(depth_map_texture_, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER);
11glTextureParameteri(depth_map_texture_, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
12float border_color[] = {1.0f, 1.0f, 1.0f, 1.0f};
13glTextureParameterfv(depth_map_texture_, GL_TEXTURE_BORDER_COLOR, border_color);
14
15    // Depth map framebuffer
16glCreateFramebuffers(1, &depth_map_fbo_);
17glNamedFramebufferTexture(depth_map_fbo_, GL_DEPTH_ATTACHMENT, depth_map_texture_, 0);
18glNamedFramebufferDrawBuffer(depth_map_fbo_, GL_NONE);
19glNamedFramebufferReadBuffer(depth_map_fbo_, GL_NONE);

再写一个Pass one使用的Shader

 1// vertex shader
 2#version 460 core
 3
 4layout(location = 0) in vec3 a_Position;
 5
 6uniform mat4 u_model;
 7uniform mat4 u_LightSpaceMatrix;
 8
 9
10void main()
11{
12    gl_Position = u_LightSpaceMatrix * u_model * vec4(a_Position, 1.0);
13}
14
15// fragment shader
16#version 460 core
17void main()
18{
19    
20}

再执行pass one

 1// ====== Pass 1: Render depth map from light's perspective ======
 2glEnable(GL_DEPTH_TEST);
 3glViewport(0, 0, shadow_width_, shadow_height_);
 4glBindFramebuffer(GL_FRAMEBUFFER, depth_map_fbo_);
 5glClear(GL_DEPTH_BUFFER_BIT);
 6
 7depth_shader_->Bind();
 8glUniformMatrix4fv(depth_shader_->Uniform("u_LightSpaceMatrix"),
 9                       1,
10                       GL_FALSE,
11                       glm::value_ptr(light_space_matrix));
12RenderScene(*depth_shader_);
13depth_shader_->Unbind();

最后将depth_map_texture_和u_LightSpaceMatrix传入shader以实现“该点是否在阴影中的逻辑”

 1// ====== Pass 2: Render scene with shadow mapping ======
 2// Restore app's FBO and viewport
 3glBindFramebuffer(GL_FRAMEBUFFER, prev_fbo);
 4glViewport(prev_viewport[0], prev_viewport[1], prev_viewport[2], prev_viewport[3]);
 5glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 6
 7if (selected_gamma_correction_ == 1) {
 8    glEnable(GL_FRAMEBUFFER_SRGB);
 9} else {
10    glDisable(GL_FRAMEBUFFER_SRGB);
11}
12
13glm::mat4 view = camera_3d_->GetViewMatrix();
14glm::mat4 projection = camera_3d_->GetProjectionMatrix();
15
16shader_->Bind();
17glUniformMatrix4fv(shader_->Uniform("u_view"), 1, GL_FALSE, glm::value_ptr(view));
18glUniformMatrix4fv(shader_->Uniform("u_projection"), 1, GL_FALSE, glm::value_ptr(projection));
19glUniformMatrix4fv(
20shader_->Uniform("u_LightSpaceMatrix"), 1, GL_FALSE, glm::value_ptr(light_space_matrix));
21
22glUniform3fv(shader_->Uniform("u_LightPos"), 1, glm::value_ptr(light_pos_));
23glUniform3fv(shader_->Uniform("u_ViewPos"), 1, glm::value_ptr(camera_pos_));
24glUniform3fv(shader_->Uniform("u_LightColor"), 1, glm::value_ptr(light_color_));
25glUniform1f(shader_->Uniform("u_Shininess"), shininess_);
26glUniform1f(shader_->Uniform("u_AmbientStrength"), ambient_strength_);
27glUniform1f(shader_->Uniform("u_SpecularStrength"), specular_strength_);
28glUniform1i(shader_->Uniform("u_BlinnPhong"), use_blinn_phong_ ? 1 : 0);
29glUniform1i(shader_->Uniform("u_UseGammaCorrection"), selected_gamma_correction_ == 2 ? 1 : 0);
30glUniform1i(shader_->Uniform("u_EnableShadows"), enable_shadows_ ? 1 : 0);
31
32glBindTextureUnit(0, floor_texture_);
33glUniform1i(shader_->Uniform("u_FloorTexture"), 0);
34
35glBindTextureUnit(1, depth_map_texture_);
36glUniform1i(shader_->Uniform("u_ShadowMap"), 1);
37
38RenderScene(*shader_);
39shader_->Unbind();

更新Pass two 的Shader

 1#version 460 core
 2
 3layout(location = 0) in vec3 a_Position;
 4layout(location = 1) in vec3 a_Normal;
 5layout(location = 2) in vec2 a_TexCoord;
 6
 7uniform mat4 u_model;
 8uniform mat4 u_view;
 9uniform mat4 u_projection;
10uniform mat4 u_LightSpaceMatrix;
11
12out vec3 v_FragPos;
13out vec3 v_Normal;
14out vec2 v_TexCoord;
15out vec4 v_FragPosLightSpace;
16
17void main()
18{
19    vec4 world_pos = u_model * vec4(a_Position, 1.0);
20    v_FragPos = world_pos.xyz;
21    v_Normal = mat3(transpose(inverse(u_model))) * a_Normal;
22    v_TexCoord = a_TexCoord;
23
24    // 将世界坐标系下的位置转换到光源空间
25    v_FragPosLightSpace = u_LightSpaceMatrix * world_pos;
26
27    gl_Position = u_projection * u_view * world_pos;
28}

 1#version 460 core
 2
 3in vec3 v_FragPos;
 4in vec3 v_Normal;
 5in vec2 v_TexCoord;
 6in vec4 v_FragPosLightSpace;
 7
 8out vec4 FragColor;
 9
10uniform sampler2D u_FloorTexture;
11uniform sampler2D u_ShadowMap;
12uniform vec3 u_LightPos;
13uniform vec3 u_ViewPos;
14uniform vec3 u_LightColor;
15uniform float u_Shininess;
16uniform float u_AmbientStrength;
17uniform float u_SpecularStrength;
18uniform int u_BlinnPhong; // 0 = Phong, 1 = Blinn-Phong
19uniform int u_UseGammaCorrection;
20uniform int u_EnableShadows;
21
22float ShadowCalculation(vec4 fragPosLightSpace)
23{
24    // 将片段位置从齐次裁剪空间转换到纹理坐标空间
25    vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w;
26
27    // 将范围从 [-1, 1] 转换到 [0, 1]
28    projCoords = projCoords * 0.5 + 0.5;
29
30    // 处理光锥体外的区域
31    if (projCoords.z > 1.0)
32        return 0.0;
33
34    // 获取阴影贴图中存储的最近深度
35    float closestDepth = texture(u_ShadowMap, projCoords.xy).r; 
36
37    // 获取当前像素的深度
38    float currentDepth = projCoords.z;
39
40    // 如果当前深度大于贴图中的最近深度，则该点在阴影中 (1.0)，否则在光照下 (0.0)
41    float shadow = currentDepth > closestDepth ? 1.0 : 0.0;
42
43    return shadow;
44}
45
46void main()
47{
48    vec3 color = texture(u_FloorTexture, v_TexCoord).rgb;
49    vec3 normal = normalize(v_Normal);
50    vec3 light_dir = normalize(u_LightPos - v_FragPos);
51    vec3 view_dir = normalize(u_ViewPos - v_FragPos);
52
53    // ambient
54    vec3 ambient = u_AmbientStrength * color;
55
56    // diffuse
57    float diff = max(dot(normal, light_dir), 0.0);
58    vec3 diffuse = diff * u_LightColor * color;
59
60    // specular
61    float spec = 0.0;
62    if (u_BlinnPhong == 1) {
63        // Blinn-Phong: use halfway vector
64        vec3 halfway_dir = normalize(light_dir + view_dir);
65        spec = pow(max(dot(normal, halfway_dir), 0.0), u_Shininess);
66    } else {
67        // Phong: use reflect direction
68        vec3 reflect_dir = reflect(-light_dir, normal);
69        spec = pow(max(dot(view_dir, reflect_dir), 0.0), u_Shininess);
70    }
71    vec3 specular = u_SpecularStrength * spec * u_LightColor;
72
73    // shadow
74    float shadow = 0.0;
75    if (u_EnableShadows == 1) {
76        shadow = ShadowCalculation(v_FragPosLightSpace);
77    }
78
79    vec4 final_color = vec4(ambient + (1.0 - shadow) * (diffuse + specular), 1.0);
80    if (u_UseGammaCorrection == 1) {
81        final_color.rgb = pow(final_color.rgb, vec3(1.0 / 2.2));
82    }
83    FragColor = final_color;
84}

阴影失真

运行后你会发现阴影有是有了但是出现了好多类似摩尔纹的条纹, 如图1

图1

这是一种叫做阴影失真的现象，这是由于 Shadow Mapping 的分辨率不足导致的，导致过远的片段使用同一个 Shadow Mapping 的深度值进行计算，如图2所示，片段2的深度大于Shadow mapping的深度所以是黑色，片段1和片段2采样同一个Shadow Mapping

图2

阴影偏移

为了解决这个问题，我们使用阴影偏移来解决这个问题。我们简单的对表面深度贴图应用一个偏移量，这样片段就不会被错误地认为在表面之下了。

图3

1    float bias =  max(0.05 * (1.0 - dot(normalize(v_Normal), normalize(u_LightPos - v_FragPos))), 0.005);
2    float shadow = currentDepth - bias > closestDepth ? 1.0 : 0.0;

图4

此时阴影失真现象消失了

PCF

我们离近阴影看可以看到很多锯齿，这是由于我们的Shadow Mapping 的分辨率不够，多个片段被同一个Shadow Mapping 的深度值进行计算，导致片段之间的深度值差异较大，导致锯齿。所以我们可以使用一种名为 PCF 的滤波算法来解决这个问题。 图5

PCF 的原理是，将阴影贴图进行区域采样，对每个采样点进行 shadow test, 并将 shadow test 的结果进行加权平均，最后的到shadow值。
这里我们使用一个 3x3 的区域采样，对每个采样点进行 shadow test, 并加权平均，最终得到 shadow 值。

 1    float shadow = 0.0;
 2    vec2 texelSize = 1.0 / textureSize(u_ShadowMap, 0);
 3    for(int x = -1; x <= 1; ++x)
 4    {
 5        for(int y = -1; y <= 1; ++y)
 6        {
 7            float pcfDepth = texture(u_ShadowMap, projCoords.xy + vec2(x, y) * texelSize).r; 
 8            shadow += currentDepth - bias > pcfDepth ? 1.0 : 0.0;        
 9        }    
10    }
11    shadow /= 9.0;

这里 textureSize 返回的是 shadow map 的宽度和高度，我们用 1 去除以它就可以得到每个 texel 的偏移值了。 最后的 shader 代码如下：

 1float ShadowCalculation(vec4 fragPosLightSpace)
 2{
 3    // 将片段位置从齐次裁剪空间转换到纹理坐标空间
 4    vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w;
 5
 6    // 将范围从 [-1, 1] 转换到 [0, 1]
 7    projCoords = projCoords * 0.5 + 0.5;
 8
 9    // 处理光锥体外的区域
10    if (projCoords.z > 1.0)
11        return 0.0;
12
13    // 获取阴影贴图中存储的最近深度
14    float closestDepth = texture(u_ShadowMap, projCoords.xy).r; 
15
16    // 获取当前像素的深度
17    float currentDepth = projCoords.z;
18
19    // 计算阴影偏移，防止阴影 acne
20    float bias =  max(0.05 * (1.0 - dot(normalize(v_Normal), normalize(u_LightPos - v_FragPos))), 0.005);
21
22    float shadow = 0.0;
23    vec2 texelSize = 1.0 / textureSize(u_ShadowMap, 0);
24    for(int x = -u_PCFregionSize/2; x <= u_PCFregionSize/2; ++x)
25    {
26        for(int y = -u_PCFregionSize/2; y <= u_PCFregionSize/2; ++y)
27        {
28            float pcfDepth = texture(u_ShadowMap, projCoords.xy + vec2(x, y) * texelSize).r; 
29            // shadow test
30            shadow += currentDepth - bias > pcfDepth ? 1.0 : 0.0;        
31        }    
32    }
33    shadow /= u_PCFregionSize * u_PCFregionSize; // 平均阴影值
34
35    return shadow;
36}

运行后，阴影不再有锯齿，并且阴影更平滑。

]]>【OpenGL】使用曲面细分着色器绘制Bezier曲线https://blog.cglab.top/posts/opengl-tessellation-beziercurve/Sun, 15 Mar 2026 22:44:41 +0800https://blog.cglab.top/posts/opengl-tessellation-beziercurve/<h1 id="opengl使用曲面细分着色器绘制bezier曲线">【OpenGL】使用曲面细分着色器绘制Bezier曲线</h1> <p>这篇文章将直接介绍<strong>使用曲面细分着色器绘制Bezier曲线，而不会介绍Bezier曲线</strong>，但是会介绍 OpenGL 的曲面细分着色器的简单用法以及相关内容。</p> <h2 id="介绍">介绍</h2> <p><strong>曲面细分着色器（Tessellation Shaders）</strong> 是在 OpenGL4.0 版本引入的。在这之前，有一些私有扩展可以使用，但是直到 4.0 曲面细分才正式成为 OpenGL 的一部分。</p>【OpenGL】使用曲面细分着色器绘制Bezier曲线

这篇文章将直接介绍使用曲面细分着色器绘制Bezier曲线，而不会介绍Bezier曲线，但是会介绍 OpenGL 的曲面细分着色器的简单用法以及相关内容。

介绍

曲面细分着色器（Tessellation Shaders） 是在 OpenGL4.0 版本引入的。在这之前，有一些私有扩展可以使用，但是直到 4.0 曲面细分才正式成为 OpenGL 的一部分。

在没有曲面细分之前，想在 OpenGL 里画 Bezier 曲线和曲面需要在 CPU 将所有的点计算出来再通过总线（带宽相对于现代GPU极小的 PCIE 接口）上传至 GPU ，而从 CPU 到 GPU 的数据交换及其耗时，所以曲面细分着色器的作用就是将细分任务直接交给 GPU 不仅减少了大量数据的传递也大大加快了计算速度。

除了绘制 Bezier 曲线和曲面，曲面细分着色器还能实现 位移贴图（Displacement Mapping） 和 动态细节级别（Dynamic LOD） 。

  • 位移贴图

    传统的发现贴图是只是通过关照来欺骗眼睛（实际上还是一个平面），而曲面细分可以让一个三角形面内部的顶点沿着你想要的法线方向位移到你想要的位置从而实现真的轮廓。

  • 动态LOD

    可以根据相机到物理的距离动态调整物体的三角形面，从而大幅提升性能。

这时有人可能就要问了：“主播主播，曲面细分着色器这么厉害，但是我记得 几何着色器（Geometry Shader） 和 计算着色器（Compute Shader 也能干相关的任务，为什么不直接使用几何着色器和计算着色器，非要整出个曲面细分着色器呢“？？

  • 不使用 Geometry Shader 是因为它在执行细分任务的时候太慢了，GS 必须等到顶点着色器（Vertex Shader）把整个 图元（Primitive） 处理完成后了才能开始工作，而 TS 可以直接并行处理多个顶点，并且 TS 还有专门的硬件处理。
  • 不使用 Compute Shader 是因它也太慢了，CS 是脱渲染离管线的，而 TS 是渲染管线的一部分，你需要将数据传入 CS 计算再将 CS 写入缓冲区，并且还需要使用 CPU 进行同步，并且 TS 还有专门的硬件处理。

上面提到了 TS 是渲染管线中的一部分，显然它是可编程的，并且位于 VS 的下一步，GS 的上一步。

具体来分是：

Vertex Shader -> Tessellation Control Shader -> Tessellation Engine -> Tessellation Evaluation Shader -> Geometry Shader -> …

可以看到 TS 不止一个，这就是为什么 曲面细分着色器 的英文是复数形式。

其中：

  • Tessellation Control Shader 决定了”细分多少份“

    输出 Tessellation Levels（细分因子）。它告诉下一步：边缘要切几段，内部要切几份。

  • Tessellation Engine 根据TCS的定义执行切割操作生成新的顶点（固定的不可编程）

  • Tessellation Evaluation Shader 根据 TE 生成出来的点计算出该点的位置

    输入 TE 生成的参数化坐标，结合 TCS 传来的原始顶点，通过插值算法确定新顶点的真实世界位置。

开始绘制Bezier曲线

理解了曲面细分在渲染管线中的位置之后，我们就可以开始真正绘制一条 Bezier 曲线了。

整体流程其实很简单：

  1. 在 CPU 端提供 Bezier 曲线的控制点
  2. 让 GPU 通过 Tessellation Shader 对参数空间进行细分
  3. 在 TES 中根据 Bezier 公式计算曲线上的真实点

换句话说：

CPU 只负责提供控制点，GPU 负责计算整条曲线。

这也是 Tessellation Shader 最大的价值： 避免 CPU 预计算大量顶点并传输到 GPU。

创建 Shader 程序

和普通的 OpenGL 程序一样，我们需要创建并编译 Shader，只不过这里多了两个阶段：

  • Tessellation Control Shader (TCS)
  • Tessellation Evaluation Shader (TES)

因此完整的程序包含四个阶段：

  • Vertex Shader
  • Tessellation Control Shader
  • Tessellation Evaluation Shader
  • Fragment Shader

代码如下：

 1bool Shader::Compile(const char* vert_src, const char* tcs_src, const char* tes_src, const char* frag_src)
 2{
 3    GLuint vs = CompileStage(GL_VERTEX_SHADER, vert_src);
 4    GLuint tc = CompileStage(GL_TESS_CONTROL_SHADER, tcs_src);
 5    GLuint te = CompileStage(GL_TESS_EVALUATION_SHADER, tes_src);
 6    GLuint fs = CompileStage(GL_FRAGMENT_SHADER, frag_src);
 7    if (!vs || !tc || !te || !fs) {
 8        glDeleteShader(vs);
 9        glDeleteShader(tc);
10        glDeleteShader(te);
11        glDeleteShader(fs);
12        return false;
13    }
14
15    id_ = glCreateProgram();
16    glAttachShader(id_, vs);
17    glAttachShader(id_, tc);
18    glAttachShader(id_, te);
19    glAttachShader(id_, fs);
20    glLinkProgram(id_);
21    glDeleteShader(vs);
22    glDeleteShader(tc);
23    glDeleteShader(te);
24    glDeleteShader(fs);
25
26    GLint ok;
27    glGetProgramiv(id_, GL_LINK_STATUS, &ok);
28    if (!ok) {
29        char log[512];
30        glGetProgramInfoLog(id_, sizeof(log), nullptr, log);
31        glDeleteProgram(id_);
32        id_ = 0;
33        return false;
34    }
35    return true;
36}
37
38GLuint Shader::CompileStage(GLenum type, const char* src)
39{
40    GLuint s = glCreateShader(type);
41    glShaderSource(s, 1, &src, nullptr);
42    glCompileShader(s);
43    GLint ok;
44    glGetShaderiv(s, GL_COMPILE_STATUS, &ok);
45    if (!ok) {
46        char log[512];
47        glGetShaderInfoLog(s, sizeof(log), nullptr, log);
48        glDeleteShader(s);
49        return 0;
50    }
51    return s;
52}

接下来和原来的一样，定义4个控制点，创建vbo，vao。唯一不同的点就是在渲染循环中我们需要使用

1glPatchParameteri(GL_PATCH_VERTICES, 4);

来设置图形中最小单元的顶点数。也就是 Primitive

常规的Primitive有：

  • 点 1个顶点
  • 线 2个顶点
  • 三角形 3个顶点
  • 矩形4个顶点

而这里使用的是对Primitive的更抽象的形式是 GL_PATCHES，GL_PATCHES 不再预设这个单元长什么样，而是由你自己定义。glPatchParameteri(GL_PATCH_VERTICES, n) 就是在填补这个定义的空白。 它告诉OpenGL：“从现在起，每 n 个点打包成一个单元扔给我。”

我们这里是以4个控制点为一个Bezier曲线 Patch

然后使用

1glDrawArrays(GL_PATCHES, 0, 4);

进行渲染

1glBindVertexArray(vao_);
2glPatchParameteri(GL_PATCH_VERTICES, 4);
3glLineWidth(line_width_);
4
5bezier_shader_.Bind();
6glUniform1f(bezier_shader_.Uniform("u_TessLevel"), tess_level_);
7
8glDrawArrays(GL_PATCHES, 0, 4);
9bezier_shader_.Unbind();

接下来编写Shader

先介绍 TES

 1#version 460 core
 2
 3layout(isolines, equal_spacing) in;
 4
 5uniform mat4 u_Projection;
 6
 7void main()
 8{
 9    float t = gl_TessCoord.x;
10    float t1 = 1.0 - t;
11
12    // Cubic Bezier: B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3
13    vec4 p = t1 * t1 * t1 * gl_in[0].gl_Position
14           + 3.0 * t1 * t1 * t * gl_in[1].gl_Position
15           + 3.0 * t1 * t * t * gl_in[2].gl_Position
16           + t * t * t * gl_in[3].gl_Position;
17
18    gl_Position = u_Projection * p;
19}

1layout(isolines, equal_spacing) in;

  • isolines：告诉 GPU 我们正在绘制线段。

  • equal_spacing：要求硬件在 $[0, 1]$ 的参数空间内进行等间距采样。

  • in：表示这些设置是针对输入到此着色器的数据。

除了isolines布局还有

  • triangles
  • quads

不同的布局决定了使用什么样的坐标系去生成新的顶点。

isolines布局

isolines布局 TE 会将顶点细分到一个[0,0]*[1,1]上的坐标系中

细分因子

  • gl_TessLevelOuter[0]：决定“有多少条线”
  • gl_TessLevelOuter[1]：决定“每条线切多少段”
  • 没有gl_TessLevelInner，因为一条线不存在内部

当你设置了这两个 Outer 因子后，硬件会生成 gl_TessCoord

  • gl_TessCoord.x：代表当前点在该条线段上的位置（0.0 到 1.0）。这就是你之前代码里用来算贝塞尔曲线的 $t$。

  • gl_TessCoord.y：代表当前点属于哪一条线（0.0 到 1.0）。

  • 如果 gl_TessLevelOuter[0] = 1，那么所有的 gl_TessCoord.y 永远是 0。

  • 如果 gl_TessLevelOuter[0] = 2，你会得到 $y=0$ 的一组点和 $y=1.0$ 的一组点。

triangles 布局

triangles 布局将 Patch 视为一个平面三角形，并向其内部进行填充。

坐标系：重心坐标 (Barycentric Coordinates)

硬件生成的 gl_TessCoord 是一个 vec3(u, v, w)。

  • 这三个分量代表当前点距离三角形三条边的权重。
  • 它们始终满足：$u + v + w = 1.0$。
  • 三个顶点分别对应 $(1,0,0)$、$(0,1,0)$ 和 $(0,0,1)$。

细分因子

  • gl_TessLevelOuter[0, 1, 2]：分别控制三角形的三条外边被切成多少段。
  • gl_TessLevelInner[0]：控制三角形内部向中心点嵌套缩小的频率（内部只有 1 个因子）。

quads 布局

quads 布局将 Patch 视为一个单位正方形，最适合做参数化曲面（如贝塞尔曲面）或地形。

坐标系：二维笛卡尔坐标 $[0,1] \times [0,1]$

硬件生成的 gl_TessCoord 是一个 vec2(u, v)（虽然也是 vec3 类型，但 $z$ 轴始终为 0）。

  • u 是水平方向位置，v 是垂直方向位置。
  • 这非常适合直接映射纹理坐标

细分因子

  • gl_TessLevelOuter[0, 1, 2, 3]：
    • Outer[0] 和 Outer[2]：控制左右两条边（垂直边）的段数。
    • Outer[1] 和 Outer[3]：控制上下两条边（水平边）的段数。
  • gl_TessLevelInner[0, 1]：
    • Inner[0]：控制内部水平方向（横向）切几刀。
    • Inner[1]：控制内部垂直方向（纵向）切几刀。

接下来是 TCS

 1#version 460 core
 2
 3layout(vertices = 4) out;
 4
 5uniform float u_TessLevel;
 6
 7void main()
 8{
 9    gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;
10
11    if (gl_InvocationID == 0) {
12        gl_TessLevelOuter[0] = 1.0;
13        gl_TessLevelOuter[1] = u_TessLevel;
14    }
15}

这其中有很多要讲的

TCS 中一般分为两种任务

  1. 逐顶点任务
  2. 逐面片设置

其中layout(vertices = 4) out;是定义了输出 Patch 的顶点数。这里必须要与你在C++中设置的glPatchParameteri对应，当你设置了这个的时候GPU就会启动4个thread去一一处理4个顶点

1gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;

这里是逐顶点任务，把从顶点着色器传来的坐标原封不动地交给输出，以便后续的 TES 使用。而 gl_InvocationID 就对应上述提到的 thread id

1if (gl_InvocationID == 0) {
2        gl_TessLevelOuter[0] = 1.0;
3        gl_TessLevelOuter[1] = u_TessLevel;
4}

这里是最重要，这里就是逐面片设置，这里的gl_InvocationID == 0是判断thread id 是不是 0 号thread 如果是则设置如何细分。为什么需要 if (gl_InvocationID == 0) 因为如果不这么设置，那么所有的thread (这里是4个) 就会都去设置，导致性能浪费和数据竞争。并且这是一个全局设置，不需要所有的thread都去设置。由于上述以及介绍过了gl_TessLevelOuter所以这里你应该明白了这是什么意思。

具体的代码可以去https://github.com/Yang-Junjie/GraphicsLab中的BezierCurveScene.cpp查看以及shaders\BezierSurfaceScene

其中示例不仅有Bezier曲线，还有Bezier曲面

beziercurve beziersurface

]]>