騰訊遊戲主美：二次元卡通渲染有哪些黑科技？| TGDC 2020

今年，《原神》的出現讓行業注意到了三渲二這種獨特的畫風。但在二次元遊戲中，《原神》其實並非第一個吃螃蟹的人。作為騰訊遊戲魔方工作室群《王牌戰士》專案組的主美，謝海天就和他的同事們在開發中總結了不少遊戲動畫的製作經驗。

在最近由騰訊遊戲學院舉辦的第四屆騰訊遊戲開發者大會（Tencent Game Developers Conference，簡稱TGDC）上，他以演講的形式將這些經驗分享了出來，提到了與色彩、造型、動畫特效相關的渲染技術、製作手法。


以下是整理的演講內容：

大家好，我是謝海天，很高興能在這個平臺跟大家分享我近期的工作。這次分享的主題叫「從畫皮到畫骨——盤點二次元遊戲裡的黑科技」。我會從三個角度：色彩、造型、動畫特效來跟大家講一下，什麼叫黑科技。

我現在給大家放一段動畫，這是2000年的一部日本動漫電影《吸血鬼獵人D》。之所以放這段動畫，是因為我們在做《王牌戰士》時有參考於它。

這個片子有一些有意思的地方，首先它是日本動畫電影，但同時在美國院線上映，所以它代表了歐美和日本兩方的一些審美傾向；其次它是一部逐幀2D動畫電影，這就涉及到了黑科技。

我這次分享的主題：黑科技，用一句話來說就是「用3D技術還原2D卡通效果」。這裡面有兩個關鍵點，一個是3D技術，一個是2D卡通效果。3D技術就是剛才我們看到的，電影中在賽璐璐的畫面上用逐幀手繪方式來畫的。

為什麼要說是黑科技？因為我們通常看到的遊戲基本上都是用PBR技術來做一些比較寫實的效果。剛才那個片子是有一些藝術加工效果，我也想用3D的角度來還原這種2D手繪的加工效果。

色彩

我們先從色彩部分來看，這個劇照也是剛才影片裡的。我先從亮部、暗部，色彩對比關係來說。


你可以看到左邊是劇照，右邊是我從上面取出來的顏色。一眼看上去，首先右邊色板的左邊那一條是亮部色，右邊是暗部色。其實你一眼看上去能大概感覺到它的色彩有一些變化，但變化不是太大，這個就是日本傳統動漫角度的一個實現方式。

但是你從皮膚的角度來看亮部、暗部的顏色，暗部會相對偏暖一點，從它盔甲的顏色上來看，又會受到環境色的影響，所以它有點偏冷。如果你是用3D角度直接做一個3D遊戲，你不需要考慮這些東西，因為有很多現成的光線追蹤，或者說有些反彈，就可以做這件事情。但這個是我們後面會講到如何去處理的一個東西。


這張圖是從整體和區域性色彩對比關係來講，同一個角色在雨天、晴天和雪天，也有不同的色彩變化。這個也很好理解，哪怕是一個正常的電影，一個人也會有很多色彩變化。這個裡面雨天和雪天會有點接近，因為它都是屬於一個漫反射的環境。晴天由於受到陽光的照射比較強烈，整體看起來顏色跟對比度會強一些。


這是扳機社的《普羅米亞》電影。到了現在，日本的動畫顏色已經發展得非常強烈了。這個片子如果大家有興趣，可以找一些劇照和花絮來看，非常華麗。它的華麗度已經比剛才那個強烈很多，但是看久了也會視覺疲勞。

這邊很明顯能看到，我現在用線連出來的也是亮部色和暗部色。從色板上明顯就能看出來，一個是偏黃、偏綠，然後偏橘色和偏粉紅色。它把這個顏色的飽和度層級拉開得非常過，你可以看到有一些顏色頂得非常高，是RGB色，用印表機的顏色有可能會列印不出來，所以這個如果是印刷有可能會偏色。這就是他們要追求的非常強烈的視覺效果。

我們理解了這種受眾和審美以後，是如何把它用到遊戲裡的？這個就是我們遊戲裡面的角色：卡洛琳。左邊是她的原生狀態，右邊是她的一個皮膚。


你看到左邊這個角色，她全身都是非常冷的顏色，包括暗部我們也故意調成了一個偏冷的紫色，就是為了讓她的色彩能統一。但是這樣一來，她的色彩就會容易變得比較生硬。所以雖然她是黃色的頭髮，但我給她加了一個非常重的粉紅色，其實是用了一個紫色暗部做襯托。然後她的皮膚、身上衣服的暗部，用了冷色來襯托，達到一種統一效果。

另外一個是校園教練，通過對比他的頭髮就能看出，其實我們頭髮、皮膚和身體著裝的暗部都是統一的顏色，讓他看起來像是沐浴在陽光中的一個狀態。這對應剛才我講的，亮部和暗部要有色彩對比，是人為處理的。同時，它整體也要有一個色彩飽和度對比，這是一個簡單的技術說明，我就不說非常細節的內容了。


左邊第一張圖是實現出來的效果，第二張圖是我們在暗部色做的處理。你可以看到，頭髮的顏色、飽和度和色彩傾向是非常重的。最右邊的那張圖，你可以認為是個shader，其中一個過程是把黑色和白色作為陰影分離開。在黑色區域，把中間這張圖跟我們的亮部色做一個疊加混合，就得到了最終效果。

我在每一個主題都會加一個進階內容，我們會在這個基礎上留一些空間、做一些淨化，這是為了以後的技能提升。我們的審美要有追求，就會相應地做一些嘗試。


右邊這張圖是《愛，死亡和機器人》裡的一張靜幀截圖，這是一個偏美式的畫面效果，但是你可以看到，角色白色的襯衣往上有一個反射光，看起來是一個暖色的。在一部正常的電影，或者說一個稍微寫實一點的畫面裡，你不會看到這麼強烈的一個反光，這裡是在故意強調他的褲子，或者說整個環境對他白襯衣暗部的反射影響。

左邊是我做的一個模擬，我可以把它稱為卡通渲染的光線追蹤。因為它的光線追蹤並不是基於一個特別物理，或者特別寫實度的範圍，而是我給它直接指定了一個漸變。

還是看左邊那張球下面的圖，燈光顏色我給了一個暖黃色，模擬大概太陽的顏色。暗部做了一個從藍到粉紅的漸變，也就是在它的暗部罩一層藍色、冷色。這個冷色用來跟亮部的暖黃色做對比。

粉紅色會產生什麼效果呢？光線追蹤它會不停地反彈這個球的深色區域，讓這個粉紅色慢慢地滲透到暗部，包括它的投影和明暗交界線後面的區域。你會看到一個比較強烈的效果，這個工作我們現在也正在用於角色實驗當中。

這是一段視訊，左邊是我們現在的《王牌戰士》角色效果，右邊是我們正在嘗試中的畫面效果。通過對比可以看出，之前的賽璐璐效果很有特點和風格，但如果我們要繼續往下走、想要更多細節，或者說想要更多的表現力，就需要做出更多嘗試，去找到一個平衡點。


可以看到，我們現在正在進化中的，就是一些明暗交界線的色彩關係，包括高光區域的處理。現在這個角色的色彩裡就已經包含了我剛才說的光線追蹤效果，但是因為我們要在遊戲裡面實時奔跑，我們會用到一些其他的技術。

這是一個隱含的黑科技，首先要用一個非實時渲染效果做預演，然後再在引擎中實現，這兩步也是相輔相成的。因為我們做宣傳片、海報，都要在這個基礎上處理。這就代表了兩種方向，一種是賽璐璐，非常傳統的做法；另一種是未來想要進化的思路和效果。

造型

造型的部分，我從這張圖的角度來講。


首先看右邊那張圖，這個角色是我們遊戲內渲染效果。可以看到，從這邊看的話右臉頰有一個小的倒三角形，這個效果不是隨便就能做出來的，稍微懂一點打光的朋友都能瞭解，這是一個比較經典的倫勃朗三點光源產生的一種明中有暗、暗中有明的效果。如果卡通渲染想要達到這個效果，就要談到佈線的問題。

可以看到這個佈線圖，這個小的三角形一定要切出來佈線，去卡住這個光影的輪廓，你才能看到這個三角形。至於這個造型是什麼樣子，可能針對不同的角色有不同的情況，男性要硬朗一點、女性就要小一點。但是這個小的桃心形是一定要切出來的。

其次你可以看眼睛部分，眼睛肯定是個球嘛，但它有一個像凸透鏡的效果。如果你用卡通的效果去做，就要去模擬晶狀體的效果，那是一件非常消耗效能的事情。而且從賽璐璐的卡通效果來講，它不需要做得那麼物理。

所以你看這眼球，其實我們做了一個內凹的效果，它是一個凹陷的面。這個時候你再看它的光影，它看起來像是光被一個玻璃球給折射進去了一樣。

但其實人的眼睛還有一個很重要的點——瞳孔。瞳孔是非常傳神的東西，是不能被遮掉的，所以瞳孔我們單獨做了一個片放在前面。

提到瞳孔還有一個非常非常重要的點：它前面還有一個非常明顯的高光點。這個高光點是心靈的視窗，那個小的高光點如果你仔細看，會發現我們也做了一個模型在上面，可以用骨骼驅動讓它晃動起來。

再往下看嘴巴，這裡的佈線，如果稍微懂一點，大家也能知道嘴巴、眼球都是有一圈一圈的口輪匝肌、眼輪匝肌佈線。這樣它動起來時，光影會看著更自然。我們現在這個卡通渲染布線，其實從鼻底到嘴脣是沒有圈線的。

為什麼要這麼做？第一，因為卡通角色在做表情、說話的時候，有時動作是非常誇張的；第二，我們這種渲染方式不像傳統做法，它的光影非常明確，你可以看到右邊就是亮部，左邊是暗部，中間只有一條線過渡，而不是有一個明顯的光滑過渡。當這個人在做表情的時候，如果loop圈線太多，它會產生很多不必要的瑕疵影響表現。所以這個嘴巴才需要這麼做。

還有一些比較小的點，比如每一個頭發的下緣都有一個小切角。如果這個角色從正面打光，你必須要給這個頭髮的底部一個暗部，否則頭髮就會像一個薄薄的紙片貼在頭上。有了這種小切角，我可以給它人為做一個假光影，因為我預設這個角色不會經常做一些倒立、或者奇怪的光影姿勢，90%的狀態都是站在那兒看著你。

動畫特效（進階）

還有一些更進階的技術，涉及到修型和增強光影，這是我們是蹚過很多坑才實現的。先看一下這段，這是我們角色五星的出場畫面。

視訊和真正遊戲內的處理方式略有不同，視訊的自由度可能更大一點，因為相對來說，我只需要在這個鏡頭看起來對就OK了，沒必要360度轉著看，但在遊戲內就需要更嚴格一些。如果你現在這樣看感覺還比較正常，我給大家看一下沒有處理過的狀態。


初始狀態就是左邊這樣，調整完是右邊那樣。首先你看炮筒，如果單純從這個鏡頭來講，整個炮口價效比最高，同時表現效果最好的狀態，一個處理方式就是直接畫一張貼圖，給它貼到炮口，匹配現在的光影處理就OK了。這是視訊裡做得最經濟、最划算、效果最好的方式。

其次角色的處理一對比就能看出來，為什麼要做這個處理？因為我們其實還是在用3D還原2D效果。2D的效果是完全可以去畫的，但我們在3D中，如果這個角色動起來、轉起來，我就不可能保證它所有的3D光影都是完美的。

所以你可以看到，我並沒有開模型之間的自身投影，而是用面片做了遮擋。包括胳膊、袖子，都在用一些處理方式讓它變得更好看。其實預設狀態下，看起來的確有一些效果不夠好，所以收尾過程還有很多工作要做。


這裡我借用一張日本雜誌的圖片來說明，這個增強透視我們其實也在遊戲中也用到了。但我們的遊戲比較偏熱血漫，不會有這麼強烈的變形，這種動畫片就比較誇張了 。它的動作幅度、變形力度都比較大。

你可以看到左邊打一拳，臉上腫起來了，其實直接放了一個mesh在這兒。它天生有一個好處，因為光影、造型比較簡單，我直接把mesh貼到臉上，看起來就像是臉上腫起來一塊。我們在遊戲中也經常會用到這種方法。

左邊那張也是非常經典的用法，其實有時沒做這種專案的時候你也會納悶：有這個必要嗎？非要把手拉成這樣拍，有什麼意義嗎？其實你如果自己拍過照片就能感受到，當大家都站在一排，遠處有人拿相機拍的時候，在兩邊的那個人已經被拉伸得沒法看了，中間的人稍稍往後靠一點點，臉就顯得很小。當鏡頭放到這麼近再去拍，鏡頭透視就會大到非常誇張。

右邊那張，其實他的人物就是站在前面的臉和手，還有後面的人臉其實都沒有特別大的透視變形。我目測這個鏡頭FOV也就是50到60左右的正常透視狀態，所以必須得做一個空間處理。如果你現在只是單純地調相機FOV，看起來效果就非常不好了，這個也是用在視訊裡面的手法。或者說遊戲裡面也可以，但鏡頭一定要固定。

再到動畫特效的部分，這整個部分都屬於進階內容，在遊戲中這的確是比較難的一個點。動畫中間幀，對於我們一些傳統遊戲就是正常做法，都是直接用差值來算，或者說也是動畫師去做。

但如果我們要做這種二次元，或者說有一點性格的動畫，它的動畫中間幀就有很多處理方式。這個是《愛，死亡和機器人》裡的一段追逐戲，有種一閃而過的感覺。

即使你看過這個片子，可能這一下過去你都沒有意識到中間發生了什麼，但是你能感覺到他的情感表達很強烈。


看這張圖片，第一張還是正常狀態，這個人在跑，但是他在追的時候非常著急，面目猙獰。這後面三張圖都直接誇張化了，動畫中間幀如果插入這種效果、一閃而過的話，表現力會非常強。但是用的時候，也要控制一些，因為它是一個整體調性的表達。

這種動畫中間幀我們遊戲中也用到了一部分，但是沒有這麼強烈。黑白閃跟剛才的動畫中間幀蠻像的，黑白閃可以認為是整個鏡頭的一箇中間幀，黑白閃的叫法是日本叫法，但我覺得用這個片段來跟大家講更清楚一點。

這是《蜘蛛俠：平行宇宙》中間的一段，比較明顯，閃動的那一瞬間，它也是強化動作的誇張度。這個誇張度並不是說動作幅度有多大，而是說那一瞬間的情感表達要夠強烈。

其實這個電影裡用到了很多美漫的表達方式，美漫在處理強烈性格的時候會用一些比較潦草的線條表現，這個就被用到了電影中。


我們在《王牌戰士》中用黑白閃較少，在《一人之下》中用過，比如在龍虎山打鬥時，下雨天突然有閃電出息，整個畫面都變成了黑白，但這裡的黑白可能就只有三四幀。那一瞬間，啪，一個黑白閃，那個味道馬上就出來了。

有一個詞叫幀內，沒做過的同學可能不知道，你可以認為是卡通版的動態模糊。如果現在你在Photoshop或者遊戲裡可以開啟這個動態模糊，它其實就是一個功能。但回到我們剛才看的動畫片來說，那個時候在膠片上畫一個模糊的感覺是比較難的，所以他們創造了一個詞叫幀內。

在兩個幀之間由於手的擺動，會形成視覺殘留，它就不在這個過程中把手畫成一個整體。《蜘蛛俠：平行宇宙》正好有個特別合適的例子，因為這個小孩，這個平行宇宙裡有一個二次元的、蜘蛛俠的精神整合，電影裡對她的表達都是卡通做法，可能一晃而過。

我截了幾張圖，相當於是它的二維動畫版，一個動態模糊效果，它把整條線都非常具體地呈現出來了。當這種幀內充斥在專案當中時，你會很明顯地感覺到它跟寫實遊戲的區別。


我剛才提到的所有動畫，從中間幀到黑白閃，再到幀內，都用到了我剛才說的那個技術。在最後有一個比較好玩的效果，大家應該也非常熟悉了——表情線。臉上滴一滴汗、一頭黑線、有點小紅暈，都是可以做的。


這張圖左邊就是表現出來的效果，比較含蓄。我們這個遊戲就做得比較含蓄，你看右邊那個不起眼的幾條線，有紅線、有黑線，其實還有一些面部皮膚顏色的線，這個還挺重要的。這個線我可以放大，把它放在螢幕周圍，它就變成了速度線。

你仔細看他的左邊咧開的嘴角，嘴角的線其實也是我們用線擺上去的。用3D模擬的時候，它不可能在所有視角看起來都是那麼的自然，我們就需要有一些工具修補瑕疵，比如咧開嘴以後嘴巴邊緣會缺少一些黑色區域來跟他的白色牙齒做區分，我們只能用這種方式去彌補它。包括剛才說的幀內也可以用這個東西去做。

Q&A

Q1：卡通渲染在畫面表現力上有什麼優勢？玩家為什麼會認可這種表現形式？

A：你可以把它類比成影視行業，卡通渲染現在在做的事情就是在還原影視行業有過的表現形式。比如我們看過皮克斯、夢工廠的一些動畫片，它跟傳統的、寫實的動畫不一樣，有更強烈的表現力、更誇張的表現手法，而且色彩感也比較強烈，有很強烈的個人風格。

如果你對這種表現非常有興趣，你會體會到一種跟傳統、寫實題材作品不一樣的感受。我們想做到的也是這麼一件事情，玩家現在認可這種表現形式，其實也是因為市場上可以很明顯地看到，如果你在做一個作品的時候有自己的態度、表達，而且效果不差，就很容易獲得玩家的認可。

Q2：非寫實渲染的研發難度高嗎？要運用到哪些技術或工具？

A：非寫實渲染的研發絕對難度並不高，現在我在做的可能僅限於PC和手機平臺，它都是實時渲染框架。在非現實渲染框架裡，我跟TA同學也有很多交流，其實真正用到shader的複雜度並不是太高。

但是有一點在於，它需要你把技術和藝術做一些結合，或者說兩邊都要懂一些。用到的技術和工具剛才我也提到了一些，我們大部分的技術和工具都是靠自己團隊搭建的，這套工具流和技術流也都是我們自己研發的，這一點就是難度所在。

這個難度可能在於，你沒有很多現成的工具可用，我們都要基於想要的效果創造。包括我自己在跟過兩三款風格化的專案之後，我也感覺到，每一個專案的工作流和工具流都有些不一樣，針對不同專案的不同要求，會有所區分。

非常感謝大家的聆聽，希望大家過一個愉快的夜晚，再見。

來源：遊戲葡萄
原文：https://mp.weixin.qq.com/s/dODnxl23scgRgRcC_NP8Jw