Cocos Creator 3.8.x 后效处理（前向渲染）

关于怎么开启后效效果我这里不再赘述，可以前往Cocos官方文档查看具体细节：后效处理官网

下面讲一下怎么自己定义一个后处理效果，想添加自己的后效处理的话只需要在postProcess节点下添加一个BlitScreen 组件即可，然后自己去添加自己想要的材质，官方说 简单的后效可以直接将后效材质添加到 Blit-Screen 后效组件 上，复杂的后效需要自定义一个后效 pass ，但是我觉得这种方式搞的后处理效果就可以很炸裂。

1：模拟下雨雨滴掉到水面上的效果

首先创建一个shader文件，关键是这个shader文件在哪里下载呢，你可以复制一个内置的后效文件，然后在它的基础上做一下修改，比如我复制 internal/effects/pipeline/post-process/blit-screen.effect文件到自己的项目文件夹里面，但是它还依赖了一个chun文件，这时候我直接将chunk文件也直接复制过来使用，放到我自己的shaders文件夹：稍作修改：

a: 创建shader文件

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
 
CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      pass: post-process
      rasterizerState:
        cullMode: none
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: one
          blendDst: one_minus_src_alpha
          blendSrcAlpha: one
          blendDstAlpha: zero
      properties:
        color: {value: [1.0,1.0,1.0,0.5],editor: {type: color}}
}%
 
 
CCProgram vs %{
  /* 这个vs就是 我复制不来的chunk 放到shaders文件夹了 */
  #include <./vs>
  
}%
 
 
CCProgram fs %{
  /** 想要使用cc_time变量需要引入这个文件 */
  #include 
  precision highp float;
  // Maximum number of cells a ripple can cross.
  #define MAX_RADIUS 1
 
  // Set to 1 to hash twice. Slower, but less patterns.
  #define DOUBLE_HASH 0
 
  // Hash functions shamefully stolen from:
  // https://www.shadertoy.com/view/4djSRW
  #define HASHSCALE1 .1031
  #define HASHSCALE3 vec3(.1031, .1030, .0973)
 
  
 
  float hash12(vec2 p)
  {
    vec3 p3  = fract(vec3(p.xyx) * HASHSCALE1);
    p3 += dot(p3, p3.yzx + 19.19);
    return fract((p3.x + p3.y) * p3.z);
  }
 
 
  vec2 hash22(vec2 p)
  {
    vec3 p3 = fract(vec3(p.xyx) * HASHSCALE3);
    p3 += dot(p3, p3.yzx+19.19);
    return fract((p3.xx+p3.yz)*p3.zy);
  }
  in vec2 v_uv;
 
  uniform UBO {
    vec4 inputViewPort;
    vec4 color;
  };
  #pragma rate inputTexture pass
  uniform sampler2D inputTexture;
 
  layout(location = 0) out vec4 fragColor;
 
  vec3 rain()
  {
    vec2 uv = v_uv;
    uv *= 5.;
      vec2 p0 = floor(uv);
 
      vec4 time = cc_time;
      vec2 resolution = cc_screenSize.xy;
 
      vec2 circles = vec2(0.);
      for (int j = -MAX_RADIUS; j <= MAX_RADIUS; ++j)
      {
          for (int i = -MAX_RADIUS; i <= MAX_RADIUS; ++i)
          {
        vec2 pi = p0 + vec2(i, j);
              #if DOUBLE_HASH
              vec2 hsh = hash22(pi);
              #else
              vec2 hsh = pi;
              #endif
              vec2 p = pi + hash22(hsh);
 
              float t = fract(0.3*time.x + hash12(hsh));
              vec2 v = p - uv;
              float d = length(v) - (float(MAX_RADIUS) + 1.)*t;
 
              float h = 1e-3;
              float d1 = d - h;
              float d2 = d + h;
              float p1 = sin(40.*d1) * smoothstep(-0.6, -0.3, d1) * smoothstep(0., -0.3, d1);
              float p2 = sin(40.*d2) * smoothstep(-0.6, -0.3, d2) * smoothstep(0., -0.3, d2);
              circles += 0.1 * normalize(v) * ((p2 - p1) / (2. * h) * (1. - t) * (1. - t));
          }
      }
      circles /= float((MAX_RADIUS*2+1)*(MAX_RADIUS*2+1));
 
      float intensity = mix(0.01, 0.1, smoothstep(0.1, 0.6, abs(fract(0.05*time.x + 0.5)*2.-1.)));
      vec3 n = vec3(circles, sqrt(1. - dot(circles, circles)));
      vec3 color1 = texture(inputTexture, uv/resolution - intensity*n.xy).rgb + 5.*pow(clamp(dot(n, normalize(vec3(1., 0.7, 0.5))), 0., 1.), 6.);
    return color1.xyz;
  }
 
  void main () {
    fragColor = texture(inputTexture, v_uv);
    vec3 destColor = rain();
    fragColor.rgb = mix(fragColor.rgb,destColor,color.a);
  }
 
}%
 

然后创建一个材质，effect使用上面的shader文件 取名叫做rain

b: 把材质放到BlitScreen上的材质插槽

这个时候已经可以在编辑器中看到效果了。当然这个BlitScreen是一个数组，你可以在创建一个材质来再做一个效果出来，因为它是一个数组

2：模拟炸裂技能的效果

跟上一个shader文件类似，你可以在创建一个shader文件，你可以同样复制上一个shader文件

只是里面的视线变了而已，

a： 创建shader文件 ele.effect:

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
 
CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      pass: post-process
      rasterizerState:
        cullMode: none
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: one
          blendDst: one_minus_src_alpha
          blendSrcAlpha: one
          blendDstAlpha: zero
      properties:
        color: {value: [1.0,1.0,1.0,0.5],editor: {type: color}}
}%
 
 
CCProgram vs %{
  #include <./vs>
  
}%
 
 
CCProgram fs %{
  #include 
  precision highp float;
  
  in vec2 v_uv;
 
  uniform UBO {
    vec4 inputViewPort;
    vec4 color;
  };
  #pragma rate inputTexture pass
  uniform sampler2D inputTexture;
 
  layout(location = 0) out vec4 fragColor;
 
  const float PI = 3.14159265359;
 
 
float random(float p){
  	return fract(sin(p) * 10000.0);
} 
  
float noise(vec2 p){
	float t = cc_time.x / 2000.0;
    if(t > 1.0) t -= floor(t);
    return random(p.x * 14. + p.y * sin(t) * 0.5);
}
 
vec2 sw(vec2 p){
  	return vec2(floor(p.x), floor(p.y));
}
  
vec2 se(vec2 p){
  	return vec2(ceil(p.x), floor(p.y));
}
  
vec2 nw(vec2 p){
  	return vec2(floor(p.x), ceil(p.y));
}
  
vec2 ne(vec2 p){
  	return vec2(ceil(p.x), ceil(p.y));
}
 
float smoothNoise(vec2 p){
  	vec2 inter = smoothstep(0.0, 1.0, fract(p));
  	float s = mix(noise(sw(p)), noise(se(p)), inter.x);
  	float n = mix(noise(nw(p)), noise(ne(p)), inter.x);
    return mix(s, n, inter.y);
}
 
mat2 rotate (in float theta){
  	float c = cos(theta);
  	float s = sin(theta);
    return mat2(c, -s, s, c);
}
 
float circ(vec2 p){
	float r = length(p);
  // return r;
  // 防止线性变化
	r = log(sqrt(r));
  float intensity = 7.;
  // 周期性出现
	return abs(sin(.8 * r + PI * 4.0)) * 7. + 0.2;
}
 
float fbm(in vec2 p){
	float z = 2.0;
  // 每层噪声贡献的结果总和
    float rz = 0.0;
    vec2 bp = p;
    // 用于生成5层不同频率的噪声
    for(float i = 1.0; i < 6.0; i++) {
      // 随着 z 的增加，每层噪声的影响减少，模拟了自然界中细节随观察距离增加而减少的现象
    	rz += abs((smoothNoise(p) - 0.5)* 2.0) / z;
        // 振幅衰减
        z *= 2.0;
        // 频率加倍。通过将 p 加倍，实际上是在增加噪声的频率，使得每一层的噪声比上一层更“紧密”，这样就能在最终的噪声图案中创造出更多的细节。
        p *= 2.0;
    }
    return rz;
}
 
vec3 ele()
{
  vec2 uv = v_uv;
  // uv *= .5;
    vec2 p = uv - 0.5;
    vec2 resolution = cc_screenSize.xy;
    p.x *= resolution.x / resolution.y;
    p *= 10.;
    float rz = fbm(p);
    p /= exp(mod(cc_time.x * 2.0, PI));
    rz *= pow(abs(0.1 - circ(p)), 0.9);
    vec3 col = vec3(0.2, 0.1, 0.643);
    return col / rz;
}
 
  void main () {
    fragColor = texture(inputTexture, v_uv);
    vec3 destColor = ele();
    fragColor.rgb = mix(fragColor.rgb,destColor,color.a);
  }
 
}%
 

b: 创建材质文件 ele.mtl,并且放到BlitScreen中

是不是相当的炸裂