模糊滤波器就是对周围像素进行加权平均处理，对于均值模糊算法来讲，周围所有邻域像素点的权值都相同，所以不是很平滑，会显得糊糊的一片。而高斯模糊会把图像的模糊处理得很平滑，正因为这个优点，所以被广泛用在图像降噪上，特别是在边缘检测之前用来去除视频帧的噪点。

均值模糊

以某个点为中心点, 取出周围四个点的像素值, 然后求平均值


precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;


void main()
{
    lowp vec4 sample0, sample1, sample2, sample3;
    
    float fStep = 0.05;
  
    //分别对应四个像素点
    sample0 = texture2D(colorMap, vec2(varyTextCoord.x - fStep, varyTextCoord.y - fStep));
    sample1 = texture2D(colorMap, vec2(varyTextCoord.x + fStep, varyTextCoord.y + fStep));
    sample2 = texture2D(colorMap, vec2(varyTextCoord.x + fStep, varyTextCoord.y - fStep));
    sample3 = texture2D(colorMap, vec2(varyTextCoord.x - fStep, varyTextCoord.y + fStep));

    //求平均值
    gl_FragColor = (sample0 + sample1 + sample2 + sample3) / 4.0;

}

看起来是真的很模糊啊

截屏2019-12-01下午10.07.20.png

高斯模糊

直接暴力的求平均值显的很不自然, , 因为在这个求平均值的矩阵中, 各个颜色的权重是一样的, 而且是不连续的, 因为只有一个步长fStep, 显的过渡比较生硬, 而高斯模糊的权重是正态分布的权重，正态分布是一种可取的权重分配模式。正态分布在图形上表示为一种钟形曲线，越接近中心，取值越大，越远离中心，取值越小。只需要将中心像素点作为原点，以领域像素点距中心像素点的远近分配合适的高斯权重，就可以得到一个高斯加权平均值。

二维的高斯分布函数来实现高斯模糊的算法，二维高斯函数如下所示。

正态分布函数

模糊的本质就是让当前的像素值和周围的像素值更接近, 因此，各像素的颜均受到其邻接像素颜色值的影响。可使用下列简单的3x3卷积过滤器或较大尺寸的5x5的卷积过滤器。相比于均值模糊, 这个其实就是一个加权模糊(每个像素点对整天的结果权值是不一样的). 对与3x3的卷积过滤器, 我们是求9个值的加权平均, 对应5x5卷积过滤器, 我们试求25个值的加权平均.
3x3模糊卷积过滤器

{
    1,2,1
    2,4,2
    1,2,1
}

5x5模糊卷积过滤器

 {
      1, 4, 7, 4,1,
      4,16,26,16,4,
      7,26,41,26,7,
      4,16,26,16,4,
      1, 4, 7, 4,1,
 }

何为卷积?
卷积(Convolution) 是一一个很常见的图像处理操作，它可以用来过滤-幅图像。实现过滤的方法是计算源图像与一幅更小的图像(称为卷积内核( CONVOLUTION KERNEL)或者卷积过滤器(CONVOLUTION FILTER)) 之间的积和。根据在卷积内核中选择的值，卷积操作可以执行模糊、锐化、降噪、边缘检测以及其他有用的图像处理操作。从数学.上说，离散的2D卷积操作定义为:

卷积定义

在这个方程中，函数F代表基础图像，G代表卷积内核。两次求和是基于卷积内核的宽度和高度。计算输出图像中的-个特定像素的值的方法是将卷积内核的中心与基础图像中同--位置的像素对齐，然后将卷积内核覆盖的基础图像像素的值与卷积内核中对应位置的值相乘，并将其结果加到一-起。

简单的说, 卷积可以理解为两个矩阵对应的值相乘求和.

卷积计算

动态卷积动画

动图很清楚的表达了卷积的计算过程, 但是卷积操作还有一个问题是决定当卷积内核超过了基础图像的边缘时应该怎么办。

边缘补0, 当我们的卷积核中心点指向的是左上角是, 那我们的卷积核左边和上面是没有对应的值像素值与其做计算, 补0之后, 就满足的计算, 但是0与任何值相乘都为0, 不会影响结果.
补充中心点的对称值, 以上面动图为例, 如果中线点对应的是左上角的1, 则可以在1左侧补充9, 上面补充4, 以此类推.

3x3卷积着色器


precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
uniform sampler2D texMap;
uniform float stepValue;

// 卷积大小
const int KernelSize = 9;

void main()
{
    
    int i;
    vec4 sum = vec4(0.0);
    
    //用来存储3x3的卷积矩阵
    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;
    //像素点偏移位置
    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 = texture2D(texMap, varyTextCoord.xy + Offset[i]);
        sum += tmp * Kernel[i];
    }

    gl_FragColor = sum/16.0;
}

5x5卷积着色器


precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
uniform sampler2D texMap;
uniform float stepValue;

const int KernelSize = 25;

void main()
{
    
    int i;
    vec4 sum = vec4(0.0);
    //用来存储5x5的卷积矩阵,可以放到程序中计算, 节省着色器运行开销
    float Kernel[KernelSize];
    Kernel[0]  = 1.0;  Kernel[1] = 4.0;  Kernel[2]  = 7.0;   Kernel[3]  = 4.0;   Kernel[4]  = 1.0;
    Kernel[5]  = 4.0;  Kernel[6] = 16.0; Kernel[7]  = 26.0;  Kernel[8]  = 16.0;  Kernel[9]  = 4.0;
    Kernel[10] = 7.0; Kernel[11] = 26.0; Kernel[12] = 41.0;  Kernel[13] = 26.0;  Kernel[14] = 7.0;
    Kernel[15] = 4.0; Kernel[16] = 16.0; Kernel[17] = 26.0;  Kernel[18] = 16.0;  Kernel[19] = 4.0;
    Kernel[20] = 1.0; Kernel[21] = 4.0;  Kernel[22] = 7.0;   Kernel[23] = 4.0;   Kernel[24] = 1.0;


    float fStep = stepValue;
     //像素点偏移位置, 可以放到程序中计算, 节省着色器运行开销
    vec2 Offset[KernelSize];
    Offset[0] = vec2(-2.0*fStep,-2.0*fStep);
    Offset[1] = vec2(-fStep,-2.0*fStep);
    Offset[2] = vec2(0,-2.0*fStep);
    Offset[3] = vec2(fStep,-2.0*fStep);
    Offset[4] = vec2(2.0*fStep,-2.0*fStep);
    
    Offset[5] = vec2(-2.0*fStep,-fStep);
    Offset[6] = vec2(-fStep,-fStep);
    Offset[7] = vec2(0.0,-fStep);
    Offset[8] = vec2(fStep, -fStep);
    Offset[9] = vec2(2.0*fStep, -fStep);
    
    Offset[10] = vec2(-2.0*fStep, 0.0);
    Offset[11] = vec2(-fStep, 0.0);
    Offset[12] = vec2(0.0, 0.0);
    Offset[13] = vec2(fStep, 0.0);
    Offset[14] = vec2(2.0*fStep, 0.0);

    Offset[15] = vec2(-2.0*fStep, fStep);
    Offset[16] = vec2(-fStep, fStep);
    Offset[17] = vec2(0.0, fStep);
    Offset[18] = vec2(fStep, fStep);
    Offset[19] = vec2(2.0*fStep, fStep);
    
    Offset[20] = vec2(-2.0*fStep, 2.0*fStep);
    Offset[21] = vec2(-fStep, 2.0*fStep);
    Offset[22] = vec2(0.0, 2.0*fStep);
    Offset[23] = vec2(fStep, 2.0*fStep);
    Offset[24] = vec2(2.0*fStep, 2.0*fStep);
    
    for (i = 0; i < KernelSize; i++)
    {
        vec4 tmp = texture2D(texMap, varyTextCoord.st + Offset[i]);
        sum += tmp * Kernel[i];
    }

    gl_FragColor = sum/273.0;
}

高斯模糊

fStep代表的是偏移量, 理论上来说其中=值应该是1/textureWidth或者1/textureHeight, 按照我的图片尺寸, 1/textureWidth = 0.009, 按照这个值来计算, 效果并不好, 值在0.005左右模糊效果比较好.(不同的纹理偏移量值不一样)
疑问? shader里面怎么使用数组呀, 按照文档使用数组, float Kernel[1] = float[](1.0)报错syntax error: Array size must appear after variable name, 如果可以用数组, 卷积矩阵和偏移量都可以直接一个数组就可以了, 省不少代码量...

着色器图像处理(高斯模糊)

着色器图像处理(高斯模糊)

均值模糊

高斯模糊