How to improve performance of ping-pong rendering(for blur) in OpenGL ES

Question

I'm trying to do gaussian blur with OpenGL ES on my Android device. I use the method which is mentioned in

http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/

There is two framebuffers(A and B) in my app. Blur one dimensional by drawing A to B, and blur the other by drawing B to A. It's all right when only one image being blurred, it may catch up 50fps. But if the is more image being blurred, even very small, the FPS drops to 4~5. It's terrible to use this approach.

My questions are:

1. Is the performance issue caused by switching the two FBOs multiple times in one frame?

2. Is there any better way to do ping-pong rendering on Android devices.

Answer 1

You should use just one buffer and blur them in both directions at once.

Here is a standard OpenGL shader that I use and found it very simple.

    uniform sampler2D texture_map;
    uniform float blur;

    uniform float blur_Size;

    float blurSize = 1.0/blur_Size; // I've chosen this size because this will result in that every step will be one pixel wide if the texture is of size 512x512

    void main() {

    if (blur!=0.0){

           vec4 sum = vec4(0.0);

           // blur in y (vertical)
           // take nine samples, with the distance blurSize between them
           sum += texture2D(texture_map, vec2(texcoord.x - 4.0*blurSize, texcoord.y)) * 0.05;
           sum += texture2D(texture_map, vec2(texcoord.x - 3.0*blurSize, texcoord.y)) * 0.09;
           sum += texture2D(texture_map, vec2(texcoord.x - 2.0*blurSize, texcoord.y)) * 0.12;
           sum += texture2D(texture_map, vec2(texcoord.x - blurSize, texcoord.y)) * 0.15;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y)) * 0.16;
           sum += texture2D(texture_map, vec2(texcoord.x + blurSize, texcoord.y)) * 0.15;
           sum += texture2D(texture_map, vec2(texcoord.x + 2.0*blurSize, texcoord.y)) * 0.12;
           sum += texture2D(texture_map, vec2(texcoord.x + 3.0*blurSize, texcoord.y)) * 0.09;
           sum += texture2D(texture_map, vec2(texcoord.x + 4.0*blurSize, texcoord.y)) * 0.05;

           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y - 4.0*blurSize)) * 0.05;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y - 3.0*blurSize)) * 0.09;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y - 2.0*blurSize)) * 0.12;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y - blurSize)) * 0.15;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y)) * 0.16;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y + blurSize)) * 0.15;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y + 2.0*blurSize)) * 0.12;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y + 3.0*blurSize)) * 0.09;
           sum += texture2D(texture_map, vec2(texcoord.x, texcoord.y + 4.0*blurSize)) * 0.05;

           gl_FragColor = sum/2.0;
        }

Feed The uniform blur_Size the width or height ( which ever is bigger). If thats too much blur or to little just adjust the number you feed in. But width and height are a good place to start. The bigger the number the more blur. Also try averaging the two. If the image is really rectangular your blur may be way too large.

60 on a 60x60 image is a 1:1 blur but if your image is say 512x512 a blur of 60 is going to be hardly noticeable. The blur is a ratio of blur amount to image size.

Its a hack and slash method buts its quick and simple with no algorithms.

best of luck