快速次表面散射

• 上圖是燈光從玉石材質(zhì)的雕像的背后射出，然后照射到玉石表面上所形成的透光效果

• 左邊是沒有實(shí)現(xiàn)次表面散射的玉石效果

• 右邊是帶有次表面散射的通透感表現(xiàn)，同時(shí)還加上了Bloom泛光，從而實(shí)現(xiàn)了畫面沖擊力更強(qiáng)的場(chǎng)景

• 如果想要精確模擬次表面散射效果，需要使用光線追蹤技術(shù)，這在手機(jī)平臺(tái)上的性能開銷是比較大的

• 所以今天的關(guān)鍵詞除了次表面散射以外，還有快速，我們要在手機(jī)平臺(tái)上快速地實(shí)現(xiàn)次表面散射效果

版權(quán)聲明

• 本文為“優(yōu)夢(mèng)創(chuàng)客”原創(chuàng)文章，您可以自由轉(zhuǎn)載，但必須加入完整的版權(quán)聲明

• 更多學(xué)習(xí)資源請(qǐng)加QQ：1517069595或WX：alice17173獲?。ㄆ髽I(yè)級(jí)性能優(yōu)化/熱更新/Shader特效/服務(wù)器/商業(yè)項(xiàng)目實(shí)戰(zhàn)/每周直播/一對(duì)一指導(dǎo)）

• 點(diǎn)贊、關(guān)注、分享可免費(fèi)獲得配套學(xué)習(xí)資源

• 詳細(xì)內(nèi)容可參考文末完整視頻

次表面散射的應(yīng)用

• 左上角的圖片是人體的真實(shí)皮膚表面，平時(shí)用比較亮的光源在皮膚的背面照射皮膚時(shí)，皮膚不會(huì)完全遮擋住光線，光線會(huì)把皮膚特別是皮膚的邊緣照亮

• 右上角的圖片是玉石材質(zhì)的龍，它也有透射的效果，另外，玉石的透光性也是可以通過次表面散射模擬出來(lái)的

• 最下方的圖片是《功夫熊貓》場(chǎng)景里的畫面，最前面的角色的耳朵是比較通透的，這種通透感也可以通過次表面散射進(jìn)行模擬

開啟和關(guān)閉次表面散射的對(duì)比

課程主題

• 一、次表面散射的原理

• 二、次表面散射效果實(shí)現(xiàn)

• 三、使用內(nèi)置管線或者URP管線實(shí)現(xiàn)的次表面散射和在PBR中實(shí)現(xiàn)的次表面散射有什么區(qū)別

次表面散射原理

• 當(dāng)有一束光線射入物體的表面時(shí)，由于物體的表面可能是凹凸不平的，所以會(huì)產(chǎn)生四種類型的光線功能

1. BRDF：光線照射到物體表面時(shí)會(huì)沿著物體表面相反的方向反射出去

2. BSSRDF：燈光射入物體表面，在物體表面內(nèi)不停地反彈，最終又射出物體表面，但它和燈光直接射出物體表面是不一樣的，因?yàn)樗涑龅姆较蚴请S機(jī)的

3. BTDF：光線穿透物體的表面，形成了透徹感

• 次表面散射是由BRDF加上BTDF構(gòu)成的，也就是說(shuō)既有透射的部分，又有光線的規(guī)則反射和不規(guī)則反射部分

SSS

• 次表面散射是由背光加擾動(dòng)加擴(kuò)散這三個(gè)步驟構(gòu)成的，接下來(lái)就來(lái)看一看背光如何實(shí)現(xiàn)、擾動(dòng)如何實(shí)現(xiàn)、擴(kuò)散如何實(shí)現(xiàn)以及實(shí)現(xiàn)背光以后會(huì)有什么變化、實(shí)現(xiàn)了擾動(dòng)會(huì)有什么變化、實(shí)現(xiàn)擴(kuò)散又會(huì)產(chǎn)生什么樣的變化

背光的實(shí)現(xiàn)

• 要實(shí)現(xiàn)背面光照，可以使用背離燈光的方向向量，也就是將燈光方向L加一個(gè)負(fù)號(hào)

• 因?yàn)橹挥形矬w表面的法線方向和燈光的夾角小于90度時(shí)才是受光面，燈光方向與法線方向的夾角超過90度就沒有任何光照

• 注意點(diǎn)：

• 將燈光方向反過來(lái)再和物體表面法線方向做點(diǎn)乘得到的其實(shí)不是背光，只是讓光照的效果相反而已

• 背光在計(jì)算點(diǎn)乘時(shí)，不是和向量N做點(diǎn)乘，而是和另外一個(gè)向量：與視線向量V做點(diǎn)乘

• 這就是背光的基本原理，在編寫Shader代碼時(shí)只要用視線向量與燈光方向的反方向向量做簡(jiǎn)單的點(diǎn)乘就可以了，具體什么是點(diǎn)乘，可以參考我們的《Unity小白的TA之路》

表面擾動(dòng)的實(shí)現(xiàn)

• 上面是背光最基本的實(shí)現(xiàn)，但僅僅只是這樣實(shí)現(xiàn)的背光還是有點(diǎn)假的，所以還有一個(gè)步驟，就是對(duì)背光進(jìn)行表面擾動(dòng)

• 上圖是不帶表面擾動(dòng)的

• 上圖是帶有表面擾動(dòng)的

• 當(dāng)物體的表面不帶有任何擾動(dòng)時(shí)，它的背光會(huì)更亮，但這個(gè)背光并不能反映出物體表面方向不同，這是因?yàn)闆]有考慮到法線擾動(dòng)，所以只能得到簡(jiǎn)單的背光

• 那怎樣把法線朝向帶來(lái)的變化考慮進(jìn)去呢？方法是利用下面的公式

  $V * -（L + δN）= V * -H$

• 向量H是光照方向L與物體法線方向N的中間向量，它可以通過L + N得到，將它作為經(jīng)過表面擾動(dòng)后的向量來(lái)計(jì)算次表面散射可以使次表面散射效果更加真實(shí)

背光擴(kuò)散的實(shí)現(xiàn)

• 要實(shí)現(xiàn)背光擴(kuò)散需要用到下面的公式

• $saturate(V * -(L + δN))^p *s$

• 擴(kuò)散的實(shí)現(xiàn)并不難，就像在計(jì)算高光時(shí)調(diào)整高光的集中度或者擴(kuò)散度一樣，只需要對(duì)點(diǎn)乘的結(jié)果進(jìn)行saturate，saturate就是把點(diǎn)乘的結(jié)果限制在0到1

• 然后將0到1之間的數(shù)只乘以P次方，P越大算出來(lái)的高光效果就越集中

• 整體背光強(qiáng)度由于P次方的存在會(huì)越乘越小，要將它的整體提亮就需要再乘以一個(gè)S，這個(gè)S是超過一的數(shù)值

代碼實(shí)現(xiàn)

效果增強(qiáng)：局部厚度

• 這是經(jīng)過剛剛一系列步驟后所實(shí)現(xiàn)出的效果

• 因?yàn)橥米颖旧硎怯袷馁|(zhì)，玉石有的地方薄，有的地方厚，如果不考慮厚度就會(huì)有過曝（過度曝光）的效果（如上圖所示），只有計(jì)算厚度以后才能達(dá)到比較合理的背光效果

• 要計(jì)算厚度需要用到厚度圖

• 那么怎么看厚度圖呢？

• 比較厚的部分在圖中是比較黑的；比較薄的部分在圖里是比較亮的

• 有了厚度圖以后渲染出的效果是什么樣的呢？

• 使用厚度圖渲染出的雕像（如下）

• 沒有使用厚度圖渲染出的雕像（如下）

厚度圖的實(shí)現(xiàn)

• 實(shí)現(xiàn)代碼

商業(yè)項(xiàng)目進(jìn)階1：URP環(huán)境下多光源的處理

• 游戲中通常不止有一個(gè)方向光，比如上面左圖的方向光是從右上角射過來(lái)，它的周圍也有一些環(huán)境光

• 場(chǎng)景里也不僅僅只有方向光，比如右圖中的小兔子腿位置就放了一個(gè)點(diǎn)光源，這時(shí)由于我們的小兔子是透光的，所以能看見透光效果

• 在現(xiàn)代也不應(yīng)該僅僅只支持一盞點(diǎn)光源，還要支持多盞點(diǎn)光源，上圖右邊的小兔子身體接近頭部的位置能看到有微微泛紅的光線，這是因?yàn)槲以谀抢镌黾恿艘槐K紅色的光源

• 要開發(fā)在商業(yè)項(xiàng)目里可用的Shader就必須考慮到：

• 不僅僅要實(shí)現(xiàn)基本的光照效果，還需要實(shí)現(xiàn)多盞光照的疊加

商業(yè)項(xiàng)目進(jìn)階2：PBR與非PBR效果對(duì)比

• 實(shí)現(xiàn)PBR和不實(shí)現(xiàn)PBR在效果上究竟有什么樣的區(qū)別呢？

• 上面的每張圖都可以分成左邊和右邊，左邊的是沒有實(shí)現(xiàn)PBR，右邊是已經(jīng)實(shí)現(xiàn)了PBR

• 如果不采用PBR，那么不管環(huán)境如何變化，小兔子得到的光照都是完全相同的，不受任何間接光影響

• 實(shí)現(xiàn)了PBR后物品會(huì)受到環(huán)境光的影響

• 所以采用PBR可以使物體的效果更加真實(shí)，但PBR的實(shí)現(xiàn)是一項(xiàng)系統(tǒng)工程，它需要你去熟悉Unity的渲染框架、清楚PBR的技術(shù)原理、了解Unity是如何實(shí)現(xiàn)PBR效果的

商業(yè)項(xiàng)目進(jìn)階3：深入思考

1. 如何實(shí)現(xiàn)多光源環(huán)境下的SSS？

2. 如何實(shí)現(xiàn)正面光照的通透?

3. 如何在PBR中實(shí)現(xiàn)SSS？

4. 如何在SG中實(shí)現(xiàn)SSS？

5. 如何在ASE中實(shí)現(xiàn)SSS？

6. 二次元卡渲的PBR實(shí)現(xiàn)

寫在最后

• 更多學(xué)習(xí)資源請(qǐng)加QQ：1517069595或WX：alice17173獲?。ㄆ髽I(yè)級(jí)性能優(yōu)化/熱更新/Shader特效/服務(wù)器/商業(yè)項(xiàng)目實(shí)戰(zhàn)/每周直播/一對(duì)一指導(dǎo)）

• 點(diǎn)贊、關(guān)注、分享可免費(fèi)獲得配套學(xué)習(xí)資源

• 詳細(xì)內(nèi)容可參考下方完整視頻