多次通过SSAO边界工件

Question

我正在玩WebGL中的多个传递，以对我的渲染应用一些视觉增强。

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

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

现在，我无法理解为什么最终图像的某些部分周围会出现黑色边框。 我试着很好地调整一些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);

......但是并没有把我带到任何结果。

在下面的图片中，这件神器显然被视为斯坦福龙周围的细黑线：



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

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

Answer 1

对于子孙后代，我正在使用：

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

所以我更改了pack / unpack函数，如下所示：

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);
}

解决了我的问题。