Multiple-passes SSAO border artifact

Question

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:

draw the geometry and store the depth vales in a texture buffer
apply the SSAO pass (based on this Fiddle from Rabbid76)
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:

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?

There can be so many things going wrong. First, understand what SSAO is for: Modulate ambient light. If the border is on the background which does not get shaded, it's of no consequence. Maybe your background is too far away? — starmole, Jan 01 '18 at 12:09
@starmole: many THX for your time, I don't know yet if i will blend the ssao texture into the final image or apply the SSAO to the ambient light, so I am actually experimenting. I am lost because i need high frequency detail and I am not able to achieve good results within the blur pass..For the issue in the question, actually I ended up by blending the alpha in the fragment shader. — deblocker, Jan 03 '18 at 08:08
SSAO is low frequency by nature. A lot of people add extra AO maps to models for finer details. — starmole, Jan 09 '18 at 06:05

score 1 · Accepted Answer · answered Jan 18 '18 at 17:54

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.

Multiple-passes SSAO border artifact

1 Answers1