多次通过 SSAO 边界工件

Question

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

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

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

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

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

在下面的图片中，这个神器可以清楚地看到斯坦福龙周围的一条细黑线：

由于我对这个问题完全不知所措，有人可以指出正确的方向吗？

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

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

这解决了我的问题。

多次通过 SSAO 边界工件

Multiple-passes SSAO border artifact

webgl

blending

ssao