人物的卡通渲染:方案匯總與選擇

2021-02-16 南研所菲爾茲實驗室

一、描邊

①視線法線夾角

計算視線與法線的夾角的餘弦值,太大了就是邊緣。可以通過閾值或者(一維)紋理採樣的方法來控制描邊寬度,但是作用有限。因為在box之類的幾何體上,視線法線夾角大小不一,同一個物體上可能寬度會變化很大,描邊寬度不好控制。

優點:簡單,就在原來的pass裡加幾行代碼就搞定,也不用渲染紋理什麼的。

缺點:描邊寬度受限於模型。可能有些模型用不了這種方法。

②後處理邊緣檢測

在後處理中,在深度緩衝(或把法線寫進一張渲染紋理)上用Sobel算子進行邊緣檢測。但是Sobel算子等濾波模板會大量採樣,而且不談採樣它們本身的計算量也不小。所以可以只讓需要的物體描邊,讓這些物體渲兩個pass,第二個pass進行邊緣檢測。但是這樣渲染負擔會隨場景複雜度提升而提升,這時候另一個做法是讓想描邊的幾個物體寫進stencil buffer,然後後處理的時候在通過模板測試的地方進行邊緣檢測,雖然這樣就不能每個物體單獨制定描邊顏色了。

優點:開銷固定,都是一整個屏幕。鏤空的地方也可以描邊,因為鏤空的地方雖然在mesh上是實心的,但是它們不會寫入深度緩衝。

缺點:描邊寬度仍然不好控制。而且我尋思在移動平臺上用後處理本身就很蛋疼了,就算是只用深度緩衝(不把法線寫進一張渲染紋理),濾波模板帶來的大量採樣也會給行動裝置的帶寬造成很大的壓力。只是個人猜想

③擴大背面

渲兩個pass,後一個pass就正常地渲正面,前一個pass用黑色或別的深色渲背面,但是要在vertex shader裡把背面撐大一點(沿法線擴張),這樣邊緣上會多出來一圈黑的。或者不撐大,讓背面往前挪一點,邊緣處會穿插出來,也看來像描邊,只不過是在輪廓以內描的(撐大的方案是在輪廓以外描的)。但是往前挪的話,描邊寬度受限於三角面的角度。還可以根據遠近實時調整描邊的寬度,也就是根據z值調整頂點擴張的距離。

優點:簡單,性能友好。可以逐頂點地控制描邊寬度(頂點色裡存儲該處的擴張距離)。

缺點:對於有內凹的模型,背面面片會遮擋正面面片。

我選③。

二、著色

漫反射方案選擇:

①Tone Based Shading(漸變,類似半蘭伯特光照)

計算光線和法線的餘弦值,以前是會把負的也就是背光出的餘弦值直接截到0,但是現在還是讓它參與計算。最背光的地方(dot=-1)指定一個冷色,最向光(dot=1)的地方指定一個暖色。然後用餘弦值在兩個顏色之間差值。


優點:大概是不用採樣紋理,漫反射顏色直接是計算出來的。不採樣紋理對移動平臺的帶寬貌似就友好一點

缺點:太美式了(其實也談不上缺點,風格差異而已,只是這篇的主題是日本二次元),而且留給藝術家控制的餘地不大。

②Cel Shading(突變,純色色塊)

風格上來說就是明暗之間有一個很楞的交界線,是明暗是突變過去的。實現上最好是不要粗暴地把光線和法線的餘弦值用閾值砍一刀,那樣鋸齒比較難搞,手機又不能開抗鋸齒。要用smoothstep之類的東西抗鋸齒又會有額外的性能消耗。而且就明暗兩個階梯還好,多了怎麼辦,用一串if嗎,shader性能會爆的. 所以所以最好是用一個紋理來控制,用法線-光的餘弦值去採樣這個查找表,這樣的話方便藝術家控制,想稍微要一點柔和的漸變的話在紋理上塗抹模糊一下就可以了,而且想要好幾個階梯的明暗變化也不成問題。


優點:很好很日本()。留給藝術家的發揮空間大。既然都用紋理了,紋理坐標多出來的一個維度豈不是浪費了,還不如一個維度是光線-法線夾角,另一個維度是視線-法線夾角,來做個rim light(邊緣光),不過這樣藝術家就有點辛苦了. 我倒是在想有沒有什麼機制或者插件能夠把藝術家畫的紋理實時體現(渲染)出來,每畫一筆就能看到效果(扯遠了

缺點:大概是又多了一張貼圖要採樣吧。這種彩色的貼圖還不能跟別人合併通道(?),移動平臺帶寬悲鳴(心痛 所以整個16×16的貼圖就可以了,大了也沒意義。

我選②(

More about 日本二次元:

既然都二次元了我們就快樂地二次元到底叭,關於這個日本二次元渲染再說幾句。漫反射這裡還可以加上次表面散射的貼圖和AO,沒什麼高大上的,無非是給藝術家和帶寬增加一點痛苦而已,不想給帶寬增加痛苦就合併顏色通道叭。

光一個漫反射肯定還不夠。還有很多與視角相關的成分,rim light剛才在②的優點裡已經提到過了。高光的話甚至可以繼續用glossness和specular的貼圖,這個意思有點類似於PBR流程裡的光澤度和金屬度貼圖(?)。當然還是可以合併通道的啦。

三、頭髮的高光

可以把頭髮在微觀層面上抽象成直徑小於一個像素的圓柱體:


高光計算中,half-way向量與法線越接近,高光就越強。如果是普通的平面,法線方向是固定的,所以如果half-way向量和法線偏很多,高光就較弱。但是既然頭髮是圓柱體,而且這個圓柱體直徑小於一個像素,那麼這一個像素裡可以認為這個表面有很多個朝向,哪個朝向能更好地把光線反射到我們眼睛裡,哪個朝向的影響就越大。也就是說,可以認為這裡的法線是能夠自動適應half-way向量、自動旋轉到與光線和視線共面。

接下來我們來看看這個高光項具體怎麼計算。這裡的法線是旋轉的,不是固定值,所以就不能像傳統的Blinn模型那樣拿法線和half-way向量做點積。但是可以觀察到,切線、half-way向量、法線在此時是共面的,且切線和法線成直角,所以想要求法線和half-way向量的點積(餘弦值),直接求切線和法線的正弦值就可以了,切線是已知的是固定的。

從宏觀上來看,這樣計算會讓高光沿著髮絲的垂直方向伸展。

但是這還不夠。實際的頭髮高光在髮絲的方向是有鋸齒狀的擾動的。這是因為不同的頭髮與頭髮之間的切線方向是不同的,髮絲的走向方向不一樣,有點往頭裡鑽,有的往頭外邊冒,他們不是一路都肩並肩順順地長下來的,這樣高光就看起來「上下顫動」:


為了顫動。讓切線往法線(指mesh的法線)方向偏移就可以了,可以用一張噪聲控制偏移的方向和程度:


仔細觀察會發現,上上圖裡有兩條光帶,一條強烈的白色的高光,和一條較弱的有顏色的高光(此處暫且稱為「次高光」)。次高光的特點是帶顏色,而且更向髮根偏移,強度較弱。那麼我們計算兩個不同的高光然後疊加,其中次高光用前一段提到的方法偏移,只不過加一個向髮根偏移的基礎偏移量罷了。

至於怎麼把這種方法轉換成日本二次元的,二次元的特點是明暗是突變的。那麼還是用梯度漫反射的老方法(Cel Shading)來處理高光,用高光項採樣一個Ramp貼圖即可。

四、邊緣光

也就是前面講到的rim light。Cel shading的Ramp貼圖裡,紋理坐標多出來的一個維度豈不是浪費了,還不如一個維度是光線-法線夾角,另一個維度是視線-法線夾角,來做個rim light(邊緣光)。

五、杜絕臉上的硬光照

看日本二次元的人物畫比較多的盆友會注意到,臉部的光一般都顯得比較「平」,也就是和美國西部漫畫的硬漢的陰陽臉形象相差較大:


其實就是說光源的方向不能是垂直於視線方向的,不然就會把明暗部之間的強烈對比呈現出來,那樣不日本。一個解決辦法是專門為臉部補一個光,光源是從觀察者這邊射出去的。

造成陰陽臉的除了臉的表面和光的朝向,還有各種陰影。我們常說紙片人,但是臉的實際模型肯定不可能是一個片,有幾何的起伏勢必會造成陰影。所以可以加一個陰影mask,由美術來指定哪裡可以接受陰影,哪裡不可以。

還有一個是,我們形容某個人好看的時候,會說他好像在發光。其實他可能真的在發光,這也就是自發光,或說emission,數學上只是簡單地把畫好的albedo色加上明暗,而不是乘上明暗(可能這個描述不太準確)。也就是說就算是在暗處也能保持一定的明度,不會有死黑。

杜絕陰陽臉,除了不能有特別暗的地方(背面暗部、陰影),還不能有特別亮的地方(邊緣光、高光)。

上一節講到邊緣光,邊緣光在下眼瞼/顴骨上方等臉上的地方最好就是不要出現了。這個同樣可以加一個mask控制。

高光也是一樣,臉上就免了,況且顯得油多

總結一下:

不要太暗:①面部補光;②陰影mask; ③自發光。

不要太亮:①邊緣光mask;②不要高光。

六、參考

都是各位大佬智慧的結晶:

3D日式卡通人物渲染的經驗分享
https://gameinstitute.qq.com/community/detail/100050
卡通渲染及其相關技術
https://zhuanlan.zhihu.com/p/26409746
簡易二次元角色渲染風格(一)
http://walkingfat.com/

相關焦點

  • 《崩壞3》如何做卡通渲染?
    渲染中使用的一些技術(例如插畫風格的角色渲染、特殊材質的渲染、特效的渲染及與卡通渲染適配的後期處理等),還有一些展望。三文娛此前曾發布在皮克斯擔任過材質師的江毅冰分享的技術方案,點擊可回顧:從3A遊戲到實時渲染的動畫電影,他們是怎麼做到的?今天我們繼續分享米哈遊技術總監賀甲在大會上的演講《在 Unity 上實現高品質卡通渲染的效果》,略長。下面為演講內容:大家好,歡迎來到Unite2018參加我們這次演講。
  • GGXrd賽璐珞卡通渲染風格實現分析學習
    NPR(Non-photorealistic rendering )非真實感渲染,NPR的目的主要是為了模擬藝術化的繪製風格,大多數應用到3D遊戲中的NPR被我們稱為「卡通渲染」,《GUILTY GEAR Xrd -SIGN-》(罪惡裝備,以下簡稱GGXrd)算是其中的佼佼者了,所以最近對它的賽璐珞卡通渲染做了一下研究學習
  • UE4卡通渲染
    使3D遊戲看起來像是2d卡通動畫。
  • 二次元角色卡通渲染—眼睛篇!
    寫一下卡通眼睛的渲染,雖然眼睛區域屏佔比很少,不過在一些特寫鏡頭下,眼睛的表現也是十分重要的,本次梳理一下卡通角色眼睛的製作,解析一下為什麼以及怎麼做
  • 米哈遊技術總監分享:如何用Unity做出高品質的卡通CG渲染?
    在Unite 2018大會中,米哈遊技術總監賀甲就曾分享過《崩壞3》:在Unity中實現高品質的卡通渲染。本文將由米哈遊技術總監賀甲分享米哈遊最新動畫短片《八重櫻 · 桃源戀歌》中的製作技術。米哈遊使用Unity實時渲染的MMD次世代動畫短片《八重櫻 · 桃源戀歌》,今年2月在B站發布以來,獲得了260多萬的播放量。
  • 盤點6大經典卡通角色的3D渲染效果
    幾乎每個人都有對於童年時期觀看的卡通電影裡的某些角色,有著深刻的印象。例如,海綿寶寶,又或者是比卡丘。不得不說的是,曾經的動畫技術沒有如今這般先進,因此所展現的角色和畫面沒有辦法和如今相比較。而在今天的文章裡,小編就要帶來,6大經典卡通角色的3D渲染效果。1、派大星派大星無疑是《海綿寶寶》裡的一個經典角色,它是一個粉紅色的海星。這個卡通角色給人的感覺非常可愛。然而,3D藝術工作者米格爾·巴斯克斯的操作下,派大星已經不再可愛,看起來要強悍不少。或許在他看來,派大星的身材似乎有能力成為一個職業拳擊手。
  • 網易TA大咖帶你走近卡通渲染,講解關於Trick的兩三事
    最新一期的「Unity大咖作客」分享會上,Unity 邀請到了來自網易的 TA 大咖雷宇航,為大家帶來《走近卡通渲染-關於 Trick 的兩三事
  • 卡通人物怎麼畫?畫卡通人物技巧
    卡通人物怎麼畫?畫卡通人物技巧!關於如何畫卡通人物一、要想準確地將故事中的所有人物介紹給讀者,就應 該掌握不同年齡、不同性別人物的畫法。此外,為了讓劇情能更深地打動讀者,就應儘量做到正面角色的英 俊、美麗、善良都表現到極點,反面角色的兇殘、狡猾也應誇張到位,切忌人物的中庸,這一點很重要。為此,微課菌多年來一直致力於收集網上大佬們分享的教程,然後分享給大家。「輕微課」的網站上非常多的繪畫教程、繪畫素材,也有專業的繪畫課程,學繪畫的小夥伴可以去上面找到很多有用的繪畫學習資源哦!
  • 龍崗卡通公仔雕塑、卡通人物
    龍崗卡通公仔雕塑、卡通人物首先運用每一塊泥和各種表現手法,去體現出角色的形態、神態、結構、質感、量感、體積感等要素,終達成完美的藝術效果,這也是賦予每件卡通雕塑角色獨特的藝術感染力和生命力。
  • C4D材質渲染實例
    (卡通渲染、網絡渲染)、角色、粒子、毛髮、動力系統以及運動圖形的完美結合。(卡通渲染)三維紋理繪製與UV編輯表達式穩定性多邊形建模:Cinema 4D在R9開始,就在3D軟體業界被評為」多邊形建模軟體之王」。
  • 論C4D如何選擇渲染器「渲雲渲染」
    為解決這一問題,小編精心匯總整理了關於C4D六大渲染器的優缺點,分別是C4D自帶渲染器,Vray,Octane,阿諾德,Conona,RedShift。希望可以幫大家挑選出適合自己的那一款!1、V-RAY for C4D是一種行業標準,全世界許多大型工作室都在使用它。
  • 用AI繪製一個萌萌噠小廚師卡通漫畫人物
    本教程將教大家用Illustrator繪製一個小廚師卡通漫畫人物,引導你通過研究、試驗和提煉將你的想法可視化。
  • 怎麼繪製人物表情?卡通人物的表情畫法!
    怎麼繪製人物表情?卡通人物的表情畫法!
  • 卡通人物五官畫法大全
    超可愛的卡通人物五官畫法,每個器官都有不同種畫法,簡單還便捷!一起來看看怎麼畫吧~卡通人物五官畫法大全你值得擁有STEP01畫耳朵的8種方法1. 沒有耳朵:如果你認為耳朵會妨礙你的角色,那就別畫了!小橢圓形:在卡通人物的鼻子下面畫一個小數字零,以顯示驚喜或震驚。暴露的牙齒:繪製輪廓形狀以形成人物的嘴巴,用網格填充作為牙齒。張開嘴:畫一個大圓圈或橢圓形。波浪線:用許多波浪做一個小線條,表明你的角色不舒服或緊張。兩部分線:在其側面繪製一個彎曲的V,以顯示嘴周圍的更多動作。簡單的舌頭線條:從簡單的微笑開始,然後添加更多細節!
  • 學習卡通人物插畫的方法是什麼?簡單卡通人物插畫教程
    學習卡通人物插畫的方法是什麼?簡單卡通人物插畫教程!有不少在煩惱著插畫繪製過程中線稿階段的人。比如說,太過在意線條的畫法導致畫出來的東西形狀微妙,結果導致彩色插畫半途而廢…這種情況想必你們也遇到過吧?下面就給大家介紹下不需要線稿也可以畫出好插畫的方法。那麼下面就具體來看看人物插畫的步驟教程吧!
  • PS教程:製作人物卡通效果
    本篇教材通過PS對人物照片進行處理,使它變成卡通頭像,步驟簡單,只需要短短的三分鐘就可以完成。不妨跟著小編一起行動起來,做幾個可愛的卡通頭像送給自己的親人朋友。我們來伴隨著女神金玟岐的歌聲一起來學習製作卡通頭像吧。
  • 使用CDR軟體繪製卡通人物
    CorelDRAW(簡稱CDR)是一款專業的矢量圖形繪製軟體,用來繪製卡通人物則是更不在話下。可能我們平常使用CDR更多的不是繪製卡通人物,那麼今天就給大家一個案例來講解一下繪製流程。
  • 卡通漫畫人物手部怎麼畫?漫畫人物手部卡通畫法教程!
    卡通漫畫人物手部怎麼畫?怎樣才能學習好繪畫?
  • 《時尚卡通人物》病關索-協助拍攝
    時尚卡通人物【第1幅圖】此作品由江門攝影愛好者雙先生在著名的河北地區拍攝時尚卡通人物【第2幅圖】此作品由長沙攝影愛好者計先生在著名的湖州地區拍攝時尚卡通人物【第3幅圖】此作品由馬鞍山攝影愛好者居先生在著名的南昌地區拍攝
  • 很多卡通人物的顏色是黃色的,這是為什麼?
    閉著眼睛隨意腦補一些你最熟悉的卡通形象,或者回憶一下便利店裡那些萌到犯規、害你衝動購買的卡通造型包裝,是不是有挺大一部分是黃顏色的?