來源： Unity官方

米哈游技術(shù)總監(jiān)賀甲《崩壞3》的案例分享，包括這款人氣二次元游戲的渲染特性，動畫風(fēng)格CG渲染中使用的一些技術(shù)（例如插畫風(fēng)格的角色渲染、特殊材質(zhì)的渲染、特效的渲染及與卡通渲染適配的后期處理等），還有一些展望。

在最近的 Unite Beijing 2018 大會上，很多資深人士分享了他們用Unity游戲引擎來做游戲關(guān)卡、系統(tǒng)和動畫甚至動畫電影方面的經(jīng)驗(yàn)與技巧。

三文娛此前曾發(fā)布在皮克斯擔(dān)任過材質(zhì)師的江毅冰分享的技術(shù)方案。

今天我們繼續(xù)分享米哈游技術(shù)總監(jiān)賀甲在大會上的演講《在 Unity 上實(shí)現(xiàn)高品質(zhì)卡通渲染的效果》，略長。

下面為演講內(nèi)容：

大家好，歡迎來到Unite2018參加我們這次演講。簡單做一下自我介紹，我叫賀甲，目前在米哈游擔(dān)任技術(shù)總監(jiān)。我和我的團(tuán)隊(duì)主要關(guān)注在PBR和NPR方面的實(shí)時渲染，以及用于動畫CG和游戲的過程動畫和交互式物理的研究。目前，我們的一部分工作是利用Unity實(shí)現(xiàn)高品質(zhì)的卡通渲染。

這次演講的主題是《在Unity上實(shí)現(xiàn)高品質(zhì)卡通渲染的效果》，這些方法的實(shí)現(xiàn)針對各個平臺的特性進(jìn)行了優(yōu)化，涵蓋了從移動端，到高性能PC等不同等級的平臺。

我們先來簡要介紹一下本次演講涉及到的主要方面。首先會介紹一些應(yīng)用在移動端有關(guān)《崩壞3》的渲染特性。然后我會談?wù)剟赢嬶L(fēng)格CG渲染中使用的一些技術(shù)，例如：插畫風(fēng)格的角色渲染、特殊材質(zhì)的渲染、特效的渲染及與卡通渲染適配的后期處理等。最后一部分是關(guān)于一些雜項(xiàng)和對今后實(shí)現(xiàn)的一些展望。

首先，我們來看看在《崩壞3》的場景中使用的一些渲染特性。從下圖中我們可以看出，場景中使用了不少特效來提升表現(xiàn)力。例如：bloom后處理效果、動態(tài)粒子、平面反射、屏幕扭曲特效等。下面我們將會逐一對這些效果進(jìn)行解析。

下面展示了這些動態(tài)特效。

我們來看一下如何實(shí)現(xiàn)高品質(zhì)的反射效果。

在移動端實(shí)現(xiàn)高品質(zhì)的反射，平面反射是一個綜合了效果和性能因素較好的辦法。通常做法是以地面為對稱平面，將攝像機(jī)放置在對稱位置后渲染場景得到反射結(jié)果。

為了能表現(xiàn)出地面的金屬質(zhì)感，首先我們對反射結(jié)果應(yīng)用六邊形采樣模糊，然后使用金屬紋理細(xì)節(jié)法線貼圖來擾動反射結(jié)果，除此之外我們還使用了鏡面反射貼圖和菲涅爾效果來進(jìn)一步增強(qiáng)反射質(zhì)感。在一些遠(yuǎn)離地面高度或非水平的次要反射表面上，平面反射就不在適用，為此我們使用環(huán)境貼圖反射作為替代方案。

為了盡量減少渲染反射場景所占用的開銷，我們將反射分辨率限制在1/3以下，由于反射貼圖會經(jīng)過模糊處理， 即使降低了較多的分辨率也并不能明顯看出區(qū)別，并且我們在渲染反射的過程中還使用簡化版的材質(zhì)，并忽略一些不是很重要的小物體。

接下來讓我們看看另一個效果：全屏扭曲特效的應(yīng)用。

我們在《崩壞3》的場景中較多的使用了屏幕扭曲效果，比如：刀劍的拖尾特效，時空斷裂效果，水流瀑布及其它場景效果。

在渲染扭曲效果的過程中，我們使用3個通道來存儲扭曲的渲染結(jié)果，2個用于存儲UV偏移，另一個用于存儲扭曲強(qiáng)度Mask，扭曲強(qiáng)度Mask用于執(zhí)行深度剪裁和基于距離的強(qiáng)度控制。

使用單獨(dú)的Pass渲染扭曲結(jié)果到幀緩沖紋理對于移動平臺來說開銷較大，所以我們在最終的后處理中整合應(yīng)用了扭曲效果，相比前者要快很多。 但這種方法也可能導(dǎo)致靠前面的物體由于沒有分層處理而混入后面扭曲材質(zhì)的問題，不過考慮到移動平臺的性能限制，相對于整體效果而言這種妥協(xié)是值得的。

接下來讓我們看看bloom的實(shí)現(xiàn)，整個場景如果開啟HDR會使用 fp16格式的Render target，然后下采樣到原始大小的1/4大小以便之后的后處理流程使用。

首先，我們需要指定一個亮度閾值來提取圖像中的高亮區(qū)域，實(shí)現(xiàn)方法也并不復(fù)雜，只需從源像素減去閾值，得到的結(jié)構(gòu)就是提取后的高亮度區(qū)域，疊加這層內(nèi)容能使結(jié)果看起來更具對比并且色彩鮮艷。接下來，我們產(chǎn)生4個大小依次遞半的Render target，并將其內(nèi)容應(yīng)用半徑逐漸增大的高斯模糊。最后我們將這些模糊后的結(jié)果合并起來，以獲得最終的bloom效果。

從下面最終的效果圖我們可以看到，bloom效果不僅起到用來表達(dá)高亮區(qū)域的視覺效果，還對整個圖像的色彩中起著明顯的潤色作用。

當(dāng)完成了反射渲染，扭曲效果的及bloom 的處理后，最終就可以將這些中間結(jié)果合成在一起。我們使用filmic tone mapping與曝光和對比度控制來將fp16 HDR的原圖像轉(zhuǎn)換為最終的LDR幀緩沖。由于這些合成操作都是在一個Pass中完成的，所以即使在移動設(shè)備上也可以滿足性能方面的需求。

下面我們來介紹一下游戲中的天氣和云海的實(shí)現(xiàn)。

我們想要創(chuàng)造一個能讓玩家感受到縱深，具有各種豐富形態(tài)以及動態(tài)光照變化的云的渲染系統(tǒng)。而該系統(tǒng)也應(yīng)該易于調(diào)整和使用，方便美術(shù)可以創(chuàng)造出不同類型的云層效果。這對我們來說也是一個有趣的挑戰(zhàn)，接下來就讓我們來談?wù)勥@些功能。

首先讓我們看看渲染云所需要的資源，因?yàn)槲覀兿胍獙?shí)現(xiàn)可以24小時動態(tài)變化的風(fēng)格化云的光照效果，如果直接存儲畫好的貼圖數(shù)量就會太大而且不方便調(diào)整，所以我們使用多層著色來實(shí)現(xiàn)這一點(diǎn)。

我們使用4個通道來表示云的光照及陰影：基礎(chǔ)照明層，陰影1層，陰影2層，和邊緣光層，通過為每個圖層設(shè)置不同的顏色，我們就可以獲得不同時刻的云的色彩方案。我們一共準(zhǔn)備了8種形狀不同的云的模板，用來構(gòu)建各種不同的云海景觀。

為了構(gòu)建云海景觀，我們使用了很多朝向屏幕發(fā)射云朵的粒子發(fā)射器，并且使用不同的云的模板以及發(fā)射模式來組合出不同的云海景觀，我們實(shí)現(xiàn)了各種類型的云海以及暴風(fēng)雨天氣等，這些預(yù)設(shè)都保存在天氣配置中。此外我們還使用關(guān)鍵幀來定義天空背景和云彩的顏色。隨著時間的流逝，云的色彩就根據(jù)關(guān)鍵幀來變化。

在性能方面主要的開銷是Overdraw問題，如果我們按照固定控制的Pattern來發(fā)射云雖然可以以最小的Overdraw來獲得較好的云海密度，但可能會看起來較為重復(fù)，加入產(chǎn)生位置的隨機(jī)因素可以解決這個問題，但要想獲得看起來不那么稀疏的云海效果就需要相比固定Pattern更多的粒子數(shù)量，我們對于粒子發(fā)射配置都有細(xì)致的參數(shù)可以調(diào)整，以便在二者之間可以找到較好的權(quán)衡點(diǎn)。

這是一個24小時晝夜變化的云海景觀。

這是另一種云海景觀的晝夜變化。

這是暴風(fēng)云閃電的場景。

現(xiàn)在讓我們來看看游戲場景中使用的天氣系統(tǒng)。

我們主要通過全局霧效，Skybox顏色和方向光的設(shè)置來改變場景的天氣和氛圍。對于霧效同樣有許多參數(shù)可以調(diào)整。我們給霧效基于深度劃分為遠(yuǎn)近距離二個區(qū)間，遠(yuǎn)近區(qū)間都可以設(shè)置不同的顏色和強(qiáng)度值來創(chuàng)造各種各樣的氣氛。Skybox也可以控制天空顏色漸變，云的受光及陰影顏色等。綜合上述調(diào)整選項(xiàng)，我們就可以創(chuàng)建 晴天，雨天和大霧，多云和夜間等天氣。

另外人物的光照也會受環(huán)境的影響，主要的光照顏色由方向光決定，局部區(qū)的陰影的變化，比如：角色走進(jìn)陰影區(qū)域，由一些從關(guān)卡編輯器中手工放置的Lighting volume定義。

讓我們再來看看游戲中使用景深的情況。

移動游戲中使用景深一般并不常見，因?yàn)槌Ｒ姷木吧顚?shí)現(xiàn)對于移動平臺來講還是開銷較大，我們主要在人物選擇界面和任務(wù)簡報(bào)會話中使用景深效果來突出表現(xiàn)人物。

由于這些場景不需要景深的過度，我們使用一種特殊的方法來進(jìn)提高移動性能。不使用depth buffer做COC混合，而是使用單獨(dú)的相機(jī)直接繪制背景圖層。在應(yīng)用模糊通過后，通過將背景和前景人物組合在一起來獲得最終圖像。

為了得到更好的視覺效果，我們使用六邊形采樣模式來獲得更好的bokeh形狀。除此之外還有bokeh強(qiáng)度調(diào)整參數(shù)，以使其看起來更清晰，我們使用亮度值作為增量因子，2通常是一個合適的值。

性能方面為了保持性能的穩(wěn)定，我們模糊背景的分辨率視模糊程度而定，更大的模糊尺寸使用更低的分辨率并且更不容易察覺，我們還使用Unity內(nèi)置的曲線來描述它們之間的轉(zhuǎn)換關(guān)系。

下圖展示了動態(tài)調(diào)整模糊大小和焦散強(qiáng)度的結(jié)果。

在游戲場景中，我們還實(shí)現(xiàn)了一個看起來挺酷的效果，當(dāng)給最后一個敵人致命一擊的時候就會激發(fā)子彈時間，這時所有高速運(yùn)動的物體都會慢下來，在下雨天我們就可以明確的看到雨滴的形狀。

為了實(shí)現(xiàn)這個效果，我們使用了4個代表雨滴不同速度下形態(tài)的關(guān)鍵幀，再根據(jù)時間快慢尺度對其進(jìn)行垂直拉伸。 在正常的時間尺度下，雨滴看起來像一條直線，在時間變慢的時候逐漸縮短變成雨滴形狀。在這里我們同樣使用了動畫曲線來控制拉伸，關(guān)鍵幀選擇和時間快慢的關(guān)系，調(diào)整起來非常靈活方便。

剛才我們談到的都是一些針對移動端優(yōu)化的渲染功能，下面我們來介紹一下用于動畫風(fēng)格real-time CG或次世代游戲的渲染方法。

在過去的二年中，我們陸續(xù)制作了二個短視頻，其中體現(xiàn)了我們的新渲染風(fēng)格。

B站視頻地址：https://www.bilibili.com/video/av14260225

我們將它發(fā)布在了B站上，3天內(nèi)獲得了B站全站月榜排行第一的位置，至今已有超過300萬的點(diǎn)擊量。

B站視頻地址：https://www.bilibili.com/video/av7244731

下面我們就來談?wù)勥@些視頻中應(yīng)用到的一些實(shí)時渲染CG技術(shù)。

首先我們來看看角色的渲染，我們的目標(biāo)是實(shí)現(xiàn)完全動態(tài)的光照和陰影，所有材質(zhì)都對各種光照現(xiàn)象做出正確的反應(yīng)，包括主光源和區(qū)域環(huán)境光。這就要求我們不能使用任何在紋理上畫死的光照表現(xiàn)。

用于角色渲染的主要特性有：多通道Ramp的材質(zhì)Shading方法，眼睛，頭發(fā)和其它各向異性材料等特殊材料的處理，以及PCSS角色軟陰影和高品質(zhì)的勾線。

首先我們來看一下多通道Ramp的Shading方法。

我們希望角色的陰影和顏色的變化可以表現(xiàn)出更細(xì)膩的插畫風(fēng)格，所以我們使用2D ramp紋理來表示這些細(xì)微的變化，其中RGB通道分辨用于描述于不同陰影層的漫射陰影范圍。每個層都可以制定不同的顏色，這樣就能在明暗變化中做到精細(xì)的色彩變化控制。

對于卡通風(fēng)格的畫面，如果上色只是純明暗變化，陰影處就會顯得比較臟，缺乏表現(xiàn)力，而如果提升暗處的飽和度和色相變化，整體色彩看起來就會比較鮮活。而且通過調(diào)整垂直紋理采樣坐標(biāo)，我們可以實(shí)現(xiàn)動態(tài)的軟硬風(fēng)格轉(zhuǎn)換。 從另一角度來看這種方法還間接表現(xiàn)了皮膚的次表面散射效果。

下面四幅圖展示了多通道逐層上色疊加的效果。 大家可以看到通過一層層的上色疊加，皮膚層次細(xì)節(jié)會變得更加豐富。

上下二副圖分別展示了采樣不同位置的ramp texture所對應(yīng)的渲染效果，不同的ramp可以獲得各種不同的上色風(fēng)格。使用hard ramp比較接近Cel-shading，soft ramp則是類似與插畫柔和的陰影層次變化。

由于我們使用了2D的ramp紋理，它們之間的變化是可以動態(tài)調(diào)整的，我們可以使用ramp mask紋理來選擇每像素的ramp軟硬以實(shí)現(xiàn)插畫的手繪風(fēng)格。這個ramp mask紋理可以由美術(shù)直接在模型上進(jìn)行繪制。我們在Unity下有一個3D paint工具，使用起來較為直觀。

插畫風(fēng)格渲染的另一個重要因素是使用紋理筆觸。我們可以使用不同的筆觸紋理圖案以獲得不同的著色風(fēng)格。對于每個筆刷紋理，我們有4個通道可以存儲代表不同方向的筆刷圖案，混合使用這些筆刷可以獲得更豐富的筆刷變化。右邊的二張對比圖中，使用筆觸紋理的有著更多手繪的感覺。

下圖顯示了應(yīng)用了帶有筆觸風(fēng)格的皮膚材質(zhì)對不同光照角度的渲染結(jié)果。

接下來讓我們看看如何實(shí)現(xiàn)高質(zhì)量的邊緣光。

同樣是基于菲涅爾方法，我們有參數(shù)來控制它，比如：邊緣寬度和平滑度；除了這些全局控制參數(shù)之外，我們也使用筆刷紋理來增加一些局部變化。我們定義邊緣光既可以來自于方向光源也可以來自于環(huán)境貼圖，使用方向光我們可以按需求定義邊緣光，使用環(huán)境貼圖，我們可以根據(jù)環(huán)境光照來獲得邊緣光以顯得更真實(shí)，二者都比較有用，可以結(jié)合使用。

為避免邊邊緣光出現(xiàn)在不需要的區(qū)域，我們使用AO紋理和shadowmap來頻閉掉遮擋區(qū)域。我們可以看到，對比圖中左邊帶有邊緣光的形狀顯得效果更突出。

卡通風(fēng)格對于面部一般不會有太多陰影層次的變化，如果我們直接套用之前的ramp方法應(yīng)用在臉部，效果就會像右側(cè)的圖看起來一樣不自然，為了改善這種情況我們使用頂點(diǎn)色的一個通道作為mask來控制臉部的上色層的強(qiáng)弱，通過壓低漫反射表現(xiàn)來達(dá)到想要的卡通效果。

接下來我們來說一下高質(zhì)量角色軟陰影的實(shí)現(xiàn)。

如果我們直接使用Unity內(nèi)置的CSM陰影，在鏡頭靠近角色的時候陰影品質(zhì)并不能滿足需求，所以我們就為角色單獨(dú)渲染了一張shadowmap，以確保恒定的陰影品質(zhì)。為此我們還實(shí)現(xiàn)了基于視錐的shadowmap，根據(jù)角色的boundingbox和視錐求交集部分，以此作為渲染區(qū)域。就可以最大化陰影貼圖的使用率。

此外還使用了Variance shadow map以及PCSS來減少陰影瑕疵以及獲得自然的軟陰影效果。另外，如果要實(shí)現(xiàn)正確的透明材質(zhì)陰影，還需要額外的通道根據(jù)材質(zhì)的透明度來存儲陰影強(qiáng)度。我們可以從實(shí)例圖片中看到半透明的裙子可以投射出自然的陰影。

眼睛的處理我們使用了基于物理的折射計(jì)算。普通卡通模型處理眼部的做法通常是把眼白留空，瞳孔凹陷下去，這樣在側(cè)面的時候也不會鼓出來顯得比較自然，然而如果要做眼部近距離特寫，這種做法看上去就不能令人信服。

使用真實(shí)折射算法，眼球本身還是按照球面來做，然后根據(jù)視線角度算出折射系數(shù)去偏移查找貼圖對應(yīng)點(diǎn) 。下面對比圖顯示了有無折射的實(shí)際效果， 我們可以看到，如果沒有折射效果，眼部側(cè)面看上去較為奇怪。

此外我們還加入了光線折射后的焦散光效果，使得眼睛的質(zhì)感得到進(jìn)一步增強(qiáng)。對于非寫實(shí)風(fēng)格渲染，物理正確并不是要考慮的因素，由于卡通渲染的特殊情況，我們希望的焦散效果出現(xiàn)在入射光線的另一側(cè)，并且入射角度越平行看起來越明顯。

實(shí)現(xiàn)方法是通過入射光和眼球前向的夾角算出入射光強(qiáng)度，這里我們使用inverse diffuse來模擬，再輔助fresnel公式做亮度變化，最后乘上eye caustic紋理得到最終效果。

通過下面對比圖我們可以看到如果沒有焦散效果眼睛就顯得暗淡無光缺乏質(zhì)感。

下圖展示了眼睛的折射以及頭發(fā)的各向異性高光效果。

接下來我們就來介紹一下頭發(fā)的渲染。頭發(fā)是卡通渲染角色較為重要且獨(dú)特的部分。我們想要實(shí)現(xiàn)根據(jù)光源動態(tài)變化的高光和陰影漸變，并且這個實(shí)現(xiàn)還應(yīng)具備直觀的所見即所得的色彩調(diào)節(jié)能力。

和皮膚的材質(zhì)一樣，對于頭發(fā)的漫反射渲染我們同樣使用了 Multi-ramp 的方法，而鏡面反射高光我們則使用了二層高光做疊加，通過組合高低頻的高光成分在一起，我們可以得到滿意的結(jié)果。此外，我們還使用 Glossy Map 和 AO 紋理來進(jìn)一步增強(qiáng)頭發(fā)的質(zhì)感。

頭發(fā)的高光渲染使用了各向異性高光，相比普通的高光使用 Normal 計(jì)算光照，各項(xiàng)異性使用 Tangent 作為計(jì)算基礎(chǔ)，因此可以使高光顯示出垂直于發(fā)絲方向的形狀。

我們在制作頭發(fā)模型的時候，如果模型拓?fù)漭^為復(fù)雜，UV 展開較難做到全部垂直，我們也可以使用 Flowmap 來梳理高光的形狀。

我們還使用 Jittermap 抖動貼圖用來增強(qiáng)卡通渲染頭發(fā)的質(zhì)感。通過擾動切線方向來達(dá)到模擬發(fā)絲細(xì)節(jié)的高光效果。另外，通過調(diào)整 Jittermap 的 UV scale 還可以做到調(diào)整發(fā)絲的高光粗細(xì)。

這四張圖分解展示了各個高光成分對渲染結(jié)果的影響。而右下角的則是最終的圖像。我們可以看到，結(jié)合了低頻和高頻成分的高光顯示，頭發(fā)看起來更具表現(xiàn)力。

接下來讓我們看看另外一種實(shí)現(xiàn) Cel-shading 頭發(fā)高光的實(shí)現(xiàn)。

我們的目標(biāo)同樣是使其可以動態(tài)化，高光應(yīng)根據(jù)光源和相機(jī)位置沿發(fā)絲方向移動，形狀也應(yīng)該在移動中有著動態(tài)的形態(tài)變化。

Cel-shading 風(fēng)格的頭發(fā)高光較為獨(dú)特的形態(tài)，很難用傳統(tǒng)的高光計(jì)算方法來描述。同樣我們需要使用切線方向而不是法線來進(jìn)行高光計(jì)算，并且需要更為特殊的方法去表現(xiàn)高光形狀。

首先，我們要把每縷頭發(fā)模型在垂直方向進(jìn)行 UW 展開，以便高光可以沿著每根發(fā)束移動。然后從將每一縷從左側(cè)向右側(cè)填充 0 到 1 ，用來標(biāo)識動態(tài)生成的高光形狀的起始和結(jié)束位置，我們使用幾個曲線定義的模板來描述頭發(fā)高光的基本形狀，然后使用抖動噪聲紋理來調(diào)制頭發(fā)高光的粗細(xì)變化，

材質(zhì)方面有很多參數(shù)用來控制生成圖案的形狀。位置、偏移、寬度、抖動比例等，通過調(diào)整這些參數(shù)，我們可以根據(jù)需要獲得各種不同的形狀。

我們來看另一種各向異性材質(zhì)的例子：絲綢。這次我們使用了副法線方向來計(jì)算了高光反射，并使用三個高光層合成在一起獲得最終的渲染效果，我們?yōu)槊恳粚臃謩e設(shè)置不同的顏色，以便最終材質(zhì)看起來色彩層次較為豐富。

這里顯示了在不同的視角下，絲綢各向異性高光的反射變化。

我們的角色材質(zhì)中還包括其它特殊的材質(zhì)，例如：水晶和紗巾等半透明材質(zhì)，直接使用 Alpha 混合不能表現(xiàn)出應(yīng)有的質(zhì)感，這就需要我們實(shí)現(xiàn)折射和模糊效果，這二個效果都依賴于 Unity 的Command buffer 。

實(shí)現(xiàn)折射效果時，Command buffer 在渲染折射前獲取已經(jīng)渲染好的 Backbuffer 作為背景，用于折射采樣, Rgb 通道設(shè)置不同折射系數(shù)，分別采樣三次來模擬色散效果。

對于模糊效果，則是用 Command buffer 將 Backbuffer 降采樣并做模糊，生成 4 張尺寸依次減半模糊度遞增的 RenderTexture ，然后根據(jù)相機(jī)距離和 FOV 以及材質(zhì)固有的模糊參數(shù)，確定模糊程度，選擇對應(yīng)的 RenderTexture 來完成模糊效果。

我們還對這二者的實(shí)現(xiàn)做了一定的優(yōu)化，不對直接對 Backbuffer 使用全屏模糊，把物體本身作為Proxy mesh ，只處理需要畫的部分。

接下來讓我們來談?wù)劯咂焚|(zhì)勾線的方法。

對于角色和動態(tài)物體我們使用 Backface 勾線方法，并使用頂點(diǎn)色對勾線的寬度進(jìn)行控制，勾線本身需要連續(xù)的頂點(diǎn)法線才能在銳角邊不會出現(xiàn)斷層，因此我們將平滑過的法線存儲在另一套頂點(diǎn)色里。

此外，我們也使用頂點(diǎn)色來控制勾線寬度，例如：發(fā)尖處勾線會逐漸變細(xì)，我們通過在頂點(diǎn)顏色填充漸變?yōu)?0 的值以使線條寬度逐漸過渡到零。

另外，根據(jù)相機(jī)與物體之間的距離，還應(yīng)有基于距離修正的勾線寬度。每種材質(zhì)上也應(yīng)該有對應(yīng)的不同勾線顏色，所有這些功能都是高品質(zhì)的勾線所必需的。

Backface 勾線方法雖然可以做到較為細(xì)致的勾線還原。但也有著自身的固有缺陷，那就是不能在非邊緣的尖銳折線處產(chǎn)生勾線。 而這些折線在硬表面模型上是很常見。

為了解決這個問題，我們添加一個預(yù)處理過程來提取這些邊緣，并將它們保存到額外的 Mesh 資源中，并使用 Geometry shader 繪制它們。對于這些折線我們使用了和 Backface 法類似的調(diào)整參數(shù)，從而使它們看起來完全相同。增加了折線的繪制之后，我們可以看到右側(cè)的圖片捕獲到了更多的勾線細(xì)節(jié)。

勾線另一種常見方法就是在圖像空間中生成輪廓線。通過檢測場景圖像中 Normal 和 Depth 的不連續(xù)性，我們可以獲得細(xì)節(jié)較為豐富的勾線。無論場景的復(fù)雜性如何，這種方法的性能都是恒定的，我們還添加了對勾線顏色的色相、明度、飽和度的調(diào)整，使勾線更為自然。

這種方法的缺點(diǎn)則是較難控制勾線的寬度，如果我們想實(shí)現(xiàn)距離相關(guān)的線寬，我們只能在幾個像素的范圍內(nèi)調(diào)整它，因此基于圖像的方法主要適用于場景輪廓渲染，對于靠近攝像頭很近的物體，我們最好使用 Backface 的方法。

最后一種做法是基于筆刷的購線方法，這在離線渲染中使用的比較多，通常分為以下幾步。

輪廓線提取：從 Mesh 上提取輪廓邊，主要分為 Sharp Edge 和 Smooth Edge 二種。

連接輪廓線：根據(jù)模型的拓補(bǔ)關(guān)系，將相鄰的輪廓邊連接成盡可能長的輪廓線。

輪廓線分段：在步驟 2 的基礎(chǔ)上，根據(jù)輪廓線上曲率和可見性的變化，將輪廓線在曲率或可見性的突變處分開。

筆觸映射：將想要添加的筆觸制作成紋理，根據(jù)對應(yīng)的紋理坐標(biāo)映射到步驟3的輪廓線上。

這種方法可以達(dá)到更為風(fēng)格化，筆觸更明顯的勾線方式，Pencil+ blender 里 Freestyle render 基本都是采用類似的方法，性能開銷較大，可以用于 CG 品質(zhì)渲染，但不適合直接在游戲中使用。

接下來我們來看看其它特殊效果的實(shí)現(xiàn)，這些渲染效果在場景刻畫中同樣起到重要的作用。

這是一段用來展示體積光的場景。我們可以看到，具有霧效的體積光配合 bloom 一起使用，場景表現(xiàn)出了較強(qiáng)層次和氛圍感。

下面就來看看體積光的實(shí)現(xiàn)細(xì)節(jié)。

我們使用 Unity 內(nèi)置的曲線來體積光的形狀，這在運(yùn)行時也方便調(diào)整形狀，強(qiáng)度參數(shù)變化同樣由曲線定義。

為了進(jìn)一步模擬煙霧效果，我們還使用 3D noise 紋理來模擬動態(tài)煙霧流動的效果。Noise 煙霧本身也有一些參數(shù)可調(diào).。例如：粒度大小、尺寸比例、噪聲強(qiáng)度、流動速度等。

此外，配合 Cookie map 還可以自定義體積光投影形狀，使用 Cookie map 后同時也引入了高頻的變化成分，這就需要對應(yīng)增加采樣數(shù)來減少走樣，使用抖動算法可以減少采樣不足導(dǎo)致的走樣，我們實(shí)現(xiàn)了二種抖動方式：Bayer pattern 和 Blue noise ， 通過實(shí)驗(yàn)發(fā)現(xiàn) Blue noise 配合 Temporal AA 可以在較低的采樣數(shù)下實(shí)現(xiàn)處較好的體積光效果。

接下來我們來看一下使用 Real-time GI 的例子。

在這個簡單的演示場景中，我們使用 Enlighten 來烘焙 Real-time GI 的 Lightmap ，然后使用動態(tài)自發(fā)光材質(zhì)和體積光作為光源，我們使用 AVpro 插件解碼視頻文件，將其設(shè)置在自發(fā)光紋理上，并設(shè)置強(qiáng)度值為 1 以上。我們就可以獲得一個動態(tài)且明亮的面積光源，同時要記得更新 GICache ，以便在運(yùn)行時刻可以動態(tài)更新光照環(huán)境，當(dāng)與動態(tài)體積光一起使用時，整體的照明效果看起來令人印象深刻。

對于角色上的動態(tài) AO 實(shí)現(xiàn)，我們使用修改過的 HBAO ，用于指定 AO 區(qū)域中顏色的飽和度和色調(diào)調(diào)整，以使加入 AO 后的圖像顏色看起來不會變臟，通過對比圖我們可以看出，在應(yīng)用了 AO 之后，右圖比左圖層次感更強(qiáng)。

我們還重新實(shí)現(xiàn)了適用于卡通渲染的基于圖像的眩光效果，用于模擬鏡頭產(chǎn)生的鬼影和星形散射效果。這里使用與 Bloom 類似的方式提取的高光區(qū)域作為輸入，然后進(jìn)行多次不同方向上的卷積并應(yīng)用色彩調(diào)制來獲得最終結(jié)果。

下面我們來看幾張 CG 視頻中的截圖和特寫。

這是另一組場景截圖。我們可以看到在應(yīng)用了之前提到的這些渲染技術(shù)之后，整個場景可以更接近離線渲染的品質(zhì)。

下面的圖描述了上述場景中所應(yīng)用到的主要渲染特性。從圖中我們可以看到這些效果包括：風(fēng)格化的 PBR 材質(zhì)、卡通風(fēng)格的 AO 、屏幕空間勾線、屏幕空間反射以及曲面細(xì)分等。

綜合應(yīng)用這些效果對于高品質(zhì)的動畫風(fēng)格場景渲染起著重要的作用，我們的目標(biāo)是在 PBR 的 Shading 基礎(chǔ)上加入風(fēng)格化的調(diào)整使其更具有表現(xiàn)力。

場景中的大部分材質(zhì)都是基于物理的渲染。我們對 PBR 紋理集進(jìn)行了一些風(fēng)格化上的適應(yīng)調(diào)整，例如：對于色彩的卡通化調(diào)整，以及對于物體材質(zhì)細(xì)節(jié)的強(qiáng)調(diào)或省略。再結(jié)合使用圖像空間的勾線來強(qiáng)調(diào)物體邊緣，整體場景的表現(xiàn)就顯得更接近動畫風(fēng)格。

下圖展示了這些材質(zhì)在不同光照角度下的光影變化。

下圖展示了光影的變化。

除了場景渲染之外，我們再來看看其它一些動畫渲染所涉及的內(nèi)容，動畫表情。

我們使用 Blendshape 來制作面部表情。 眼睛，嘴巴和眉毛的表情獨(dú)立為不同的部件單獨(dú)制作，然后通過我們的自定義面部表情插件，來實(shí)現(xiàn)表情動畫的及語音嘴型的自動映射。此外，我們還可以通過預(yù)定義不同的表情集合來在交互應(yīng)用中驅(qū)動面部表情。

在 Unity 中使用 Humanoid 作為動畫導(dǎo)入方式的時候，如果關(guān)節(jié)處旋轉(zhuǎn)角度較大，按照動畫品質(zhì)的要求關(guān)節(jié)處的形狀就不能令人滿意。

為此我們通過在建模軟件中，建立了每關(guān)節(jié)修正的 Blendshape 導(dǎo)入到 Unity 當(dāng)中來防止關(guān)節(jié)變形。我們使用一個自動控制腳本根據(jù)關(guān)節(jié)旋轉(zhuǎn)角度來差值混合形狀。 為了確保更好的結(jié)果，我們?yōu)槊總€關(guān)節(jié)分別制作了二個 Blendshape ，一個用于 90 度，另一個用于 140 度以補(bǔ)正關(guān)節(jié)變形。

另外一種方法還可以使用額外的骨骼進(jìn)行關(guān)節(jié)修正。這種方法更容易制作，但是對于結(jié)構(gòu)細(xì)節(jié)的表現(xiàn)不如使用 Blendshape 。

為了可以表現(xiàn)更復(fù)雜的場景動態(tài)，比如流體和破碎的場景，我們可以使用 Alembic 格式，或者用EXR紋理作為載體從 Houdini 或其它 DCC 工具導(dǎo)入頂點(diǎn)動畫資源。Houdini 對 EXR 紋理格式導(dǎo)出頂點(diǎn)動畫提供了很好的轉(zhuǎn)換支持，對于 Real-time 的應(yīng)用而言，頂點(diǎn)動畫紋理在因?yàn)槭窃?GPU 上運(yùn)行，運(yùn)行效率及加載速度要快于 Alembic 格式。

最后，我們來談?wù)剬?shí)時卡通渲染在今后可以繼續(xù)改進(jìn)和完善的地方。

首先是實(shí)現(xiàn)所有類型材質(zhì)完全可定制的風(fēng)格化渲染，目前我們初步在人物皮膚和服裝渲染中的應(yīng)用了筆刷以獲得筆觸效果。

下一步我們希望將其擴(kuò)展到整個場景的渲染，比如新海誠式的場景風(fēng)格，以呈現(xiàn)有著獨(dú)特且統(tǒng)一的風(fēng)格化動畫風(fēng)格渲染。另外一點(diǎn)是要進(jìn)一步提高模型的渲染精度，我們希望可以實(shí)時呈現(xiàn) CG 級的模型精度?？梢試L試使用 Geometry shader 或預(yù)烘培 displacement map 進(jìn)行動態(tài)自適應(yīng)的曲面細(xì)分，相比直接導(dǎo)入原始高模，它可以極大減少資源導(dǎo)入的開銷和提升運(yùn)行效率。

最后是優(yōu)化整套流程解決方案，使之更易于實(shí)時調(diào)整和編輯，進(jìn)一步提升運(yùn)行效率以適合在游戲中使用。

好的，以上就是我們今天有關(guān)于卡通渲染要分享的主要內(nèi)容，謝謝大家！

◆END◆

............................................................

三文娛

http://www.3wyu.com

ACGN 領(lǐng)域最具影響力的產(chǎn)業(yè)研究平臺

原創(chuàng)內(nèi)容，未經(jīng)同意，嚴(yán)禁轉(zhuǎn)載。

三文娛已進(jìn)駐今日頭條、百度百家、一點(diǎn)資訊、微博、知乎、界面、網(wǎng)易、企鵝號、QQ看點(diǎn)、B站專欄、貓眼、時光網(wǎng)等，敬請關(guān)注。