Creator3D 径向模糊跟高斯模糊的shader

Creator 3.x
#1

抄了两个模糊效果的shader。
惯例上一下效果图。

image.png814×546 422 KB

径向模糊的shader

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: unlit-vs:vert
      frag: unlit-fs:frag
      properties: &props
        color:        { value: [1, 1, 1, 1], inspector: { type: color } }
        tilingOffset: { value: [1, 1, 0, 0] }
        mainTexture:  { value: grey         }
        Samples: { value: 2, inspector : { displayName : "采样数" } }
        Strength: { value: 0.05, inspector : { displayName : "加强" } }
        center: { value: [0.5, 0.5], inspector : { displayName : "中心点" } }
  - name: transparent
    passes:
    - vert: unlit-vs:vert
      frag: unlit-fs:frag
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendSrcAlpha: src_alpha
          blendDstAlpha: one_minus_src_alpha
      properties: *props
}%

CCProgram unlit-vs %{
  precision mediump float;
  #include <cc-global>
  #include <cc-local-batch>
  #include <input>

  #if USE_VERTEX_COLOR
    in vec4 a_color;
    out vec4 v_color;
  #endif

  #if USE_TEXTURE
    in vec2 a_texCoord;
    out vec2 v_uv;
    uniform TexCoords {
      vec4 tilingOffset;
    };
  #endif

  highp vec4 vert () {
    vec4 position;
    CCVertInput(position);

    highp mat4 matWorld;
    CCGetWorldMatrix(matWorld);

    highp vec4 pos = cc_matProj * (cc_matView * matWorld) * position;

    #if USE_TEXTURE
      v_uv = a_texCoord;
      #if FLIP_UV
        v_uv.y = 1.0 - v_uv.y;
      #endif
      v_uv = v_uv * tilingOffset.xy + tilingOffset.zw;
    #endif

    #if USE_VERTEX_COLOR
      v_color = a_color;
    #endif

    return pos;
  }
}%

CCProgram unlit-fs %{
  precision mediump float;
  #include <output>

  #if USE_TEXTURE
    in vec2 v_uv;
    uniform sampler2D mainTexture;
    uniform Tex {
      float Samples;
      float Strength;
      vec2 center;
    };
  #endif

  #if USE_COLOR
    uniform Constant {
      vec4 color;
    };
  #endif

  #if USE_VERTEX_COLOR
    in vec4 v_color;
  #endif

  vec4 frag () {
    vec4 o = vec4(0);

    #if USE_TEXTURE
      //o *= texture(mainTexture, v_uv);
      vec2 dir = v_uv - center;

      for (int i = 0; i < int(Samples); i+=2) {
        o += texture(mainTexture, v_uv + float(i) / Samples * dir * Strength);
        o += texture(mainTexture, v_uv + float(i+1) / Samples * dir * Strength);
      }
      o = o / Samples;
    #endif

    #if USE_COLOR
      o *= color;
    #endif

    #if USE_VERTEX_COLOR
      o *= v_color;
    #endif

    return CCFragOutput(o);
  }
}%

高斯模糊shader

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: unlit-vs:vert
      frag: unlit-fs:frag
      properties: &props
        color:        { value: [1, 1, 1, 1], inspector: { type: color } }
        tilingOffset: { value: [1, 1, 0, 0] }
        mainTexture:  { value: grey         }
        bluramount: { value: 0.5, inspector : { displayName : "总数量" } }
        repeats: { value: 5, inspector : { displayName : "重复次数" } }
  - name: transparent
    passes:
    - vert: unlit-vs:vert
      frag: unlit-fs:frag
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendSrcAlpha: src_alpha
          blendDstAlpha: one_minus_src_alpha
      properties: *props
}%

CCProgram unlit-vs %{
  precision mediump float;
  #include <cc-global>
  #include <cc-local-batch>
  #include <input>

  #if USE_VERTEX_COLOR
    in vec4 a_color;
    out vec4 v_color;
  #endif

  #if USE_TEXTURE
    in vec2 a_texCoord;
    out vec2 v_uv;
    uniform TexCoords {
      vec4 tilingOffset;
    };
  #endif

  highp vec4 vert () {
    vec4 position;
    CCVertInput(position);

    highp mat4 matWorld;
    CCGetWorldMatrix(matWorld);

    highp vec4 pos = cc_matProj * (cc_matView * matWorld) * position;

    #if USE_TEXTURE
      v_uv = a_texCoord;
      #if FLIP_UV
        v_uv.y = 1.0 - v_uv.y;
      #endif
      v_uv = v_uv * tilingOffset.xy + tilingOffset.zw;
    #endif

    #if USE_VERTEX_COLOR
      v_color = a_color;
    #endif

    return pos;
  }
}%

CCProgram unlit-fs %{
  precision mediump float;
  #include <output>

  #if USE_TEXTURE
    in vec2 v_uv;
    uniform sampler2D mainTexture;
    uniform Tex {
      float bluramount;
      float repeats;
    };
  #endif

  #if USE_COLOR
    uniform Constant {
      vec4 color;
    };
  #endif

  #if USE_VERTEX_COLOR
    in vec4 v_color;
  #endif

  float rand(vec2 co) {
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
  }

  vec4 frag () {
    vec4 o = vec4(0.);

    #if USE_TEXTURE
      //o *= texture(mainTexture, v_uv);
      vec2 uv = v_uv;
      for (float i = 0.; i < repeats; i++) { 
        vec2 q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i,uv.x+uv.y))+bluramount); 
        vec2 uv2 = uv+(q*bluramount);
        o += texture(mainTexture, uv2) / 2.;
        q = vec2(cos(degrees((i/repeats)*360.)),sin(degrees((i/repeats)*360.))) * (rand(vec2(i+2.,uv.x+uv.y+24.))+bluramount); 
        uv2 = uv+(q*bluramount);
        o += texture(mainTexture, uv2) / 2.;
      }
      o /= repeats;
    #endif

    #if USE_COLOR
      o *= color;
    #endif

    #if USE_VERTEX_COLOR
      o *= v_color;
    #endif

    return CCFragOutput(o);
  }
}%

blurs.zip (2.2 KB)

ps:这两个的正余弦函数用得比较多，而且计算部分都是放在frag，相对来说会比较卡，慎用。。

2赞
#2

大佬要不你另外开一个新帖 专门跳这些你发的shade帖子吧？:joy: 然后那个让引擎组加精置顶就好了。

#3

这样发还好吧，内容有问题可以很容易讲清楚，要是不喜欢，帖子也很快沉的，不用有什么影响。:grin:

#4

大佬 有3.6.0以上的版本吗