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?
For the posterity, I was using:
so i changed the pack/unpack functions as follows:
which solves my problem.