WebGL 集群延迟光照：高级照明管理

在实时 3D 图形领域，光照在创建逼真且视觉吸引力强的场景中扮演着关键角色。传统的前向渲染方法在处理大量光源时计算成本会很高，而延迟渲染提供了一个引人注目的替代方案。集群延迟光照在此基础上更进一步，为 WebGL 应用中管理复杂光照场景提供了一个高效且可扩展的解决方案。

理解延迟渲染

在深入探讨集群延迟光照之前，理解延迟渲染的核心原理至关重要。与前向渲染（在光栅化每个片段（像素）时计算其光照）不同，延迟渲染将几何体和光照通道分离。以下是其分解：

几何体通道 (G-Buffer 创建): 在第一个通道中，场景的几何体被渲染到多个渲染目标中，这些目标统称为 G-buffer。该缓冲区通常存储以下信息：
- 深度: 从相机到表面的距离。
- 法线: 表面朝向。
- 反照率: 表面的基础颜色。
- 镜面反射: 镜面高光颜色和强度。
光照通道: 在第二个通道中，G-buffer 用于计算每个像素的光照贡献。这使我们能够将昂贵的光照计算推迟到拥有所有必要的表面信息之后。

延迟渲染具有以下几个优势：

减少过度绘制: 每个像素的光照计算只进行一次，无论影响它的光源数量有多少。
简化光照计算: 所有必要的表面信息都可在 G-buffer 中随时获取，从而简化光照方程。
几何体与光照解耦: 这使得渲染管线更加灵活和模块化。

然而，当处理大量光源时，标准延迟渲染仍然面临挑战。这正是集群延迟光照发挥作用的地方。

集群延迟光照简介

集群延迟光照是一种优化技术，旨在提高延迟渲染的性能，尤其是在光源众多的场景中。其核心思想是将视锥体划分为 3D 簇网格，并根据光源的空间位置将其分配到这些簇中。这使我们能够在光照通道中高效地确定哪些光源影响哪些像素。

集群延迟光照的工作原理

视锥体细分: 视锥体被划分为一个 3D 簇网格。此网格的尺寸（例如 16x9x16）决定了聚类的粒度。
光源分配: 每个光源被分配到它所相交的簇。这可以通过检查光源的包围盒与簇边界来完成。
簇光源列表创建: 为每个簇创建一个影响它的光源列表。此列表可以存储在缓冲区或纹理中。
光照通道: 在光照通道中，对于每个像素，我们确定它属于哪个簇，然后遍历该簇的光源列表中的光源。这显著减少了每个像素需要考虑的光源数量。

集群延迟光照的优势

性能提升: 通过减少每个像素考虑的光源数量，集群延迟光照可以显著提高渲染性能，尤其是在光源数量庞大的场景中。
可扩展性: 随着光源数量的增加，性能增益变得更加明显，使其成为复杂光照场景的可扩展解决方案。
减少过度绘制: 类似于标准延迟渲染，集群延迟光照通过每个像素只执行一次光照计算来减少过度绘制。

在 WebGL 中实现集群延迟光照

在 WebGL 中实现集群延迟光照涉及多个步骤。以下是该过程的高级概述：

G-Buffer 创建: 创建 G-buffer 纹理以存储必要的表面信息（深度、法线、反照率、镜面反射）。这通常涉及使用多个渲染目标 (MRT)。
簇生成: 定义簇网格并计算簇边界。这可以在 JavaScript 中或直接在着色器中完成。
光源分配 (CPU 端): 遍历光源并将它们分配到相应的簇。这通常在 CPU 上完成，因为它只在光源移动或改变时才需要计算。考虑使用空间加速结构（例如，包围盒层次结构或网格）来加快光源分配过程，尤其是在光源数量庞大的情况下。
簇光源列表创建 (GPU 端): 创建一个缓冲区或纹理来存储每个簇的光源列表。将分配给每个簇的光源索引从 CPU 传输到 GPU。这可以使用纹理缓冲区对象 (TBO) 或存储缓冲区对象 (SBO) 来实现，具体取决于 WebGL 版本和可用的扩展。
光照通道 (GPU 端): 实现光照通道着色器，该着色器从 G-buffer 读取数据，确定每个像素所属的簇，并遍历簇光源列表中的光源以计算最终颜色。

代码示例 (GLSL)

以下是一些代码片段，用于说明实现的几个关键部分。注意：这些是简化示例，可能需要根据您的具体需求进行调整。

G-Buffer 片段着色器

#version 300 es

in vec3 vNormal;
in vec2 vTexCoord;

layout (location = 0) out vec4 outAlbedo;
layout (location = 1) out vec4 outNormal;
layout (location = 2) out vec4 outSpecular;

uniform sampler2D uTexture;

void main() {
  outAlbedo = texture(uTexture, vTexCoord);
  outNormal = vec4(normalize(vNormal), 0.0);
  outSpecular = vec4(0.5, 0.5, 0.5, 32.0); // 示例镜面反射颜色和光泽度
}

光照通道片段着色器

#version 300 es

in vec2 vTexCoord;

layout (location = 0) out vec4 outColor;

uniform sampler2D uAlbedo;
uniform sampler2D uNormal;
uniform sampler2D uSpecular;
uniform sampler2D uDepth;

uniform samplerBuffer uLightListBuffer;
uniform vec3 uLightPositions[MAX_LIGHTS];
uniform vec3 uLightColors[MAX_LIGHTS];

uniform int uClusterGridSizeX;
uniform int uClusterGridSizeY;
uniform int uClusterGridSizeZ;

uniform mat4 uInverseProjectionMatrix;

#define MAX_LIGHTS 256 // 示例，需要定义并保持一致

// 从深度和屏幕坐标重建世界位置的函数
vec3 reconstructWorldPosition(float depth, vec2 screenCoord) {
    vec4 clipSpacePosition = vec4(screenCoord * 2.0 - 1.0, depth, 1.0);
    vec4 viewSpacePosition = uInverseProjectionMatrix * clipSpacePosition;
    return viewSpacePosition.xyz / viewSpacePosition.w;
}

// 根据世界位置计算簇索引的函数
int calculateClusterIndex(vec3 worldPosition) {
    // 将世界位置转换为视图空间
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // 计算归一化设备坐标 (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; // 透视除法

    // 转换为 [0, 1] 范围
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // 钳位以避免越界访问
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // 计算簇索引
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // 计算一维索引
    return clusterX + clusterY * uClusterGridSizeX + clusterZ * uClusterGridSizeX * uClusterGridSizeY;
}


void main() {
  float depth = texture(uDepth, vTexCoord).r;
  vec3 normal = normalize(texture(uNormal, vTexCoord).xyz);
  vec3 albedo = texture(uAlbedo, vTexCoord).rgb;
  vec4 specularData = texture(uSpecular, vTexCoord);
  float shininess = specularData.a;
  float specularIntensity = 0.5; // 简化的镜面反射强度


  // 从深度重建世界位置
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // 计算簇索引
  int clusterIndex = calculateClusterIndex(worldPosition);

  // 确定此簇光源列表的起始和结束索引
    int lightListOffset = clusterIndex * 2; // 假设每个簇存储起始和结束索引
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); // 将光源索引归一化到 [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // 累积光照贡献
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // 安全检查以防止越界访问

        vec3 lightPosition = uLightPositions[lightIndex];
        vec3 lightColor = uLightColors[lightIndex];

        vec3 lightDirection = normalize(lightPosition - worldPosition);
        float distanceToLight = length(lightPosition - worldPosition);

        // 简单漫反射光照
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        // 简单镜面反射光照
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        float specularHighlight = pow(max(dot(reflectionDirection, normalize(-worldPosition)), 0.0), shininess);
        vec3 specular = specularIntensity * specularHighlight * specularData.rgb * lightColor;

        float attenuation = 1.0 / (distanceToLight * distanceToLight); // 简单衰减


        finalColor += (diffuse + specular) * attenuation;
  }

  outColor = vec4(finalColor, 1.0);
}

重要注意事项

簇大小: 簇大小的选择至关重要。较小的簇提供更好的剔除效果，但会增加簇的数量以及管理簇光源列表的开销。较大的簇会减少开销，但可能导致每个像素需要考虑更多的光源。实验是找到适合您场景的最佳簇大小的关键。
光源分配优化: 优化光源分配过程对于性能至关重要。使用空间数据结构（例如，包围盒层次结构或网格）可以显著加快查找光源与哪些簇相交的过程。
内存带宽: 在访问 G-buffer 和簇光源列表时，请注意内存带宽。使用适当的纹理格式和压缩技术有助于减少内存使用。
WebGL 限制: 较旧的 WebGL 版本可能缺少某些功能（如存储缓冲区对象）。考虑使用扩展或替代方法来存储光源列表。确保您的实现与目标 WebGL 版本兼容。
移动性能: 集群延迟光照可能计算密集，尤其是在移动设备上。仔细分析您的代码并优化性能。在移动设备上考虑使用较低分辨率或简化的光照模型。

优化技术

可以采用多种技术来进一步优化 WebGL 中的集群延迟光照：

视锥体剔除: 在将光源分配给簇之前，执行视锥体剔除以丢弃完全位于视锥体之外的光源。
背面剔除: 在几何体通道中剔除背面三角形，以减少写入 G-buffer 的数据量。
细节级别 (LOD): 根据模型与相机的距离，为模型使用不同的细节级别。这可以显著减少需要渲染的几何体数量。
纹理压缩: 使用纹理压缩技术（例如 ASTC）来减小纹理大小并提高内存带宽。
着色器优化: 优化着色器代码以减少指令数量并提高性能。这包括循环展开、指令调度和最小化分支等技术。
预计算光照: 考虑对静态对象使用预计算光照技术（例如光照贴图或球谐函数）以减少实时光照计算。
硬件实例化: 如果您有相同对象的多个实例，请使用硬件实例化以更高效地渲染它们。

替代方案与权衡

尽管集群延迟光照具有显著优势，但考虑替代方案及其各自的权衡至关重要：

前向渲染: 尽管在光源数量众多时效率较低，但前向渲染实现起来更简单，可能适用于光源数量有限的场景。它也更容易实现透明度。
前向+渲染 (Forward+ Rendering): 前向+渲染是延迟渲染的一种替代方案，它使用计算着色器在前向渲染通道之前执行光源剔除。这可以提供与集群延迟光照相似的性能优势。它实现起来可能更复杂，并且可能需要特定的硬件功能。
分块延迟光照 (Tiled Deferred Lighting): 分块延迟光照将屏幕划分为 2D 块而不是 3D 簇。这比集群延迟光照实现起来更简单，但对于深度变化显著的场景可能效率较低。

渲染技术的选择取决于您应用程序的具体要求。在做出决策时，请考虑光源数量、场景复杂性和目标硬件。

结论

WebGL 集群延迟光照是一种在基于 Web 的图形应用中管理复杂光照场景的强大技术。通过高效剔除光源和减少过度绘制，它可以显著提高渲染性能和可扩展性。虽然实现可能很复杂，但其在性能和视觉质量方面的优势使其成为游戏、模拟和可视化等要求苛刻的应用程序的值得付出的努力。仔细考虑簇大小、光源分配优化和内存带宽对于实现最佳结果至关重要。

随着 WebGL 的不断发展和硬件能力的提升，集群延迟光照可能会成为开发人员创建视觉震撼且高性能的基于 Web 的 3D 体验日益重要的工具。