通常，图像处理软件会提供”模糊”（blur）滤镜，使图片产生模糊的效果。

“模糊”的算法有很多种，其中有一种叫做”高斯模糊“（Gaussian Blur）。它将正态分布（又名”高斯分布”）用于图像处理。

本文介绍”高斯模糊”的算法，你会看到这是一个非常简单易懂的算法。本质上，它是一种数据平滑技术（data smoothing），适用于多个场合，图像处理恰好提供了一个直观的应用实例。

一、高斯模糊的原理

所谓”模糊”，可以理解成每一个像素都取周边像素的平均值。

上图中，2是中间点，周边点都是1。

“中间点”取”周围点”的平均值，就会变成1。在数值上，这是一种”平滑化”。在图形上，就相当于产生”模糊”效果，”中间点”失去细节。

显然，计算平均值时，取值范围越大，”模糊效果”越强烈。

上面分别是原图、模糊半径3像素、模糊半径10像素的效果。模糊半径越大，图像就越模糊。从数值角度看，就是数值越平滑。
接下来的问题就是，既然每个点都要取周边像素的平均值，那么应该如何分配权重呢？
如果使用简单平均，显然不是很合理，因为图像都是连续的，越靠近的点关系越密切，越远离的点关系越疏远。因此，加权平均更合理，距离越近的点权重越大，距离越远的点权重越小。

二、正态分布的权重

正态分布显然是一种可取的权重分配模式。

在图形上，正态分布是一种钟形曲线，越接近中心，取值越大，越远离中心，取值越小。
计算平均值的时候，我们只需要将”中心点”作为原点，其他点按照其在正态曲线上的位置，分配权重，就可以得到一个加权平均值。

三、高斯函数

上面的正态分布是一维的，图像都是二维的，所以我们需要二维的正态分布。

正态分布的密度函数叫做”高斯函数”（Gaussian function）。它的一维形式是：

其中，μ是x的均值，σ是x的方差。因为计算平均值的时候，中心点就是原点，所以μ等于0。

根据一维高斯函数，可以推导得到二维高斯函数：

有了这个函数 ，就可以计算每个点的权重了。

附加: 获取权重

  /**
   * 获取权重(对应二维高斯函数公式)
   */
  float getWeight(float x, float y) {
    return (1.0 / (2.0 * pi * pow(stDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stDev, 2.0)));
  }

四、权重矩阵

假定中心点的坐标是（0,0），那么距离它最近的8个点的坐标如下：

更远的点以此类推。
为了计算权重矩阵，需要设定σ的值。假定σ=1.5，则模糊半径为1的权重矩阵如下：

这9个点的权重总和等于0.4787147，如果只计算这9个点的加权平均，还必须让它们的权重之和等于1，因此上面9个值还要分别除以0.4787147，得到最终的权重矩阵。

五、计算高斯模糊

有了权重矩阵，就可以计算高斯模糊的值了。
假设现有9个像素点，灰度值（0-255）如下：

每个点乘以自己的权重值：

得到

将这9个值加起来，就是中心点的高斯模糊的值。
对所有点重复这个过程，就得到了高斯模糊后的图像。如果原图是彩色图片，可以对RGB三个通道分别做高斯模糊。

六、边界点的处理

如果一个点处于边界，周边没有足够的点，怎么办？
一个变通方法，就是把已有的点拷贝到另一面的对应位置，模拟出完整的矩阵。

七、Cocos Creator 对应 Effect

/*
 * @Author: ls
 * @Date: 2021-09-06 16:27:01
 * @LastEditTime: 2021-09-07 14:14:41
 * @LastEditors: Please set LastEditors
 * @Description: 高斯模糊(参考资料: https://blog.csdn.net/qq_14965517/article/details/120154090)
 * @FilePath: \cocos-creator-blur-mask\assets\materials\GaussianBlur.effect
 */

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        # 纹理尺寸
        textureSize: { 
          value: [100.0, 100.0],
          editor: {
            tooltip: "纹理尺寸(px:宽 x 高)"
          }
        }
}%

CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;
    gl_Position = pos;
  }
}%

CCProgram fs %{
  precision highp float;
  #include <alpha-test>
  in vec4 v_color;

  #if USE_TEXTURE
    in vec2 v_uv0;
    uniform sampler2D texture;

    #if USE_GAUSSIAN_BLUR
      // 定义无理数
      #define e 2.718281828459045
      // 定义π
      #define pi 3.141592653589793
      // 定义标准方差值: 方差值越大，越模糊，但是需要计算的高斯矩阵范围会变大，从而带来更大的计算量
      #define stDev 0.84089642
      // #define stDev 1.5
      // #define stDev 5.0
      // #define stDev 10.0

      // 接收外部变量
      uniform GaussianBlur {
        // 纹理尺寸（宽 x 高）（px）
        vec2 textureSize;
      };
      /**
      * 获取权重(对应二维高斯函数公式)
      */
      float getWeight(float x, float y) {
        return (1.0 / (2.0 * pi * pow(stDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stDev, 2.0)));
      }
    #endif
  #endif


  void main () {
    #if USE_TEXTURE && USE_GAUSSIAN_BLUR
        // 根据高斯分布在 3 个标准差范围内的分布比例占到 99% 的权重，因此我们只需要计算矩阵范围 [6 * stDev + 1, 6 * stDev +1] 上的权重
        const float size = floor(stDev * 6.0 + 1.0);
        const float halfSize = floor(size / 2.0);

        // 步骤一：计算高斯矩阵上所有权重的和;

        // v1：遍历所有点;
        // 计算每个点都计算权重;
        // float totalWeight = 0.0; 
        // for(float x = -halfSize; x<= halfSize; x++) {
        //   for (float y = -halfSize; y<= halfSize; y++) {
        //     totalWeight += getWeight(x, y);
        //   }
        // } 

        // v2：因为高斯分布是对称的;
        // 所以只计算原点、X轴正方向 * 2 、Y轴正方向 * 2 、第一象限的权重 * 4即可求出所有权重之和;

        // 原点
        float totalWeight = getWeight(0.0, 0.0);

        // X轴正方向上的权重 * 2.0 就是整个X轴上的权重
        for(float x = 1.0; x <= halfSize; x++) {
            totalWeight += getWeight(x, 0.0) * 2.0;
        } 
        // Y轴正方向上的权重 * 2.0 就是整个Y轴上的权重
        for(float y = 1.0; y <= halfSize; y++) {
            totalWeight += getWeight(0.0, y) * 2.0;
        } 
        // 第一象限的权重 * 4.0 就是4个象限的权重
        for(float x = 1.0; x <= halfSize; x++) {
          for (float y = 1.0; y<= halfSize; y++) {
            totalWeight += getWeight(x, y) * 4.0;
          }
        }

        // TODO: 因为权重矩阵是一次性计算即可不断应用;
        // 因此可以将权重矩阵的计算放到CPU计算，并传入到Shader直接渲染，因此有以下优化方案;
        // v3：原始权重矩阵在CPU计算并传入到Shader;
        // v4：加权平均后的权重矩阵在CPU计算并传入Shader;

        // 步骤二：采样周边像素并应用加权平均值，得出最终像素值;

        vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);
        // float divider = 0.01; 
        float onePxWidth = 1.0 / textureSize.x;
        float onePxHeight = 1.0 / textureSize.y;
        for(float x = -halfSize; x<= halfSize; x++) {
          for (float y = -halfSize; y<= halfSize; y++) {
            // 求出对应坐标的真正权重（对应权重矩阵）
            float weight = getWeight(x, y) / totalWeight;

            // 求出对应坐标像素颜色值的加权值
            // finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight;
            finalColor += texture(texture, v_uv0 + vec2(onePxWidth * x, onePxHeight * y)) * weight;
          }
        }
        gl_FragColor = finalColor;
    #else
      vec4 o = vec4(1, 1, 1, 1);
      #if USE_TEXTURE
      o *= texture(texture, v_uv0);
        #if CC_USE_ALPHA_ATLAS_TEXTURE
        o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
        #endif
      #endif

      o *= v_color;
      ALPHA_TEST(o);
      gl_FragColor = o;
    #endif
  }
}%