webglblendingssao

Multiple-passes SSAO border artifact

I am playing with multiple passes in WebGL to apply some visual enhancements to my renders.

I am ping-ponging two textures (taken from here: WebGL Image Processing Continued), and this is basically my workflow:

  1. draw the geometry and store the depth vales in a texture buffer
  2. apply the SSAO pass (based on this Fiddle from Rabbid76)
  3. at the end, I am rendering the texture to the screen

Now, I am not able to understand why there is a black border around some parts of the final image. I tried to fine adjust some SSAO parameters, but I wasn't able to get rid from that artifact, so, just guessing, i believe now that this black border is due a wrong blending setup of my texture buffers.

This is actually the code in the depth pass:

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

I tried also this way:

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

...but is not leading me to any result.

In the picture below, this artifact is clearly to see as a thin black line around the stanford dragon:

SSAO

As I am completely lost with this issue, can someone point me to the right direction?

My question: I need to draw a geometry with transparent background - which is the correct blending mode for that, when rendering to a back buffer and ping-ponging two textures to apply multiple effects?

Solution

  • For the posterity, I was using: 

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

    so i changed the pack/unpack functions as follows:

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

    which solves my problem.