javascript - 【three.js】使用后期处理抗锯齿为啥会更模糊？

Question

我有一个建筑模型渲染过程中，想要给其加上环境光遮蔽效果，于是，我使用了后期处理中的SAOPass来实现这个效果，结果发现模型变的有些糊了，锯齿感也变得严重了。
因为我本身就已经开启了渲染器的抗锯齿

    renderer = new THREE.WebGLRenderer({
        antialias: true, // 设置抗锯齿
        logarithmicDepthBuffer: true, // 启用对数深度缓冲 解决模型闪烁问题
    });

所以我就打算在后期处理上再加入一个SMAAPass抗锯齿，结果发现，反而比之前更糊了！
这是什么情况？如何解决？

下面三个图是： 无后期处理 ——> 使用了SAOPass ——> 使用了SAOPass 和 SMAAPass

无后期处理：

使用了SAOPass：

使用了SAOPass 和 SMAAPass：

Answer 1

回答

在你的情况下，当使用SAOPass（屏幕空间环境光遮蔽）后，模型变得模糊是正常的，因为SAO算法本身就是基于屏幕空间的近似计算，这会在模型的边缘产生模糊效果以增强环境光遮蔽的视觉效果。

当你进一步添加SMAAPass（子像素形态抗锯齿）时，如果配置不当或者与SAOPass的效果叠加方式不合适，可能会导致过度的模糊。这是因为SMAA是一个后处理步骤，旨在平滑图像中的锯齿边缘，但如果在环境光遮蔽之后应用，它可能会进一步增强或改变由SAO产生的模糊效果。

以下是几个可能的解决方案：

1. 调整SAO的强度：减少SAOPass的强度或模糊半径，以减少它产生的模糊效果。
2. 重新排序后期处理步骤：尝试先应用SMAAPass，然后再应用SAOPass。虽然这听起来可能违反直觉，但在某些情况下，先平滑图像然后应用环境光遮蔽可能会产生更好的结果。
3. 优化SMAA设置：确保SMAAPass的设置是合适的，没有过度应用模糊。
4. 考虑其他抗锯齿方法：如果你发现SMAA不适合你的场景，可以考虑使用其他抗锯齿方法，如FXAA或TAA（时间抗锯齿）。
5. 检查渲染器设置：确保你的WebGL渲染器设置正确。请注意，在THREE.WebGLRenderer的构造函数中，应该是antialias（实际上是antialias: true可能是个拼写错误），但正确的属性应该是antialias: true（注意是antialias还是antialias？正确的应该是antialias，但通常应该是antialias: true或antialias: 'high'，但antialias可能是一个拼写错误，正确的应该是antialiasing，但Three.js中通常使用antialias或antialias: true来启用默认的WebGL抗锯齿）。但是，通常WebGL的抗锯齿设置可能不如后期处理那么有效或可控。
6. 调整渲染器分辨率：如果可能的话，尝试提高渲染器的输出分辨率，然后在下采样到屏幕大小，这可能会改善抗锯齿效果。

请注意，每个项目和应用场景都是独特的，因此可能需要一些实验才能找到最佳的配置和步骤顺序。