多次通过SSAO边界神器答案

【问题标题】：Multiple-passes SSAO border artifact多次通过SSAO边界神器
【发布时间】：2018-01-01 11:46:45
【问题描述】：

我正在使用 WebGL 中的多个通道来对我的渲染应用一些视觉增强功能。

我在乒乓球两个纹理（取自这里：WebGL Image Processing Continued），这基本上是我的工作流程：

绘制几何图形并将深度值存储在纹理缓冲区中
应用 SSAO 通行证（基于来自 Rabbid76 的 this Fiddle）
最后，我将纹理渲染到屏幕上

现在，我无法理解为什么最终图像的某些部分周围有黑色边框。我试图微调一些 SSAO 参数，但我无法摆脱那个伪影，所以，只是猜测，我现在相信这个黑色边框是由于我的纹理缓冲区的错误混合设置造成的。

这实际上是深度通道中的代码：

gl.disable(gl.BLEND);
gl.enable(gl.DEPTH_TEST);
gl.depthMask(true);
... drawings

我也试过这样：

gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.GL_SRC_ALPHA, gl.GL_ONE_MINUS_SRC_ALPHA);

...但没有让我得到任何结果。

在下图中，这件神器显然是一条围绕着斯坦福龙的细黑线：

由于我完全迷失了这个问题，有人可以指出正确的方向吗？

我的问题：我需要绘制一个具有透明背景的几何图形 - 这是正确的混合模式，当渲染到后台缓冲区并乒乓球两个纹理以应用多种效果时？

【问题讨论】：

可能会出现很多问题。首先，了解 SSAO 的用途：调制环境光。如果边框在没有被遮蔽的背景上，那是没有关系的。可能你的背景太远了？
@starmole: 非常感谢你的时间，我还不知道我是否会将 ssao 纹理混合到最终图像中或将 SSAO 应用于环境光，所以我实际上是在尝试。我迷路了，因为我需要高频细节，而我无法在模糊过程中取得良好的效果。对于问题中的问题，实际上我最终通过在片段着色器中混合 alpha。
SSAO 本质上是低频的。很多人为模型添加额外的 AO 贴图以获得更精细的细节。

标签： webgl blending ssao

【解决方案1】：

为了后代，我使用的是：

gl.clearColor(0, 0, 0, 1);

所以我改变了打包/解包功能如下：

vec4 PackDepth32_0(float depth) {
    const vec4 bit_shift = vec4(255.0 * 255.0 * 255.0, 255.0 * 255.0, 255.0, 1.0);
    const vec4 bit_mask = vec4(0.0, 1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0);
    vec4 res = fract(depth * bit_shift);
    res -= res.xxyz * bit_mask;
    return res;
}
float UnpackDepth32_0(vec4 color) {
    const vec4 bit_shift = vec4(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0);
    return dot(color, bit_shift);
}

这解决了我的问题。

【讨论】：