CocosCreator-Shader-Effect-Demo/assets/effects/sprite-gaussian-blur.effect

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  
// 高斯模糊

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        # # 标准方差值
        # stDev: {
        #   value: 0.84089642,
        #   inspector: {
        #     tooltip: "标准方差值"
        #   }
        # }

        # 纹理尺寸
        textureSize: { 
          value: [100.0, 100.0],
          inspector: {
            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;
  #endif

  #if ENABLE_GAUSSIAN_BLUR

  // 定义无理数
  #define e 2.718281828459045

  // 定义标准方差值
  #define stDev 0.84089642
  // #define stDev 1.5
  // #define stDev 5.0
  // #define stDev 10.0

  // 定义π
  #define pi 3.141592653589793

  // 接收外部变量
  uniform GaussianBlur {
    // 纹理尺寸（宽 x 高）（px）
    vec2 textureSize;

    // // 标准方差值
    // float stDev;
  }

  /**
   * 获取权重(对应二维高斯函数公式)
   * 
   * @param x   
   * @param y
   */
  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)));
  }

  /**
   * 获取权重的加权平均值
   */
  float getAverageWeight(float x, float y, float totalWeight) {
    return getWeight(x, y) / totalWeight;
  }

  #endif

  void main () {
    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;
    #if ENABLE_GAUSSIAN_BLUR

      // 先计算所有权重的和
      const float size = ceil(stDev * 6.0);
      const float halfSize = floor(size / 2.0);
      float totalWeight = 0.0; 
      for(float x = -halfSize; x<= halfSize; x++) {
        for (float y = -halfSize; y<= halfSize; y++) {
          totalWeight += getWeight(x, y);
        }
      } 

      // 加权平均值
      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 = getAverageWeight(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;
    #endif
  }
}%