threeJS影子高斯模糊边缘锯齿如何优化？

Question

在使用 Three.js 实现阴影渲染时，启用高斯模糊（如通过后期处理实现软阴影）常导致阴影边缘出现锯齿或模糊不均的问题。尤其是在低分辨率阴影贴图或级联阴影映射（CSM）中，高斯模糊会放大纹理采样不足的缺陷，造成视觉上的走样。如何在保持阴影柔和效果的同时，有效抑制高斯模糊带来的边缘锯齿？常见的优化手段包括提升阴影贴图分辨率、采用 variance shadow map（VSM）或 exponential shadow map（ESM）改善过滤特性，结合 MSAA 或 PCF 与多级模糊核权重调整。此外，后处理抗锯齿（如 SMAA、FXAA）与自定义高斯模糊着色器中的 UV 偏移优化也能显著改善边缘质量。如何权衡性能与画质，实现高质量软阴影，是实际开发中的关键挑战。

Answer 1

一、基础概念：Three.js 中的阴影渲染机制

在 Three.js 中，阴影通过光源（如 DirectionalLight、SpotLight）与物体的交互生成。默认使用 DepthTexture 和 ShadowMap 技术，将场景从光源视角渲染为深度图，再在主相机渲染时进行深度比较以判断是否处于阴影中。

常见的硬阴影问题促使开发者引入后期处理实现软阴影，其中高斯模糊是最常用手段。然而，当对低分辨率的阴影贴图应用高斯模糊时，由于原始采样不足，模糊过程会放大锯齿和块状伪影，尤其在级联阴影映射（CSM）中更为明显。

二、问题剖析：高斯模糊为何加剧锯齿现象

• 纹理分辨率不足：64×64 或 512×512 的阴影贴图在边缘区域采样稀疏，导致深度跳跃明显。
• 双线性插值局限：WebGL 默认纹理过滤方式无法有效缓解深度不连续区域的突变。
• 高斯核权重分布：标准高斯模糊对所有像素等距加权，但在深度边界处跨表面采样会产生错误混合。
• CSM 分层过渡区瑕疵：不同级联层间分辨率差异大，模糊后易出现“条带”或“断裂”感。

三、优化策略层级结构（由浅入深）

层级	技术手段	适用场景	性能开销
1	提升 ShadowMap 分辨率	静态场景、局部光照	中高
2	启用 PCF 过滤（Percentage-Closer Filtering）	通用软化	低
3	使用 VSM / ESM 替代标准深度贴图	需要可过滤性	中
4	多级高斯模糊核动态调整	CSM 各层级适配	中高
5	MSAA + 后处理抗锯齿（SMAA/FXAA）	最终图像质量提升	高
6	UV 偏移优化与各向异性采样	边缘细节增强	中

四、关键技术实现路径

1. 提高 ShadowMap 分辨率：

   light.shadow.mapSize.width = 2048;
   light.shadow.mapSize.height = 2048;

   可显著减少原始锯齿源，但内存与带宽消耗上升。
2. 切换至 Variance Shadow Map (VSM)： 利用存储深度及其平方值，允许方差计算来估计遮挡概率，支持双线性过滤。

   light.shadow.camera.far = 200;
   light.shadow.bias = -0.0001;
   light.shadow.mapSize.set(2048, 2048);
   // 需配合自定义 shader 支持 moment 存储

3. 采用 Exponential Shadow Maps (ESM)： 通过对深度取指数压缩，使深度差呈现指数衰减特性，更适合卷积操作。
4. PCF 多重采样结合随机偏移： 在 fragment shader 中实现 4x4 PCF 并加入旋转噪声纹理扰动采样位置，打破规则走样模式。
5. 可编程高斯模糊核权重调节： 根据 CSM 层级动态设置模糊半径，近层小核，远层大核但降权处理。

五、高级后处理集成方案

graph TD
    A[原始阴影贴图] --> B{选择 Shadow Mapping 类型}
    B -->|Standard| C[PCF + 双线性过滤]
    B -->|VSM| D[矩量存储 + 切比雪夫边界]
    B -->|ESM| E[指数压缩 + 卷积友好]
    C --> F[高斯模糊 Pass]
    D --> F
    E --> F
    F --> G[UV 偏移优化: dU/dV 补偿]
    G --> H[SMAA/FXAA 最终抗锯齿]
    H --> I[输出柔和无锯齿阴影]

六、性能与画质的权衡模型

在实际项目中，需根据目标平台设定优先级：

• 移动端/WebGL 1.0：优先使用 1024 分辨率 + PCF + 轻量级 FXAA，避免 VSM 精度溢出。
• PC/VR 应用：可启用 4096 分辨率 CSM，分三层独立模糊，并结合 SMAA 提升边缘一致性。
• 开放世界游戏：推荐 ESM + LOD-based blur radius control，动态调整每帧模糊强度。

此外，可通过 THREE.WebGLRenderer.info.memory 监控纹理占用，防止过度分配显存。