關于怎么開啟后效效果我這里不再贅述，可以前往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: vsfrag: fspass: post-processrasterizerState:cullMode: nonedepthStencilState:depthTest: falsedepthWrite: falseblendState:targets:- blend: trueblendSrc: oneblendDst: one_minus_src_alphablendSrcAlpha: oneblendDstAlpha: zeroproperties: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 <builtin/uniforms/cc-global>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 passuniform 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_HASHvec2 hsh = hash22(pi);#elsevec2 hsh = pi;#endifvec2 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: vsfrag: fspass: post-processrasterizerState:cullMode: nonedepthStencilState:depthTest: falsedepthWrite: falseblendState:targets:- blend: trueblendSrc: oneblendDst: one_minus_src_alphablendSrcAlpha: oneblendDstAlpha: zeroproperties:color: {value: [1.0,1.0,1.0,0.5],editor: {type: color}}
}%CCProgram vs %{#include <./vs>}%CCProgram fs %{#include <builtin/uniforms/cc-global>precision highp float;in vec2 v_uv;uniform UBO {vec4 inputViewPort;vec4 color;};#pragma rate inputTexture passuniform 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中

是不是相當的炸裂