title: Smooth blur gaussian in OpenGL es 2.0
body: <p>I try to make a smooth gaussian blur but I don't have any idea to how to do it corectly.</p>
  
  <p>I tried a few things like this :</p>
  
  <pre><code>#version 100
  
  precision mediump float;
  
  varying vec3 vColor;
  varying vec2 TexCoords;
  
  uniform sampler2D texture0;
  uniform float radius;
  uniform vec2 dir;
  uniform resolution;
  
  void main() {
  
    vec4 sum = vec4(0.0);
  
    vec2 tc = TexCoords;
  
    float blur = radius/resolution;
  
    float hstep = dir.x;
    float vstep = dir.y;
  
  
    sum += texture2D(texture0, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
    sum += texture2D(texture0, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(texture0, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(texture0, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;
  
    sum += texture2D(texture0, vec2(tc.x, tc.y)) * 0.2270270270;
  
    sum += texture2D(texture0, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
    sum += texture2D(texture0, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(texture0, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(texture0, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162;
  
    gl_FragColor = vec4(vColor, 1.0) * vec4(sum.rgb, 1.0);
  }
  </code></pre>
  
  <p>But the result is something like that: 
  <a href="https://i.imgur.com/N6ks3Pw.png" rel="nofollow noreferrer">http://i.imgur.com/N6ks3Pw.png</a></p>
  
  <p>How can I achieve a better result?</p>