Introduction

PRB 材質(zhì)改變了人們對(duì)于引擎實(shí)時(shí)渲染畫(huà)面的理解，讓玩家在游戲中，也能夠體驗(yàn)到銹蝕的金屬，厚重的皮革，精細(xì)的紋理，感受更加真實(shí)的世界。在正式發(fā)布的 Cocos Creator 3D 中，真實(shí)感渲染和強(qiáng)大的材質(zhì)系統(tǒng)成為開(kāi)發(fā)者關(guān)注的一大重點(diǎn)。為了給 Web 和小游戲平臺(tái)帶來(lái)更好的 3D 游戲表現(xiàn)，Cocos Creator 3D 首次真正將基于物理渲染全面帶到了小游戲中，不僅支持 PBR 材質(zhì)，還將光源系統(tǒng)和渲染統(tǒng)一升級(jí)為基于物理的度量衡和算法。

在 2019 年 9 月份深圳技術(shù)分享會(huì)上，Cocos 3D 引擎開(kāi)發(fā)工程師武云瀟，為與會(huì)開(kāi)發(fā)者帶來(lái)了?Cocos Creator 3D?材質(zhì)系統(tǒng)的分享，內(nèi)容由淺及深，實(shí)機(jī)演示 3D 材質(zhì)系統(tǒng)的工作流，并準(zhǔn)備了具體的案例學(xué)習(xí)環(huán)節(jié)。
?

講師，Cocos 武云瀟

以下內(nèi)容是演講干貨整理：
?

---

Definition


要了解材質(zhì)系統(tǒng)，首先需要知道什么是材質(zhì)。

要知道什么是材質(zhì)，首先需要明確什么不是材質(zhì)。

下面我以頭盔場(chǎng)景作為案例，為大家展示講解。
?

對(duì)于這個(gè)頭盔而言，材質(zhì)系統(tǒng)到底在其中發(fā)揮了什么作用呢？

為了更直觀地說(shuō)明，我們不妨把所有材質(zhì)系統(tǒng)的貢獻(xiàn)全部剔除，看看還會(huì)剩下什么。
?

可以觀察到，除了頭盔的形狀，所有的表面細(xì)節(jié)、對(duì)光照的反饋、顏色質(zhì)感等信息都消失了。這些信息決定著一個(gè)幾何體的材質(zhì)，也是材質(zhì)系統(tǒng)控制和提供定制化的最重要的內(nèi)容。而幾何體的形狀本身，是由模型數(shù)據(jù)決定的，如果我們把這部分最原始的數(shù)據(jù)可視化出來(lái)，可以看到，這一個(gè)個(gè)分散的三角形，才是游戲世界中所有模型的本來(lái)面貌。

如果把渲染看做畫(huà)畫(huà)，材質(zhì)系統(tǒng)最重要也是最基礎(chǔ)的功能，就是在已有線稿的基礎(chǔ)上，控制如何給這里的每個(gè)三角形上色。（當(dāng)然更進(jìn)階的，也可以控制線稿本身的一些細(xì)節(jié)，甚至處理更為復(fù)雜的計(jì)算任務(wù)，如骨骼動(dòng)畫(huà)的蒙皮等）

Presentation


現(xiàn)在我們對(duì)課題有了基本的定義，就讓我們來(lái)利用引擎內(nèi)置的材質(zhì)系統(tǒng)，一層層把顏色上回去，以熟悉一些基本的工作流。頭盔模型使用的是標(biāo)準(zhǔn)材質(zhì)，背后是目前業(yè)界普遍使用的基于物理的渲染模型（PBR），是一套很好地權(quán)衡了高效和美觀的算法。
?

當(dāng)算法框架足夠合理時(shí)，視覺(jué)上的“美觀”很大程度上就取決于“信息量”了，這個(gè)模型本身是專門(mén)為展示 PBR 各個(gè)層級(jí)特性而制作的，可以看到，隨著每一層貼圖信息的加入，它們共同融合成了一套統(tǒng)一和諧的效果。

當(dāng)然材質(zhì)系統(tǒng)的任務(wù)是提供方便的定制化，所以并不和某套渲染模型掛鉤，在同樣的系統(tǒng)下，我們可以很方便地提供比如卡通渲染的支持。
?

?

（致謝：卡渲框架設(shè)計(jì)受 UTS2 啟發(fā)）

Deconstruction

這里要提一下，材質(zhì)系統(tǒng)是 Cocos 針對(duì) Creator 3D 架構(gòu)設(shè)計(jì)的，但目前 Creator 2D 從 2.1.1 版本開(kāi)始同步引入了材質(zhì)系統(tǒng)，已在使用其中大部分的前端設(shè)計(jì)，并針對(duì)渲染后端做了適配和優(yōu)化，所以今天分享的內(nèi)容對(duì)兩款產(chǎn)品均適用。

首先既然定位是小而精，那么需要明確，我們希望做到的，和我們沒(méi)有打算做到的（至少現(xiàn)階段而言）

我們希望做到：
?

• 對(duì) TA：全自動(dòng)處理書(shū)寫(xiě) shader 過(guò)程中瑣碎易錯(cuò)細(xì)節(jié)的趁手有力的工具
• 對(duì) TA：任何內(nèi)容與算法都應(yīng)不受阻礙地完成
• 對(duì)美術(shù)：以最便利、符合直覺(jué)的方法接收 TA 的產(chǎn)出，無(wú)縫連接下一步的創(chuàng)作

現(xiàn)階段不打算做到：
?

• 工業(yè)級(jí)別的 shader 語(yǔ)言轉(zhuǎn)譯/優(yōu)化器
• 使零程序基礎(chǔ)的美術(shù)也能加入 shader 創(chuàng)作流程

我們希望在 TA 和美術(shù)各司其職，各自發(fā)揮優(yōu)勢(shì)的過(guò)程中，引擎和編輯器能夠首先成為雙方合作的堅(jiān)實(shí)基礎(chǔ)和便利橋梁。最終設(shè)計(jì)也是這點(diǎn)的直接映射，一個(gè)非常小巧高效的系統(tǒng)，各自有著明確的目標(biāo)和能力：
?

• EffectAsset 是由 TA 或圖形程序設(shè)計(jì)制作，提供定制化的著色機(jī)制和數(shù)據(jù)接口
• Material 是由美術(shù)創(chuàng)建，會(huì)被大量用在實(shí)際游戲場(chǎng)景中的資源實(shí)例，負(fù)責(zé)提供所有實(shí)際使用的數(shù)據(jù)
• 所有 EffectAsset 層提供出的接口都會(huì)以最自然便利的方式在 Material 面板上呈現(xiàn)

這里舉兩個(gè)小細(xì)節(jié)，更多信息及接口文檔參考 [3]
?

• Shader 中所有 uniform 變量聲明都會(huì)在資源導(dǎo)入時(shí)解析依賴宏，并直接映射到編輯器的材質(zhì) Inspector 上

?

• TA 只需要按照標(biāo)準(zhǔn) GLSL 語(yǔ)法完成目標(biāo)邏輯，大部分繁瑣易錯(cuò)的膠水代碼可以全部通過(guò)固定解析流程自動(dòng)對(duì)接。
• 對(duì)于需要自定義這個(gè)過(guò)程的需求，有完善的 uniform 重定向，及類似 ccclass 的定制系統(tǒng) [5]

?

比如這里紅框內(nèi)的四個(gè)屬性，在 Shader 中其實(shí)是同一個(gè) vec4 的不同分量（參考 [4] 關(guān)于 UBO 成員布局的考慮，為了達(dá)到最佳性能確實(shí)會(huì)出現(xiàn)類似需求），但為了使用起來(lái)更符合直覺(jué)和便于調(diào)整，在 Effect 中為每個(gè)分量單獨(dú)增加了新的屬性，使得它們可以被獨(dú)立編輯，無(wú)論是在 Inspector 還是代碼中直接調(diào)用。

現(xiàn)在我們清楚了材質(zhì)使用層面的設(shè)計(jì)，讓我們繼續(xù)深入底層，來(lái)看看在 Effect 層面我們有哪些實(shí)用的設(shè)計(jì)。這是一份標(biāo)準(zhǔn)的 Cocos Effect 文件示例（也是引擎內(nèi)置天空盒使用的 Effect）：
?

在聲明式語(yǔ)法的大框架下，賣(mài)游戲賬號(hào)平臺(tái)已經(jīng)可以看出一些有趣且實(shí)用的選擇，它的主要特性有：

• 統(tǒng)一的 Shader 語(yǔ)法（GLSL 300 ES）
• 多 Technique 多 Pass 支持
• 標(biāo)準(zhǔn)頭文件庫(kù)、Include 機(jī)制
• 常規(guī)語(yǔ)法自動(dòng) Fallback GLSL 100
• 進(jìn)階語(yǔ)法通過(guò) __VERSION__ 宏手動(dòng) Fallback
• 大量引擎、渲染管線、運(yùn)行平臺(tái)相關(guān)的類型檢查
• 定制化 Inspector 對(duì)接集成

這背后是一直在不斷完善的 Cocos Effect 語(yǔ)法和編譯器，從設(shè)計(jì)之初理念就忠于 C 語(yǔ)言設(shè)計(jì)哲學(xué)，我們致力于提供一套明確清晰的 Shader 書(shū)寫(xiě)工具集，使得每一個(gè)細(xì)節(jié)的控制都是透明可見(jiàn)/可推導(dǎo)的。更多 Effect 相關(guān)具體特性這里不再詳細(xì)解析，可移步參考官方文檔 [4]。

Demonstration

恭喜大家堅(jiān)持到了現(xiàn)在，我們終于要進(jìn)入今天的案例環(huán)節(jié)了。今天的案例是頭發(fā)高光的計(jì)算。無(wú)論在現(xiàn)實(shí)生活還是各類動(dòng)漫游戲作品中，頭發(fā)高光都是頭發(fā)不可或缺的一項(xiàng)標(biāo)志特性，也非常討人喜愛(ài)。
?

素材來(lái)源于《Blue Reflection》，僅作學(xué)習(xí)交流使用

那么如何在游戲項(xiàng)目中實(shí)時(shí)計(jì)算這樣的高光呢？

我們先來(lái)嘗試簡(jiǎn)化問(wèn)題，這里是一個(gè)使用標(biāo)準(zhǔn)卡通渲染的球體（下圖），它的高光是按標(biāo)準(zhǔn) Blinn-Phong 模型計(jì)算的，可以看到只在光源的理想反射方向可見(jiàn)，就是一個(gè)圓點(diǎn)。
?

但如果我們把這個(gè)球體近似地看成角色頭發(fā)的話（如上圖右下角示意），其中最顯著的特征是，我們希望這個(gè)高光不是一個(gè)圓點(diǎn)，而是……一個(gè)圈。我們今天案例解析的重點(diǎn)，就是如何從物理上理解，并實(shí)時(shí)近似計(jì)算這個(gè)高光圈。參考學(xué)界的一些相關(guān)論文，這個(gè)問(wèn)題的基本思路是把每根發(fā)絲近似地看成是一個(gè)個(gè)很小的半透明圓柱體，而可以證明 [1]，在理想圓柱體上，對(duì)平行光而言，它的所有出射光線都在一個(gè)和理想反射方向傾角相同的圓錐上（如下圖中間示意）
?

我們看到的頭發(fā)上連成一圈的高光，就是因?yàn)檫@個(gè)特性而產(chǎn)生的。（聯(lián)系下現(xiàn)實(shí)生活的話，其實(shí)是發(fā)質(zhì)越好發(fā)絲越接近圓柱體，所以高光越明顯）。所以有了基本的模型，我們來(lái)擴(kuò)展一下基本的 Blinn-Phong 高光計(jì)算，讓它從單一方向變成到整個(gè)圓錐，就應(yīng)該能在這個(gè)球體上看到變化。可以很快發(fā)現(xiàn)，這個(gè)圓錐中軸與發(fā)絲方向平行，圓錐大小只是由一個(gè)與發(fā)絲方向的夾角決定的，那如何取這個(gè)夾角呢？這樣的需求，一般會(huì)使用模型的切空間數(shù)據(jù)來(lái)輔助計(jì)算，我們先來(lái)看一下這個(gè)球體的切空間數(shù)據(jù)。
?

這里做了切空間數(shù)據(jù)的可視化，圖中球體上黃色線段就是每個(gè)頂點(diǎn)的副切線，可以看出也是我們需要的“發(fā)絲方向”。當(dāng)然對(duì)于更一般的頭發(fā)模型來(lái)說(shuō)，這個(gè)方法會(huì)對(duì)模型的 uv 展開(kāi)方式有要求，要求頭發(fā)部分的 uv 縱軸應(yīng)當(dāng)與發(fā)絲方向基本一致；不過(guò)好在這種展開(kāi)方式相對(duì)普遍，制作美術(shù)資源時(shí)也經(jīng)常這樣做，所以適用性還是較為普遍的。
?

我們?cè)?shader 中可以很方便地把每個(gè)片段計(jì)算 BRDF 常用的向量（R、V、N、H、L）和副切線 (T) 取到，根據(jù)論文 [2] 中的思路，這里我們也直接用一個(gè) gaussian 來(lái)做近似，那么可以基于 Phong 著色模型，寫(xiě)一個(gè)最符合直覺(jué)、易于理解的版本：
?

其中 mr 就是通過(guò) gaussian 算出的連續(xù)的高光亮度，通過(guò)一個(gè) step 函數(shù)切出卡渲效果的硬邊。在此基礎(chǔ)上可以進(jìn)一步嘗試優(yōu)化為 Blinn-Phong，寫(xiě)出來(lái)要比想象中更高效一些：
?

這里 3 和 6 其實(shí)都是用戶可調(diào)參數(shù)，為了對(duì)接原有卡渲參數(shù)這里調(diào)整合適后硬編碼進(jìn)來(lái)，最后運(yùn)行效果是這樣：
?

?

這樣我們就有了一個(gè)適用于發(fā)絲的卡渲 shader 了，調(diào)整一下還可以控制高光寬度和位移（想一想位移參數(shù)應(yīng)該怎么加）。如果從背光面觀察可以看到還是有一部分不太真實(shí)的反射，這是因?yàn)槲覀儧](méi)有考慮方位角維度上的反射強(qiáng)度差異。并且像圖中所示那樣，我們其實(shí)只非常粗略地計(jì)算了完整發(fā)絲高光模型的主高光，即反射部分，還有更多的散射項(xiàng)沒(méi)有考慮。這里不再深入介紹，感興趣的同學(xué)，推薦閱讀下面兩篇參考論文 [1]、[2] 深入了解，并嘗試自己實(shí)現(xiàn)更真實(shí)完整高光的效果。

總結(jié)

以上是生活随笔為你收集整理的如何用 Cocos Creator 3D 如何实现小姐姐的发丝高光？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。