這招「后期特效技能」，真是酷炫上天！

獲取方式

1. 本框架已上架 Cocos Store，請打開 store.cocos.com 并搜索 kylins 即可
2. 點擊文末閱讀原文即可跳轉(zhuǎn)到對應(yīng)頁面

寫在前面

之前麒麟子寫過一套框架，但使用很不方便。

最近麒麟子就在想，能不能實現(xiàn)一套不依賴prefab、不污染場景節(jié)點樹、簡單調(diào)用幾個參數(shù)就能使用的后期效果解決方案。

經(jīng)過一個多星期的設(shè)計與編碼，終于把它弄出來了，希望大家能夠喜歡。

開發(fā)環(huán)境

1. 引擎版本：Cocos Creator 3.3.2
2. 編程語言：TypeScript

特色功能

1. 支持原生 H5 小游戲 平臺
2. 無需修改引擎管線
3. 對場景節(jié)點樹零污染，只需復(fù)制到resources目錄，簡單調(diào)用API即可使用
4. GLOW（單個物體發(fā)光）
5. DISTORTION（屏幕扭曲，空間擾動）
6. BLOOM(全屏柔光）
7. LUT（顏色查找表后期較色）
8. 良好的架構(gòu)設(shè)計 增加新效果非常容易，且不會影響已存在的效果

動圖演示

如下圖所示點擊右上角 ... 處即可查看

以下為錄制的GIF，具體的參數(shù)釋義，在動圖之后。

操作文檔

DEMO 體驗

1. 下載后，去目錄中找到zip包
2. 解壓到一個自己喜歡的目錄
3. 打開Cocos Dashboard （請確保已安裝Cocos Creator 3.3.2版本編輯器）
4. 點擊導(dǎo)入 按鈕，即可導(dǎo)入
5. 打開項目
6. 打開 assets/test/main 場景
7. 點擊Cocos Creator 上方的 預(yù)覽按鈕，即可體驗

引入項目

1. 下載后，去目錄中找到zip包
2. 解壓到一個自己喜歡的目錄
3. 打開Cocos Dashboard （請確保已安裝Cocos Creator 3.3.2版本編輯器）
4. 點擊創(chuàng)建 按鈕，創(chuàng)建一個新的Cocos Creator 3.3.2項目
5. 打開項目
6. 將本源碼目錄中的assets/resources/kylins_post_effects拷貝到自己項目的 assets/resources 目錄下
7. 在適合的地方，參考本源碼的TestApp.ts以及 SettingsUI.ts中的寫法，開啟后效和設(shè)置后效參數(shù)

開發(fā)文檔

目錄介紹

如圖所示，框架資源放在了assets/resources/kylins_post_effects目錄下，只需要拷貝kylins_post_effects目錄到自己項目的assets/resources目錄下，就算集成成功了

用代碼開啟后效

我直接上代碼吧,簡單、直接、易使用，不是吹出來的。

export?class?TestApp?extends?Component?{
????start()?{
????????//獲取主攝像機(jī)
????????let?mainCamera?=?find('Main?Camera').getComponent(Camera);

????????//設(shè)置需要的后效（由于每一個后效都會占用若干個RenderTexture，消耗顯存，所以如果項目中有不需要的效果，則建議不要出現(xiàn)在列表中
????????let?efxList?=?[
????????????PEFX_GrapScene,?//抓取主攝像機(jī)的內(nèi)容，供所有后效使用??要確保它是第一個
????????????PEFX_Glow,
????????????PEFX_Distortion,
????????????PEFX_Bloom,
????????????PEFX_Lut,
????????????PEFX_Final?//最后呈現(xiàn)到屏幕上?要確保它是最后一個
????????];

????????PostEFXMgr.inst.setup(efxList,?mainCamera,?()?=>?{
????????????//開啟Glow效果
????????????PostEFXMgr.inst.setEfxEnable(PEFX_Glow.NAME,true);
????????????let?glow?=?PostEFXMgr.inst.getPEFX(PEFX_Glow.NAME)?as?PEFX_Glow;
????????????//設(shè)置Glow效果參數(shù)
????????????//設(shè)置模糊范圍?值越大，GLOW的溢出邊緣越大，?建議不要大于6.0
????????????glow.blurRadius?=?4.5;
????????????//設(shè)置混合強(qiáng)度?值越大越亮
????????????glow.blendIntensity?=?1.5;


????????????//開啟屏幕擾動效果
????????????PostEFXMgr.inst.setEfxEnable(PEFX_Distortion.NAME,true);
????????????let?distortion?=?PostEFXMgr.inst.getPEFX(PEFX_Distortion.NAME)?as?PEFX_Distortion;
????????????//設(shè)置擾動強(qiáng)度，值越大扭動得越厲害
????????????distortion.intensity?=?0.15;
????????????
????????????//開啟BLOOM效果
????????????PostEFXMgr.inst.setEfxEnable(PEFX_Bloom.NAME,true);
????????????let?bloom?=?PostEFXMgr.inst.getPEFX(PEFX_Bloom.NAME)?as?PEFX_Bloom;
????????????//設(shè)置全屏泛光亮閥值，?亮度大于此值的像素才會參與BLOOM效果。?如果為0，表示所有像素都會參與。
????????????bloom.luminanceThreshold?=?0.4;
????????????//設(shè)置強(qiáng)度，通過luminanceThreshold測試的像素，在BLUR之前，做的一次縮放操作
????????????bloom.intensity?=?1.5;
????????????//設(shè)置模糊范圍?值越大，亮色部分的泛光越大
????????????bloom.blurRadius?=?4.5;
????????????//與原圖合成的時候的強(qiáng)度因子，越大越亮
????????????bloom.blendIntensity?=?1.0;

????????????let?lut?=?PostEFXMgr.inst.getPEFX(PEFX_Lut.NAME)?as?PEFX_Lut;
????????????//設(shè)置LUT樣式
????????????lut.setLut(2);
????????});
????}
}

DEMO面板

1. 目前各種后期效果的默認(rèn)參數(shù)，是基于當(dāng)前DEMO場景而調(diào)整的，不同場景的參數(shù)可能會不一樣。需要針對項目進(jìn)行調(diào)節(jié)。
2. 手調(diào)太痛苦，DEMO中的調(diào)節(jié)面板，不依賴于任何框架，只和PostEFXMgr相關(guān)，如果有需要，開發(fā)者可以將此面板集成到自己的項目中進(jìn)行參數(shù)調(diào)試。
3. 調(diào)好的參數(shù)，記下來，程序啟動的時候進(jìn)行設(shè)置即可。

如何新增自己的后效

1. 閱讀PEFX_Glow.ts,PEFX_Bloom.ts等源碼
2. 實現(xiàn)getRes函數(shù)，此函數(shù)返回的是此后效需要使用圖片和材質(zhì)路徑，PostEFXMgr會在setup時進(jìn)行統(tǒng)一加載
3. 實現(xiàn)setupPasses函數(shù),一個后效由一個或者 多個Pass構(gòu)成
4. 記得在調(diào)用PostEFXMgr.inst.setup的時候，將自己的后效也加入列表中

如何指定要Glow對象

1. 找到kylins_post_effects/scripts/GlowObject.ts
2. 將此組件掛到需要Glow的對象上
3. 默認(rèn)情況下GlowObject組件的allChildren為TRUE，表示會作用到所有子節(jié)點，如果不需要，請關(guān)閉掉

如何指定要Distortion（擾動）的對象

1. 找到kylins_post_effects/scripts/DistortionObject.ts
2. 將此組件掛到需要Distortion的對象上
3. 默認(rèn)情況下DistortionObject組件的allChildren為TRUE，表示會作用到所有子節(jié)點，如果不需要，請關(guān)閉掉

注意事項

1. 此方案的實現(xiàn)手法借助了多攝像機(jī)實現(xiàn)，對layer有消耗，請參看Layer3D.ts目錄
2. 如果項目中有對layer進(jìn)行使用，請將已占用掉的layer寫到Layer3D.ts中，防止已占用的layer被用于后效渲染，導(dǎo)致不可知的渲染錯誤
3. 由于要消耗layer，因此有可能layer不夠用，當(dāng)不夠用的時候，會拋出異常。

聯(lián)系作者

• 微信公眾號：

  麒麟子隨筆 qilinzisuibi

• 微信號: qilinzi6666

• QQ群：

  727901932 （麒麟書院-Cocos3D，3000人大群）

• 關(guān)于本框架的實現(xiàn)以及每一種效果的詳解文章，將在麒麟子的私域流量圈發(fā)布，請大家加麒麟子微信 加QQ群或者關(guān)注麒麟子微信公眾號，方便第一時間獲取最新進(jìn)展