在 Cocos Creator 3.8 版本中，新增了不少實(shí)用的特性，其中我最喜歡的，就是它自帶后期效果管線，并且還內(nèi)置了許多高級(jí)效果。

有用來(lái)增強(qiáng)畫面效果的?FSR,?ColorGrading?和?Bloom。

還有用來(lái)增強(qiáng) 3D 空間感的 HBAO。

以及用來(lái)抗鋸齒的 TAA 和 FXAA。

可以說，在后期效果管線的加持下，整個(gè)畫面效果有了質(zhì)的飛越。

如何啟用

今天的內(nèi)容比較簡(jiǎn)單，就是教大家如何新寫一個(gè)自己的后期效果。

在這之前，我們先來(lái)看看如何啟用后期效果。

我們用這個(gè)經(jīng)典的場(chǎng)景來(lái)做示范。

這個(gè)場(chǎng)景叫?Sponza，它包含了許多復(fù)雜的建筑結(jié)構(gòu)，方便觀察對(duì)比一些細(xì)節(jié)。所以，很多圖形渲染相關(guān)的 DEMO 都用它來(lái)做示例。

大家可以從各類模型網(wǎng)站上下載到， 也可以在 Cocos Store 中搜索?Sponza，進(jìn)行下載。

想要開啟 Cocos Creator 3.8 中的后期管線，只需要簡(jiǎn)單的 3 步。

第一步，我們需要?jiǎng)?chuàng)建一個(gè)空節(jié)點(diǎn)

Cocos Creator 中的后期效果是以組件方式管理的，所以我們需要先創(chuàng)建一個(gè)空節(jié)點(diǎn)作為載體。

我們把它起名為，?PostProcess，這樣項(xiàng)目管理起來(lái)會(huì)更加直觀。

選中它，在右邊的屬性面板中，點(diǎn)擊添加組件按鈕，找到?PostProcess，展開。

這里列出來(lái)的，就是引擎內(nèi)置的所有后期效果了。

BlitScreen?的用法比較特殊，我們后面會(huì)用到，這里先跳過。

我們把除?BlitScreen?以外的所有效果都添加到這個(gè)節(jié)點(diǎn)上。

添加的順序可以隨意，因?yàn)槊恳粋€(gè)后效都有一個(gè)優(yōu)先級(jí)，引擎內(nèi)部在使用的時(shí)候會(huì)根據(jù)優(yōu)先級(jí)進(jìn)行排序，從而確保最后合成的效果是正確的。

我們可以看到，cc.PostProcess?組件會(huì)被自動(dòng)添加到這個(gè)節(jié)點(diǎn)上，使這個(gè)節(jié)點(diǎn)成為一個(gè)后效節(jié)點(diǎn)。

第二步，打開攝像機(jī)上的開關(guān)

我們找到需要開啟后效的攝像機(jī)，在這個(gè)場(chǎng)景中，就是?Main Camera?節(jié)點(diǎn)，選中它，然后在屬性面板中勾選?Use Post Process，啟用后效。

可以看到，在?Use Post Process?下還有一個(gè)?Post Process?參數(shù)。

我們可以把想要使用的后效節(jié)點(diǎn)拖動(dòng)到這個(gè)屬性上。這個(gè)特性非常管用，我們就可以根據(jù)項(xiàng)目需要，為不同的攝像機(jī)設(shè)定特定的后效處理流程。

我們也可以讓它為空，引擎會(huì)自動(dòng)使用全局后效節(jié)點(diǎn)。

那什么是全局后效節(jié)點(diǎn)呢？ 我們來(lái)看看。

我們選中?PostProcess?節(jié)點(diǎn)，在?cc.PostProcess?組件里，可以看到， 它有一個(gè)?Global?屬性。

如果它被勾選，表示它是一個(gè)全局后效。開啟了?Use Post Process?但?Post Process?參數(shù)為空的攝像機(jī)，會(huì)來(lái)使用它。

如果如果取消勾選，那么這個(gè)后效只會(huì)在引用它的攝像機(jī)上被使用。

需要注意的是，不管哪種情況，一個(gè)攝像機(jī)只會(huì)執(zhí)行一個(gè)后效流程。 如果一個(gè)場(chǎng)景中有多個(gè)全局后效節(jié)點(diǎn)，攝像機(jī)會(huì)使用最選找到的那一個(gè)。

我們可以發(fā)現(xiàn)，還是沒有效果。 這是因?yàn)樵?Cocos Creator 3.8 中，內(nèi)置管線還不支持后效，需要切換到自定義管線。

第三步，開啟自定義管線

打開項(xiàng)目設(shè)置面板，切換到功能裁剪標(biāo)簽，啟動(dòng)自定義管線。

然后選擇宏配置，填寫好自定義管線名稱。 我們用的是默認(rèn)的自定義管線，所以填?Custom?就可以了。

由于切換了管線，我們想要在 Cocos Creator 場(chǎng)景編輯器內(nèi)看到效果的話，需要刷新一下 Cocos Creator。

我們可以關(guān)閉 Cocos Creator 再打開。也可以按下快捷鍵?CTRL + R?刷新 Cocos Creator。

可以看到，渲染窗口中的效果發(fā)生了變化。

我們調(diào)配置一些參數(shù)，讓整個(gè)畫面看起來(lái)更好些。

可以看到，當(dāng)我們改動(dòng)屬性面板上的參數(shù)時(shí)，編輯器中就能實(shí)時(shí)看到對(duì)應(yīng)的變化，非常方便。

值得說明的是，第三步只是當(dāng)前版本需要，在后面的版本，比如 3.9 中，就不需要了。

關(guān)于每一個(gè)后期效果的屬性介紹和使用方法，在 Cocos 引擎官方文檔中都有解釋。

并且呢，也有很多朋友分享了這方面的內(nèi)容，大家可以去找找看，我們今天就不多說了。

接下來(lái)我們進(jìn)入今天的主題：如何編寫一個(gè)自己的后期效果 Shader。

后效 Shader 編寫

后效 Shader 的編寫，需要用到剛剛我們提到過的 BlitScreen 組件， BlitScreen 的作用就是將屏幕內(nèi)容再繪制一次。

選中 Post Process 節(jié)點(diǎn)，在右邊的屬性面板中，我們給它添加一個(gè) BlitScreen 后效。

可以看到，BlitScreen 上有一個(gè)材質(zhì)參數(shù)。

這個(gè)材質(zhì)就是決定繪制效果的關(guān)鍵。

接下來(lái)，我們只需要實(shí)現(xiàn)一個(gè)后效 Shader，并創(chuàng)建一個(gè)材質(zhì)就可以了。

BlitScreen

Cocos Shader 編寫，最快的方法就是從引擎提供的模板開始。

我們先找到引擎內(nèi)置的后效 Shader。

在資源面板中，我們定位到?internal/effects/pipeline/post-process/。

可以看到，引擎內(nèi)置的后效 Shader 都在這里。 有興趣的朋友可以自行去研究。

我們雙擊打開要用到的?BlitScreen。

可以看到它非常簡(jiǎn)單，它的?vs?引用的是一個(gè)公共頭文件，我們打開看看。

可以看到，它幾乎什么都沒有做，只是輸出了用來(lái)繪制屏幕內(nèi)容的位置信息以及我們?cè)趂s中需要用到的紋理坐標(biāo)。

而在它的?fs?中，也只是將屏幕顏色原封不動(dòng)地輸出來(lái)。

接下來(lái)，我們就基于它來(lái)實(shí)現(xiàn)一個(gè)可以改變畫面顏色的后效。

實(shí)現(xiàn) Shader

我們選中?BlitScreen，右鍵選擇 復(fù)制。

然后在?assets?目錄下 右鍵選擇 粘貼。 把它改名為?effect-post-color，雙擊打開。

這里的?include?的路徑是不能用的，我們需要修改一下。 最簡(jiǎn)單的辦法是直接把?vs?里的內(nèi)容復(fù)制粘貼過來(lái)。

然后，我們添加一個(gè)?color?屬性，用來(lái)設(shè)置目標(biāo)顏色。

我們還需要定義一個(gè)對(duì)應(yīng)的?uniform。

找到?CCProgram fs?中的?UBO，在這里添加一個(gè)?vec4 color;

最后就是顏色合成了。 我們把?color.rgb?與原圖顏色的乘積用來(lái)做目標(biāo)顏色

再把?color.a?作為混合因子與原圖插值。

我們的后效 Shader 就寫好了。完整?Shader?代碼如下，...?表示未做修改。

CCEffect?%{
??techniques:
??-?passes:
????...
??????properties:
????????color:?{?value:?[1.0,1.0,1.0,0.5],?editor:?{?type:?color?}?}
}%

CCProgram?vs?%{
??...
}%

CCProgram?fs?%{
??...
??uniform?UBO?{
????...
????vec4?color;
??};
??...
??void?main?()?{
????fragColor?=?texture(inputTexture,?v_uv);
????vec3?destColor?=?fragColor.rgb?*?color.rgb;
????fragColor.rgb?=?mix(fragColor.rgb,?destColor,?color.a);
??}
}%


現(xiàn)在我們來(lái)看看它的效果。

回到 Cocos Creator 中，新建一個(gè)材質(zhì)，起名為?mat-post-color，然后把它的?effect?切換為剛剛寫好的?effect-post-color。

選中?Post-Process?節(jié)點(diǎn)，把它拖動(dòng)到它的?Material?屬性上。

調(diào)節(jié)參數(shù)，可以看到渲染效果跟著變化了。

我們的自定義后期效果 Shader 就完成了。

總結(jié)

需要注意的是，采用今天介紹的這種方法，只能實(shí)現(xiàn)單?Pass?的后期效果，比如 像變灰，蒙板 等等。

如果想要實(shí)現(xiàn)一些需要多?Pass?才能實(shí)現(xiàn)的效果，比如運(yùn)動(dòng)模糊，景深 等效果，就需要使用代碼配合。我會(huì)在下一期文章中進(jìn)行分享。

好啦，今天的內(nèi)容就到這里，希望能夠給大家?guī)?lái)幫助。

關(guān)注 麒麟子MrKylin（全網(wǎng)同名），查看更多圖形引擎與游戲開發(fā)內(nèi)容。