title: OpenGL ES 2.0 fragment shader to blur is slow and low quality
body: <p>I am trying to write a blur shader for the iPad. I have it working but I am not very happy with the results. I get very choppy frame rates and the blur looks like crap when blur amount is high. </p>
  
  <p>Any ideas on how to improve things?</p>
  
  <p>Some sample output:</p>
  
  <p><img src="https://i.stack.imgur.com/KaCBI.png" alt="alt text"></p>
  
  <pre><code>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 &lt; 7; i++ )
      {
          color += texture2D( texture, vec2( fragTexCoord.x+gaussFilter[i].x*blurSize, fragTexCoord.y+gaussFilter[i].x*blurSize ) )*gaussFilter[i].y;
      }
  
      gl_FragColor = color;
  }
  </code></pre>
  
  <p>Edit:
  A box blur may be the way to go.
  Here is a box blur version of the shader:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Here is the box blur output(note it's only a horizontal blur, but it might be enough for what i want) :
  <img src="https://i.stack.imgur.com/iIsS1.png" alt="alt text"></p>