多道SSAO边界伪像

Question

我正在处理WebGL中的多个传球，以便将一些视觉增强应用到我的呈现中。

我是ping-ponging两个纹理(取自这里：WebGL图像处理继续)，这基本上是我的工作流程：

1. 绘制几何图形并将深度值存储在纹理缓冲区中。
2. 应用SSAO通行证(基于来自这个小屁孩的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);

...but并没有给我带来任何结果。

在下面的图片中，这件艺术品显然是斯坦福龙周围的一条薄薄的黑线：

​

​

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

我的问题:我需要绘制一个透明的背景几何--当渲染到后台缓冲器和ping-ponging两个纹理以应用多个效果时，哪个是正确的混合模式？

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

这解决了我的问题。