1

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

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

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

...但不会导致我得到任何结果。

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

SSAO

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

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

4

1 回答 1

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

这解决了我的问题。

于 2018-01-18T17:54:16.790 回答