Cocos Creator 3.0 基于 PBR 的物理渲染詳解
Cocos Creator 3.0 的出現(xiàn)，使 Cocos Creator 升級成為全新的 2D/3D 游戲引擎，讓 2D 和 3D 游戲的開發(fā)更加便捷。目前已更新到 v3.0.1，戳鏈接了解更新詳情。
通常 3D 游戲?qū)Ξ嬅嫘Ч弯秩竟芫€的定制有很高的需求，PBR 美術(shù)工作流作為次世代主流的解決方案，今天我們來詳細(xì)地分析一下基于 Cocos Creator 的 PBR 物理渲染。
01
計算機是如何顯示顏色的
在討論這個問題之前，我們先來分析一下人眼是如何看到世界的。人眼看到物體的顏色，就是看到物體的自發(fā)光與反射周圍環(huán)境光的疊加。
物體自發(fā)光，是指物體自己發(fā)出來的光線，一般自然界的物體很少會自己發(fā)光，都是反射光源（太陽光）的光。
比如黑暗的房間中有一本書（沒有光源），我們無法看到這本書，把燈打開后，我們能看到書了，這是因為書本反射燈光到我們的眼睛，成像到視網(wǎng)膜上人眼看到的物體都是反射光源的光，為什么有些物體看上去是紅色，有些物體是藍(lán)色呢？
那是因為不同物體表面的材質(zhì)可以吸收一些光譜，比如某個物體，如果它吸收掉藍(lán)色與綠色，就會反射出紅色光。如果它可以吸掉收紅色與藍(lán)色，則反射出綠色的光。這些我們稱為物體的“本色”（baseColor/Diffuse/albedo）。物體反射光源的光叫做直接反射，反射其他物體表面反射過來的光叫做間接反射，如圖:
自然界之所以真實, 是因為由非常復(fù)雜的反射疊加而成。
3D 游戲引擎是如何處理顏色成像到攝像機的呢？其實就是模擬真實世界，并做一些取舍：
物體自發(fā)光的模擬，一般給一個自發(fā)光顏色或一個自發(fā)光貼圖。
對物體本色的模擬，就是一個物體本來顏色的貼圖（BaseColor 或 Diffuse 或 Albedo）
對物體反射的模擬, 只模擬反射光源的光（直接反射），不考慮間接反射。
模擬擋住光的反射(瓶子底部反射光，被擋住), 使用環(huán)境遮擋貼圖 (oclussion)。
計算機顯示的顏色就是經(jīng)過這個過程計算以后得到的顏色值。
02
基于經(jīng)驗?zāi)Ｐ团c PBR 物理渲染
上述 4 個過程中，只有第 3 條涉及的反射光照是最難的，也是最影響渲染效果的，同時也是計算機圖形學(xué)里面重點研究的對象。光的反射，包含兩種方式，一種是鏡面反射，一種是漫反射。如圖：
模擬光的反射，主流游戲開發(fā)中有兩種方向，一種是基于經(jīng)驗?zāi)Ｐ停硪环N是基于物理 PBR 的。
先說基于經(jīng)驗?zāi)Ｐ停鋵嵕褪翘幚矸瓷涞臅r候，通過計算公式來計算光照顏色, 這個公式基于經(jīng)驗得來。如處理漫反射，可以采用蘭伯特光照模型（公式）。處理鏡面反射可以采用馮模型與布林馮模型（這塊也是面試的時候經(jīng)常被問的，比如定制卡通渲染風(fēng)格的渲染管線經(jīng)常用經(jīng)驗?zāi)Ｐ停皇腔谖锢?PBR）。
基于 PBR 物理渲染主要是基于物理原理來模擬真實世界光的反射，雙向反射分布函數(shù)（BRDF），遵守能量守恒等，這樣渲染出來的物體效果接近于真實的世界，同時這些算法相對成熟，也不用我們?nèi)パ芯浚瑢?Shader 的時候代入公式就可以了。
03
法線與法線貼圖，高度貼圖
法線是非常重要的一個數(shù)據(jù)，光的反射計算中需要用到法線，如圖：
我們的 3D 模型是由三角形的面組成，面是由線組成，線是由頂點組成，每個頂點除了有坐標(biāo)以外還有會有法線。如圖：
我們在著色的時候，利用法線來做光的反射。如上圖，三角形面上的每個點都要反射光，每個點都要法線，而模型里面只有頂點有法線，那面上任意一點的法線如何得來呢？這個我們可以采用插值來做，如下圖：
黃色的法線是由兩個藍(lán)色法線插值而來，藍(lán)色法線由綠色的頂點法線插值而來。這樣面上每個點的法線就出來了。
我們再來講高模與低模。
為了獲得更好的物體的細(xì)節(jié)，我們建模的時候用的面數(shù)越多，細(xì)節(jié)表達(dá)就越好，光照就越細(xì)膩。但是面數(shù)越多，計算量越大，性能越差，如何能夠在面數(shù)不增加的情況下獲得更好的光照細(xì)節(jié)呢？
常用的技術(shù)就是法線貼圖，美術(shù)會建一個高精度模型，原來的一個三角面內(nèi)，在高模下有更多的三角形面，就有更多的頂點的法線。
把這些法線數(shù)據(jù)存到紋理貼圖里面，這樣低模下三角面的每個點在獲取法線的時候，就不用通過插值，而是從高模的法線貼圖里面獲得法線數(shù)據(jù)，這樣可獲得更好的光照細(xì)節(jié)。
法線貼圖技術(shù)也是次世代的標(biāo)配。除了法線以外，為了讓細(xì)節(jié)更有層次感，還有類似原理的高度貼圖。下圖是同一模型法線貼圖和高度貼圖的效果對比：
左圖（普通）；中間（法線貼圖）；右圖（法線貼圖+高度貼圖）
04
環(huán)境遮擋貼圖
什么是環(huán)境遮擋？舉個例子就明白了。
如下圖有一個陶瓷瓶，我們從瓶口看下去，由于瓶口小，會遮擋底部的部分反光，我們從上往下看，看不到底的感覺才更真實（左右圖的瓶底對比，右邊看不到底部，比左邊更真實）。
下圖就是這個瓶子的環(huán)境遮擋貼圖：
05
基于 PBR 的美術(shù)工作流
鋪墊了這么多，終于可以講解 PBR 的美術(shù)工作流了。PBR 的算法定了，算法+數(shù)據(jù)=效果，那么剩下的就是調(diào)數(shù)據(jù)就可以了。
根據(jù)上面的鋪墊，我們一起來看下 PBR 調(diào)效果的幾個部分的數(shù)據(jù)：
自發(fā)光，這個控制就是一個發(fā)光的顏色或是一個自發(fā)光的貼圖；
物體的本色，一個本來的顏色或一個本色的貼圖（Albedo/Diffuse）;
反射，包含鏡面反射+漫反射控制；
環(huán)境遮擋，使用一個環(huán)境遮擋的貼圖；
細(xì)節(jié)增強，使用法線貼圖與高度貼圖。
上面 5 個點的數(shù)據(jù)，美術(shù)的工作流程和導(dǎo)出除了反射以外其他基本都定下來了，接下來我們看下如何調(diào)整反射效果。
我們把反射分成了鏡面反射與漫反射，PBR 有兩種方式來調(diào)反射的效果，一種是基于金屬度+粗糙度，另一種是反射度與光澤度。這兩種方式的數(shù)據(jù)還可以相互轉(zhuǎn)換，就像一個顏色可以使用 RGB 基于顏色分量來調(diào)，也可以使用 YUV 來調(diào)亮度和色彩值，調(diào)好后它們之間還可以相互轉(zhuǎn)化。
金屬度 + 粗糙度控制方式，就是通過物體的金屬度來控制物體的反射率。如果物體表面材質(zhì)單一，那么用一個數(shù)值表示就可以了，金屬度越高，反射率就越強。非金屬則用 0 來表示。
如果物體表面材質(zhì)比較復(fù)雜（一個角色，戴了一個金屬盔甲），這個時候就沒有辦法用一個數(shù)值來表示了，需要把表面的金屬度存到一個貼圖里面（金屬貼圖）。粗糙度控制物體表面的光滑程度，如下:
對于表面材質(zhì)單一的物體，粗糙度也可以是一個數(shù)值，復(fù)雜物體表面的粗糙度也存在貼圖里面。
如果粗糙度與金屬度都是一個數(shù)值，可以只使用一個顏色分量（RGBA 通道）來存, 這樣就可以把金屬度與粗糙度合并到一個紋理里面，節(jié)約內(nèi)存。
反射+光澤度控制方式，通過調(diào)整反射與物體表面的光澤度來控制，這樣調(diào)整出來的效果更接近于我們真實世界的情況，控制也更加靈活。
在游戲開發(fā)中通常使用哪種模式來控制呢？我們先列舉一下兩種模式的優(yōu)缺點（面試經(jīng)常被問到）。
金屬度+粗糙度工作流
優(yōu)點：
更容易創(chuàng)作，因為各個貼圖是獨立分開的
紋理占用內(nèi)存少（單通道，可合并）
使用更廣泛
缺點：邊緣的偽像更明顯
反射與光澤度工作流
優(yōu)點：
邊緣偽影不明顯
控制靈活
缺點：
靈活控制可能導(dǎo)致不遵守能量守恒破壞 PBR 原則
RGB 貼圖多，占用內(nèi)存多
在游戲開發(fā)中我們大部分用金屬度與粗糙度工作流，工作流確定下來后，還需實現(xiàn) Shader，根據(jù)數(shù)據(jù)，把最終的效果渲染出來。這個 Shader 可以自己編寫定制，也可以使用內(nèi)置的 Shader。Cocos Creator 內(nèi)置了金屬度與粗糙度工作流的 Shader。
06
Cocos PBR Shader 參數(shù)詳解
經(jīng)過上面的講解，一個 PBR 的物理渲染需要的數(shù)據(jù)如下：
自發(fā)光與自發(fā)光貼圖;
物體本來的顏色，baseColor/Diffuse/Albedo 貼圖
金屬度、粗糙度的數(shù)值與貼圖（可選），如果有貼圖，一般可以合并到一個貼圖里面
法線貼圖，高度貼圖
環(huán)境遮擋貼圖
了解完這些以后，我們再來看 Cocos PBR Shader 參數(shù)，就很簡單了，見下圖。
法線貼圖：
物體本來顏色：
金屬度與粗糙度貼圖：
金屬度+粗糙度+環(huán)境遮擋合并的貼圖：
自發(fā)光貼圖：
環(huán)境遮擋貼圖：
物體本來顏色:
遮擋系數(shù)調(diào)節(jié)：
金屬度與粗糙度數(shù)值：
自發(fā)光顏色：
最后給出一下官方 Shader 計算的數(shù)據(jù)的說明圖：
美術(shù)導(dǎo)圖的時候，根據(jù)這個說明來制作對應(yīng)的貼圖，就可以配合 Cocos PBR Shader 來開發(fā)了。同時 Cocos 開源也可以學(xué)習(xí) PBR Shader 如何實現(xiàn)，為定制渲染管線打好學(xué)習(xí)基礎(chǔ)。
往期精彩
