It's fast but doesnt work properly with large picture about glsl-fast-gaussian-blur HOT 2 OPEN

I found this: https://discuss.cocos2d-x.org/t/blur-at-pause-works-very-slow/38061/36
and according to these numbers I created:

precision highp float;
uniform vec2 resolution;
uniform vec2 direction;
uniform sampler2D tex;

void main() {
    vec2 uv = vec2(gl_FragCoord.xy / resolution);
    vec4 color = vec4(0.0);

    vec2 off1 = vec2(0.66293) * direction;
    vec2 off2 = vec2(2.47904) * direction;
    vec2 off3 = vec2(4.46232) * direction;
    vec2 off4 = vec2(6.44568) * direction;
    vec2 off5 = vec2(8.42917) * direction;
    vec2 off6 = vec2(10.41281) * direction;
    vec2 off7 = vec2(12.39664) * direction;
    vec2 off8 = vec2(14.38070) * direction;
    vec2 off9 = vec2(16.36501) * direction;

    color += texture2D(tex, uv + (off1 / resolution)) * 0.10855;
    color += texture2D(tex, uv - (off1 / resolution)) * 0.10855;
    color += texture2D(tex, uv + (off2 / resolution)) * 0.13135;
    color += texture2D(tex, uv - (off2 / resolution)) * 0.13135;
    color += texture2D(tex, uv + (off3 / resolution)) * 0.10406;
    color += texture2D(tex, uv - (off3 / resolution)) * 0.10406;
    color += texture2D(tex, uv + (off4 / resolution)) * 0.07216;
    color += texture2D(tex, uv - (off4 / resolution)) * 0.07216;
    color += texture2D(tex, uv + (off5 / resolution)) * 0.04380;
    color += texture2D(tex, uv - (off5 / resolution)) * 0.04380;
    color += texture2D(tex, uv + (off6 / resolution)) * 0.02328;
    color += texture2D(tex, uv - (off6 / resolution)) * 0.02328;
    color += texture2D(tex, uv + (off7 / resolution)) * 0.01083;
    color += texture2D(tex, uv - (off7 / resolution)) * 0.01083;
    color += texture2D(tex, uv + (off8 / resolution)) * 0.00441;
    color += texture2D(tex, uv - (off8 / resolution)) * 0.00441;
    color += texture2D(tex, uv + (off9 / resolution)) * 0.00157;
    color += texture2D(tex, uv - (off9 / resolution)) * 0.00157;

    gl_FragColor = color;
}

I still don't know how to get these numbers :/

Edit: you can use blur 5-tap and:

• blur vertically framebuffer A to framebuffer B with radius 12,
• blur horizontally framebuffer B to framebuffer A with radius 12,
• blur vertically framebuffer A to framebuffer B with radius 10,
• blur horizontally framebuffer B to framebuffer A with radius 10,
• etc.
  It's fast and of good quality.

from glsl-fast-gaussian-blur.

If you're wanting a stronger blur, you can apply the filters multiple times - as long as it's an even amount so you're doing an equal number of vertical blurs to horizontal blurs.

Both the offsets and sampling weights are explained within the README linked blog post.

The weights of the texture samples are a one dimensional gaussian kernel distribution, so they all add up to one, it's explained in the Gaussian kernel weights section.

The sampling offsets are sampled between two texels, where between the two texels is a function of their weight which is described in the Linear sampling section of the blog post. Specifically:

... we have to adjust the coordinates that the distance of the determined coordinate from the texel #1 center should be equal to the weight of texel #2 divided by the sum of the two weights. In the same style, the distance of the determined coordinate from the texel #2 center should be equal to the weight of texel #1 divided by the sum of the two weights.

If you want to calculate larger kernels this Observable post is based on the same original article as this repo and calculates the weights and offsets for you. To be aware, as mentioned in the original blog post, that the wider you make your kernel the more samples you're doing and the samples also get less and less impactful - so is it worth the extra texture reads.

Also in this repo there is the coefficients.js file which you can see is also where the weights are coming from, I just found the Observable much more intuitive to use.

Another method to increase the blur output is sampling a lower resolution image for the blur, so you're effectively doing a wider kernel blur.

from glsl-fast-gaussian-blur.