接著上一個(gè)討論的話題，關(guān)于3.8.x的后效，今天來(lái)分享自定義后效來(lái)制作模糊效果，并將他應(yīng)用到彈窗中做背景，話不多說(shuō)開整。

一：最終效果

首先咱們來(lái)看官網(wǎng)自定義后效怎么搞的，從它的實(shí)例開始：自定義后效

二：定義PostProcessSettings給節(jié)點(diǎn)提供資源（通過(guò)編輯器修改參數(shù)的方式） 

首先自定義后效pass，需要一個(gè)組件用來(lái)我們可以修改具體的參數(shù)，傳入具體的數(shù)據(jù)，就要用到postProcess.PostProcessSetting這個(gè)類：

import { _decorator, gfx, postProcess, Material, EffectAsset, renderer, rendering, Vec4, Camera, CachedArray, Sprite } from 'cc';
const { Format } = gfxconst { ccclass, property, menu, executeInEditMode } = _decorator;/*** * 就是一個(gè)普通的組件 自定義后處理節(jié)點(diǎn)的資源和行為* */
@ccclass('GaussianBlur')
@menu('PostProcess/GaussianBlur')
@executeInEditMode
export class GaussianBlur extends postProcess.PostProcessSetting {/** 3d場(chǎng)景的攝像機(jī) */@property(Camera)mainCamera: Camera = null;/* 需要把后效產(chǎn)生的圖片輸出到特定的Sprite上 */@property(Sprite)preview: Sprite = null;/** 模糊材質(zhì) */@property(EffectAsset)_effectAsset: EffectAsset | undefined@property(EffectAsset)get effect() {return this._effectAsset;}set effect(v) {/** 根據(jù)傳入的模糊效果shader創(chuàng)建一個(gè)材質(zhì) 當(dāng)然你也可以在編輯器中拖入一個(gè)已經(jīng)綁定模糊shader的材質(zhì) */this._effectAsset = v;if (this._effectAsset == null) {this._material = null;}else {if (this._material == null) {this._material = new Material();}this._material.reset({ effectAsset: this._effectAsset });}this.updateMaterial();}@propertyiterations = 3;@propertyget blurRadius() {return this._blurParams.x;}set blurRadius(v) {this._blurParams.x = v;this.updateMaterial();}private _material: Material;public get material(): Material {return this._material;}@propertyprivate _blurParams: Vec4 = new Vec4(1.0, 0.0, 0.0, 0.0);public get blurParams(): Vec4 {return this._blurParams;}updateMaterial() {/** 設(shè)置材質(zhì)屬性 */if (!this._material) {return;}this._material.setProperty('blurParams', this.blurParams);}protected start(): void {if (this._effectAsset) {this._material = new Material();this._material.initialize({ effectAsset: this._effectAsset });this._material.setProperty('blurParams', this.blurParams);}}
}

 三：定義接收輸入定向輸出的節(jié)點(diǎn) SettingPass

既然是自定義管線，你做的效果總得有一個(gè)流入流出的節(jié)點(diǎn)吧，就相當(dāng)于blender里面的材質(zhì)節(jié)點(diǎn)，虛幻的藍(lán)圖，你當(dāng)前的效果是需要依賴上一個(gè)流程中的輸入才可以正常工作的，當(dāng)然你處理完了還要將處理的結(jié)果返回到渲染管線當(dāng)中去利用，再處理等等操作。所以現(xiàn)在需要定義一個(gè)這樣一個(gè)節(jié)點(diǎn)，反應(yīng)在cocos中就是SettingPass類：我們定義自己的SettingPass類

import { Camera, RenderTexture, SpriteFrame, Texture2D, UITransform, Vec2, Vec3, gfx, postProcess, renderer, rendering } from "cc";
import { GaussianBlur } from "./GaussianBlur";export class GaussianBlurPass extends postProcess.SettingPass {get setting() {return this.getSetting(GaussianBlur);}checkEnable(camera: renderer.scene.Camera) {// 判斷次后效是否開啟let enable = super.checkEnable(camera);if (postProcess.disablePostProcessForDebugView()) {enable = false;}return enable && this.setting.material != null;}name = 'GaussianBlurPass';outputNames = ['GaussianBlurMap'];private _blurPreview(camera: renderer.scene.Camera) {const setting = this.setting;let w, h;[w, h] = [camera.window.width, camera.window.height];let frame = new SpriteFrame();let texture = new RenderTexture();texture.initialize({name: "s",w