“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The mean of fuzzy

The principle of mean blur is actually very simple by stacking multiple textures with different UV offset Settings for each texture to achieve a bit of shadow effect to achieve blur. However, the offset should not be too large, for example, fStep should be less than 0.01. Because too much offset will not be the desired blur.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    lowp vec4 sample0, sample1, sample2, sample3;
    
    float fStep = 0.005;
  
    // Each corresponds to four pixels
    sample0 = texture(iChannel2, vec2(uv.x - fStep, uv.y - fStep));
    sample1 = texture(iChannel2, vec2(uv.x + fStep, uv.y + fStep));
    sample2 = texture(iChannel2, vec2(uv.x + fStep, uv.y - fStep));
    sample3 = texture(iChannel2, vec2(uv.x - fStep, uv.y + fStep));

    // Find the average value
    gl_FragColor = (sample0 + sample1 + sample2 + sample3) / 4.0;
}
Copy the code
FStep = 0.005 FStep = 0.01

Mean blur can also enhance the effect by adding more texture images and adding more different offset parameters to achieve a more fuzzy effect.

float fStep1 = 0.01;
sample4 = texture(iChannel2, vec2(uv.x - fStep1, uv.y - fStep1));
sample5 = texture(iChannel2, vec2(uv.x + fStep1, uv.y + fStep1));
sample6 = texture(iChannel2, vec2(uv.x + fStep1, uv.y - fStep1));
sample7 = texture(iChannel2, vec2(uv.x - fStep1, uv.y + fStep1));
gl_FragColor = (sample0 + sample1 + sample2 + sample3 + sample4 + sample5 + sample6 + sample7) / 8.0; 
Copy the code

But the mean blur doesn’t look good and it doesn’t look natural, it’s more like a phantom effect in the real sense.

Gaussian blur

Gaussian Bulr is a typical fuzzy algorithm. Gaussian blur is usually used in image processing to reduce image noise and reduce the level of detail and blur the image. It actually looks like an image is being viewed through translucent glass. In terms of digital signal processing, image blur is essentially a process of filtering high frequency signals and reserving low frequency signals, so gaussian blur processing is also called low pass filter. The Gaussian kernel used in Gaussian blur is an array of square pixels, and the array values correspond to 2D Gaussian curve values.

1/2561/2561/256 * 1464141624164624362464162416414641 ∣ ∣ \ begin {vmatrix} 1 & 4 & 6 & 4 & 1 \ \ 4 & 16 & 24 & 16 \ \ & 4 & 6 24&36&24&6 \\ 4&16&24&16&4 \\ 1&4&6&4&1 {vmatrix} \ end ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ 1464141624164624362464162416414641 ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣ ∣

The more values you have in the center of the array, just like a normal distribution, the closer you get to the center, the more values you have. The essence of blur is to make the current pixel value and the surrounding pixel value close, each pixel and the surrounding pixel value simultaneously. As shown below, a 3×3 Gaussian kernel and a 5×5 Gaussian kernel are used to achieve the blur effect:

// Convolution size
const int KernelSize = 9;
const float stepValue = 0.005;
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    int i;
    vec4 sum = vec4(0.0);
    
    // store the 3x3 convolution matrix
    float Kernel[KernelSize];
    Kernel[6] = 1.0; Kernel[7] = 2.0; Kernel[8] = 1.0;
    Kernel[3] = 2.0; Kernel[4] = 4.0; Kernel[5] = 2.0;
    Kernel[0] = 1.0; Kernel[1] = 2.0; Kernel[2] = 1.0;
    
     
    float fStep = stepValue;
    // Pixel offset position
    vec2 Offset[KernelSize];
    Offset[0] = vec2(-fStep,-fStep); Offset[1] = vec2(0.0,-fStep); Offset[2] = vec2(fStep,-fStep);
    Offset[3] = vec2(-fStep,0.0);    Offset[4] = vec2(0.0.0.0);    Offset[5] = vec2(fStep,0.0);
    Offset[6] = vec2(-fStep, fStep); Offset[7] = vec2(0.0, fStep); Offset[8] = vec2(fStep, fStep);
    
    for (i = 0; i < KernelSize; i++)
    {
        vec4 tmp = texture(iChannel2, uv + Offset[i]);
        sum += tmp * Kernel[i];
    }

    gl_FragColor = sum/16.0;

}
Copy the code

Comparatively, the fuzzy effect of 5×5 Gaussian kernel is better than that of 3×3 Gaussian kernel.

3×3 5×5

conclusion

In general, gaussian blur is better than mean blur and the blur is more natural. However, if the offset of Gaussian blur is adjusted to a high level, it will also become an overlapping shadow effect. Gaussian blur is more like a smoother blur effect than mean blur. In the offset parameter adjustment, the value can not be adjusted to too large, generally around 0.005 is the best effect.

reference

Gaussian blur