Webgl: is possible to use one color buffer to unsharp masking the depth buffer?

Question

I'm noob to webgl. After reading the tutorials at webglfundamentals.org and "Introduction to Computer Graphics", i'm able to succesfully draw some stuff and the depth buffer without thirty-party libraries.

Now, i try to go a step further and apply some visual enhancement to my drawings, by usharp-masking the depth buffer, also called "the cheap SSAO".

What i understand is, that i should:

• draw the depth buffer
• blur X
• blur Y
• combine the blurred depth buffer with the diffuse component of the initial image

What i learned so far is, that to apply these four steps, i could use two textures, ping-pong back the textures, apply the effects in sequence to the textures and at the end draw to the screen the final result.

It would be easier with a gl.RGB4 color attachment?

It seems to me, that the final effect is just only to dim the diffuse color of the initial image, so i could draw the depth buffer to the red channel, blur-X the red channel to the green channel, blur-Y the green channel to the blue channel, and then combine this last with the initial drawing.

Isn't this faster or memory-cheaper than swapping two textures, for example by thinking mobile-first?

What are the drawbacks? Anyone already tried this? Thanks in advance

Answer 1

No, actually is not allowed to read and write to/from the same buffer at the same time. This results in undefined behavior. If it does work on one piece of hardware, it may not work on another. Here is a more detailed explanation: https://www.opengl.org/wiki/Framebuffer_Object#Feedback_Loops

Here is the resulting error:

GL_INVALID_OPERATION> Source and destination textures of the draw are the same.