OpenGL ES 2.0 Snippet Shader for Blurring Slow and Low Quality

Question

I am trying to write blur shader for iPad. I have a job, but I'm not very happy with the results. I get very choppy frame rates, and the blur looks like shit when the amount of blur is large.

Any ideas on how to improve the situation?

Some output:

uniform sampler2D texture; varying mediump vec2 fragTexCoord; varying mediump vec3 eyespaceNormal; varying highp float blurAmount; void main(void) { highp vec2 gaussFilter[7]; gaussFilter[0] = vec2(-3.0, 0.015625); gaussFilter[1] = vec2(-2.0, 0.09375); gaussFilter[2] = vec2(-1.0, 0.234375); gaussFilter[3] = vec2(0.0, 0.3125); gaussFilter[4] = vec2(1.0, 0.234375); gaussFilter[5] = vec2(2.0, 0.09375); gaussFilter[6] = vec2(3.0, 0.015625); highp float blurSize = blurAmount * 1.0; ///////////////////////////////////////////////// // 7x1 gaussian blur fragment shader ///////////////////////////////////////////////// highp vec4 color = vec4(0,0,0,1); for( int i = 0; i < 7; i++ ) { color += texture2D( texture, vec2( fragTexCoord.x+gaussFilter[i].x*blurSize, fragTexCoord.y+gaussFilter[i].x*blurSize ) )*gaussFilter[i].y; } gl_FragColor = color; } 

Edit: Blurring in a box can be a way. Here is the shader blur version:

 highp vec4 color = vec4(0,0,0,1); color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y - 4.0*blurAmount)) * 0.05; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y - 3.0*blurAmount)) * 0.09; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y - 2.0*blurAmount)) * 0.12; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y - blurAmount)) * 0.15; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y)) * 0.16; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y + blurAmount)) * 0.15; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y + 2.0*blurAmount)) * 0.12; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y + 3.0*blurAmount)) * 0.09; color += texture2D(texture, vec2(fragTexCoord.x, fragTexCoord.y + 4.0*blurAmount)) * 0.05; gl_FragColor = color; 

Here is the result of blurring the drawer (note that this is only horizontal blur, but this may be enough for what I want):

Answer 1

For the shader to work twice, it must be blurSize must be vec2 , and the value must be vec2(0, 1.0/height) for vertical blur and vec2(1.0/width, 0) for horizontal blur.

See http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=240334

The idea of ​​creating a two-problem blur is that it will significantly reduce the number of texture searches and, hopefully, increase the speed. Double blurring with a 7x7 kernel size will require 14 texture searches, but if this is done in a nested loop, you will need to do 49 texture searches.

Answer 2

Performing two or more lateral erosion of the box improves the quality to very close Gaussian erosion while maintaining high performance. And blur boxes can be easily accelerated. Take a look at http://web.archive.org/web/20060718054020/http://www.acm.uiuc.edu/siggraph/workshops/wjarosz_convolution_2001.pdf

In any case, in most moving scenes, you can get away with rendering with lower accuracy than might appear on the screenshots.

Answer 3

It is not clear what exactly your code does. You are using texture2D, which offers a 2D filter. However, your convolution matrix has one dimension, and you only loop once. I may be wrong, but it seems that you are applying diagonal blur. If this is a 2D filter, you will need two (nested) loops for x and y, respectively, to cover the 2D area.

And about the blurSize variable - this name is a bit misleading. The size of the blur depends on your convolution matrix. Your size is 7 pixels. This determines the size. The variable is more like the “strength” of the blur, which can only quench the effect of the convolution matrix. If set too high, artifacts will occur.

I am not an expert and have not written any pixel shaders other than the "hello world" mandelbrot one. If I'm not mistaken, then blurring shaders is one of the worst for acceleration. Most of the real-time blurry ones I've seen were box-blurs . Try porting the code here: gameDev thread .