專(zhuān)欄目錄

2173：【01】從零開(kāi)始的卡通渲染-描邊篇?zhuanlan.zhihu.com2173：【02】從零開(kāi)始的卡通渲染-著色篇1?zhuanlan.zhihu.com2173：【03】從零開(kāi)始的卡通渲染-著色篇2?zhuanlan.zhihu.com2173：【04】從零開(kāi)始的卡通渲染-PBR篇?zhuanlan.zhihu.com

序言：

接上一篇的描邊篇，整理成一個(gè)專(zhuān)欄了。在本節(jié)中，我們開(kāi)始討論卡通渲染的一些光照計(jì)算方法。

如何讓角色看起來(lái)卡通

思考一下，究竟是哪些因素，讓我們覺(jué)得角色是卡通的呢。我覺(jué)得可以先從下面3點(diǎn)入手

1.減少色階數(shù)量

2.冷暖色調(diào)分離

3.對(duì)明暗區(qū)域的手繪控制

減少色階數(shù)量

減少色階的數(shù)量，給畫(huà)面卡通感

冷暖色調(diào)分離

明面和暗面分配不同冷暖的顏色，給畫(huà)面卡通感

在美術(shù)上根據(jù)顏色區(qū)分為暖色調(diào)（紅色，黃色）和冷色調(diào)（藍(lán)色、紫色）。在偏真實(shí)的光照計(jì)算中，往往只計(jì)算一個(gè)明暗關(guān)系，然后由光和物體的顏色決定最終效果。而卡通渲染則會(huì)根據(jù)明暗關(guān)系，為明面和暗面分配不同色調(diào)的顏色。比如一個(gè)暖色調(diào)的明面，配合一個(gè)冷色調(diào)的暗面。將色調(diào)拉開(kāi)以后，更進(jìn)一步給人卡通感。相關(guān)鏈接 tone-based-shading

《GUILTY GEAR Xrd》中通過(guò)單獨(dú)的貼圖定義暗面色調(diào)，和明面的色調(diào)做區(qū)分。左圖是未調(diào)整暗面色調(diào)，右圖是調(diào)整了暗面色調(diào)的

在《GUILTY GEAR Xrd》游戲中，繪制了一張稱(chēng)為SSS Texture的貼圖，來(lái)對(duì)暗面的色調(diào)進(jìn)行調(diào)整。

對(duì)明暗區(qū)域的手繪控制

在手繪動(dòng)畫(huà)中為了好的畫(huà)面效果，往往其明暗的分布并不是完全正確的。最明顯的，角色的脖子部分通常都出現(xiàn)明顯的陰影。經(jīng)典光照計(jì)算的結(jié)果是非常“正確”的，因而缺少卡通的手繪感。需要用其他方式對(duì)光照的計(jì)算結(jié)果進(jìn)行調(diào)整。

按照正確的光照計(jì)算，角色的脖子是不會(huì)有那么明顯的陰影的

下面介紹一下《GUILTY GEAR Xrd》中是如何對(duì)明暗區(qū)域進(jìn)行手繪控制的

在《GUILTY GEAR Xrd》中，通過(guò)燈光方向，Threshold貼圖，法線方向?qū)庹沼?jì)算進(jìn)行手繪風(fēng)格的控制

燈光方向控制：

卡通渲染的角色在部分燈光方向下，可以有最佳的畫(huà)面表現(xiàn)。有時(shí)候這個(gè)燈光方向和場(chǎng)景燈光或者其他角色的燈光方向不一致。為了讓每個(gè)角色都有最佳表現(xiàn)，最好每個(gè)角色有一盞自己的燈光方向。甚至當(dāng)這個(gè)角色轉(zhuǎn)向時(shí)，這個(gè)燈光也跟著角色做一定程度的轉(zhuǎn)向，來(lái)讓角色有一個(gè)更好的光影表現(xiàn)。

Threshold貼圖控制：

《GUILTY GEAR Xrd》中將這張貼圖稱(chēng)作ilmTexture。為了減少歧義，我們這里也這么稱(chēng)呼好了。

ilmTexture關(guān)閉和開(kāi)啟對(duì)角色陰影區(qū)域的影響

這張貼圖有些類(lèi)似于AO貼圖，不過(guò)它是對(duì)光照計(jì)算的結(jié)果進(jìn)行一些傾向性的修正。讓一部分區(qū)域，比如角色脖子的部分更容易產(chǎn)生陰影。來(lái)達(dá)到手繪風(fēng)格的陰影效果。

法線方向控制：

法線控制有兩種方法，一種是直接編輯法線，達(dá)到想要的光照結(jié)果。一種是創(chuàng)建一個(gè)平滑的簡(jiǎn)單模型，然后將其法線傳遞到復(fù)雜物體上，達(dá)到優(yōu)化陰影的效果。Maya自帶法線傳遞的功能，3ds Max可以通過(guò)插件Noors Normal Thief實(shí)現(xiàn)法線傳遞的功能。

通過(guò)直接編輯法線，達(dá)到想要的光照效果

創(chuàng)建簡(jiǎn)單的頭套模型，傳遞其法線到頭發(fā)上，優(yōu)化頭發(fā)的陰影

在《火影忍者 究極風(fēng)暴》中，將人物的面部向外膨脹，再用膨脹后的面部法線來(lái)優(yōu)化面部陰影

賽璐璐風(fēng)格插畫(huà)

《百變小櫻》動(dòng)畫(huà)的賽璐璐片

賽璐璐片是一種塑料卡片，在早期日本動(dòng)畫(huà)制作流程中的，畫(huà)師會(huì)在賽璐璐材質(zhì)的塑料卡片上對(duì)原畫(huà)進(jìn)行上色。其特點(diǎn)為通常只有明暗2個(gè)色階，明暗變化的交界非常明顯。現(xiàn)在這種風(fēng)格的卡通渲染比較流行。在本篇中，也將實(shí)現(xiàn)偏向這種風(fēng)格的卡通渲染。

厚涂風(fēng)格插畫(huà)

《明日方舟》塔露拉立繪

厚涂風(fēng)格相較賽璐璐風(fēng)格，色階更多，明暗交界變化會(huì)柔和很多。這個(gè)風(fēng)格也有它的好處，因?yàn)?D場(chǎng)景比較難做成賽璐璐的。如何讓賽璐璐風(fēng)格的角色和非賽璐璐的場(chǎng)景融合是也許需要考慮的。厚涂風(fēng)格的角色會(huì)更容易和場(chǎng)景進(jìn)行融合。

雙色階的渲染實(shí)現(xiàn)

首先我們實(shí)現(xiàn)一個(gè)明暗邊界分明的光照效果，并支持分別設(shè)置明暗區(qū)域的顏色，設(shè)置暗面顏色為冷色調(diào)，和明面的色調(diào)做出區(qū)分。

Shader "Unlit/CelRender" {Properties{_MainTex ("MainTex", 2D) = "white" {}_MainColor("Main Color", Color) = (1,1,1)_ShadowColor ("Shadow Color", Color) = (0.7, 0.7, 0.8)_ShadowRange ("Shadow Range", Range(0, 1)) = 0.5_ShadowSmooth("Shadow Smooth", Range(0, 1)) = 0.2[Space(10)]_OutlineWidth ("Outline Width", Range(0.01, 2)) = 0.24_OutLineColor ("OutLine Color", Color) = (0.5,0.5,0.5,1)}SubShader{Tags { "RenderType"="Opaque" }pass{Tags {"LightMode"="ForwardBase"}Cull BackCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "Lighting.cginc"#include "AutoLight.cginc"sampler2D _MainTex; float4 _MainTex_ST;half3 _MainColor;half3 _ShadowColor;half _ShadowRange;struct a2v {float4 vertex : POSITION;float3 normal : NORMAL;float2 uv : TEXCOORD0;};struct v2f{float4 pos : SV_POSITION;float2 uv : TEXCOORD0;float3 worldNormal : TEXCOORD1;float3 worldPos : TEXCOORD2; };v2f vert(a2v v){v2f o;UNITY_INITIALIZE_OUTPUT(v2f, o);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;o.pos = UnityObjectToClipPos(v.vertex);return o;}half4 frag(v2f i) : SV_TARGET {half4 col = 1;half4 mainTex = tex2D(_MainTex, i.uv);half3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);half3 worldNormal = normalize(i.worldNormal);half3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);half halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 0.5;half3 diffuse = halfLambert > _ShadowRange ? _MainColor : _ShadowColor;diffuse *= mainTex;col.rgb = _LightColor0 * diffuse;return col;}ENDCG}Pass{//描邊，參考上一篇}} }

實(shí)現(xiàn)明暗邊界分明的光照，并且單獨(dú)設(shè)置明面和暗面的顏色來(lái)區(qū)分色調(diào)

smoothstep柔化明暗邊界

現(xiàn)在我們希望能夠?qū)γ靼颠吔绲淖兓鲆恍┤峄?#xff0c;讓風(fēng)格往厚涂的風(fēng)格靠一些，這樣可以跟更容易地跟一些非賽璐璐風(fēng)格的場(chǎng)景做融合。這里我們使用smoothstep函數(shù)實(shí)現(xiàn)這個(gè)效果。這個(gè)函數(shù)可以在根據(jù)輸入數(shù)據(jù)，計(jì)算一個(gè)范圍在0到1區(qū)間的平滑過(guò)渡曲線。通過(guò)這個(gè)函數(shù)的結(jié)果對(duì)明面和暗面的顏色進(jìn)行插值，來(lái)實(shí)現(xiàn)明暗邊界的軟硬控制。wiki百科鏈接

smoothstep(0,0.7,x)

對(duì)代碼進(jìn)行如下修改

half halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 0.5;half ramp = smoothstep(0, _ShadowSmooth, halfLambert - _ShadowRange);half3 diffuse = lerp(_ShadowColor, _MainColor, ramp);

使用smoothstep函數(shù)對(duì)明暗分界的軟硬進(jìn)行控制

Ramp貼圖

還有一個(gè)做法是通過(guò)采樣Ramp貼圖來(lái)實(shí)現(xiàn)對(duì)色階和明暗邊界的控制。可以看成是用標(biāo)準(zhǔn)光照的結(jié)果為UV，采樣一張用作顏色映射表的貼圖，通過(guò)這張貼圖控制光照計(jì)算的結(jié)果。制作如下圖的ramp貼圖，然后對(duì)代碼進(jìn)行修改。

half halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 0.5;half ramp = tex2D(_rampTex, float2(saturate(halfLambert - _ShadowRange), 0.5)).r;half3 diffuse = lerp(_ShadowColor,_MainColor, ramp);

Ramp貼圖，從左向右對(duì)應(yīng)光照從0到1的范圍。注意最左邊光照應(yīng)該最弱的部分反而設(shè)置的比較亮

使用Ramp貼圖對(duì)色階進(jìn)行控制，在暗面形成了一個(gè)有點(diǎn)亮的反光

Ramp貼圖能夠更容易的定義多個(gè)色階，不過(guò)貼圖需要自己制作。貼圖制作起來(lái)并不復(fù)雜，也可以通過(guò)編寫(xiě)編輯器工具來(lái)生成。這里的貼圖是使用Toony Colors Pro插件生成的。

在制作Ramp貼圖的時(shí)候，最左邊光照應(yīng)該最弱的部分反而設(shè)置的比較亮。這個(gè)是為了制作出暗面的反光效果。在素描上面有個(gè)明暗五調(diào)子的知識(shí)，在物體邊緣的部分會(huì)有一圈反光，所以物體的邊緣不會(huì)是最暗的部分。鏈接

素描關(guān)系上的三大面五大調(diào)子

在圖形學(xué)上，也有對(duì)應(yīng)的概念，稱(chēng)為菲涅耳（fresnel）現(xiàn)象。我覺(jué)得這體現(xiàn)了一個(gè)非常有趣的觀點(diǎn)，無(wú)論是圖形學(xué)使用光照模型對(duì)現(xiàn)實(shí)世界的物理現(xiàn)象進(jìn)行模擬，還是畫(huà)家們通過(guò)觀察現(xiàn)實(shí)世界總結(jié)出的美術(shù)理論，最終都是殊途同歸的。一個(gè)使用公式進(jìn)行繪圖，一個(gè)使用畫(huà)筆進(jìn)行繪圖罷了。

在《偶像大師》系列，也使用了Ramp貼圖來(lái)實(shí)現(xiàn)色階和色調(diào)的控制

左上的貼圖是《偶像大師1》的ramp貼圖，左下是《偶像大師2》的ramp貼圖

《偶像大師1》（左）和《偶像大師2》（右）的畫(huà)面變化

因?yàn)楸酒钠悬c(diǎn)太長(zhǎng)了，有關(guān)邊緣反光部分的討論，放在下一篇再詳細(xì)討論。

ilmTexture貼圖的實(shí)現(xiàn)

《GUILTY GEAR Xrd》中使用稱(chēng)為ilmTexture的貼圖對(duì)角色明暗區(qū)域?qū)崿F(xiàn)手繪風(fēng)格的控制。其中綠通道控制漫反射的陰影閾值，紅通道控制高光強(qiáng)度，藍(lán)通道控制高光范圍。這里跟據(jù)這個(gè)原理，完成一個(gè)最簡(jiǎn)單的實(shí)現(xiàn)。卡通渲染不像Lambert等光照模型有統(tǒng)一的公式，如果要更進(jìn)一步的表現(xiàn)還需要根據(jù)畫(huà)面需求做各種trick。比如專(zhuān)欄標(biāo)題的展示圖片還添加了陰影殘留和陰影色調(diào)分離的效果，這方面就由大家自己發(fā)揮吧。

Shader "Unlit/CelRenderFull" {Properties{_MainTex ("MainTex", 2D) = "white" {}_IlmTex ("IlmTex", 2D) = "white" {}[Space(20)]_MainColor("Main Color", Color) = (1,1,1)_ShadowColor ("Shadow Color", Color) = (0.7, 0.7, 0.7)_ShadowSmooth("Shadow Smooth", Range(0, 0.03)) = 0.002_ShadowRange ("Shadow Range", Range(0, 1)) = 0.6[Space(20)]_SpecularColor("Specular Color", Color) = (1,1,1)_SpecularRange ("Specular Range", Range(0, 1)) = 0.9_SpecularMulti ("Specular Multi", Range(0, 1)) = 0.4_SpecularGloss("Sprecular Gloss", Range(0.001, 8)) = 4[Space(20)]_OutlineWidth ("Outline Width", Range(0, 1)) = 0.24_OutLineColor ("OutLine Color", Color) = (0.5,0.5,0.5,1)}SubShader{Pass{Tags { "LightMode"="ForwardBase"}CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdbase#include "UnityCG.cginc"#include "Lighting.cginc"#include "AutoLight.cginc"sampler2D _MainTex; float4 _MainTex_ST;sampler2D _IlmTex; float4 _IlmTex_ST;half3 _MainColor;half3 _ShadowColor;half _ShadowSmooth;half _ShadowRange;half3 _SpecularColor;half _SpecularRange;half _SpecularMulti;half _SpecularGloss;struct a2v{float4 vertex : POSITION;float2 uv : TEXCOORD0;float3 normal : NORMAL;};struct v2f{float4 pos : SV_POSITION;float2 uv : TEXCOORD0; float3 worldNormal : TEXCOORD1;float3 worldPos : TEXCOORD2; };v2f vert (a2v v){v2f o = (v2f)0;o.pos = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;return o;}half4 frag (v2f i) : SV_Target{half4 col = 0;half4 mainTex = tex2D (_MainTex, i.uv);half4 ilmTex = tex2D (_IlmTex, i.uv);half3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);half3 worldNormal = normalize(i.worldNormal);half3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);half3 diffuse = 0;half halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 0.5;half threshold = (halfLambert + ilmTex.g) * 0.5;half ramp = saturate(_ShadowRange - threshold); ramp = smoothstep(0, _ShadowSmooth, ramp);diffuse = lerp(_MainColor, _ShadowColor, ramp);diffuse *= mainTex.rgb;half3 specular = 0;half3 halfDir = normalize(worldLightDir + viewDir);half NdotH = max(0, dot(worldNormal, halfDir));half SpecularSize = pow(NdotH, _SpecularGloss);half specularMask = ilmTex.b;if (SpecularSize >= 1 - specularMask * _SpecularRange){specular = _SpecularMulti * (ilmTex.r) * _SpecularColor;}col.rgb = (diffuse + specular) * _LightColor0.rgb;return col;}ENDCG}Pass{//描邊，參考上一篇}}FallBack Off }

上色后的效果

總結(jié)

在本節(jié)中，介紹了卡通渲染和寫(xiě)實(shí)風(fēng)格渲染的主要區(qū)別和一些實(shí)現(xiàn)方法。在下一個(gè)章節(jié)中，將會(huì)討論卡通渲染的邊緣光、后處理、以及和PBR進(jìn)行融合的方向等。

分享

在寫(xiě)這篇文章的ramp貼圖部分的時(shí)候，想起了以前在OpenGPU論壇看到的Trace大佬翻譯的《偶像大師》相關(guān)文章。回去找的時(shí)候發(fā)現(xiàn)論壇已經(jīng)沒(méi)了，以前上面的很多文章也丟失了。覺(jué)得還是有點(diǎn)傷感的，我最早是看著OpenGPU上面的Trace翻譯的科普文章，開(kāi)始對(duì)渲染產(chǎn)生興趣的。從這一點(diǎn)上來(lái)說(shuō)，我非常感謝在網(wǎng)絡(luò)上科普?qǐng)D形學(xué)知識(shí)的前輩們，給了我們非常好的學(xué)習(xí)途徑。后來(lái)發(fā)現(xiàn)因?yàn)槲乙恢庇袀浞輕pt的習(xí)慣，讓我保留了這幾篇文章的備份。雖然都很老了，但是覺(jué)得不應(yīng)該消失在網(wǎng)絡(luò)上面。所以我把這兩篇《偶像大師》的文章上傳到百度網(wǎng)盤(pán)里了，感興趣的小伙伴可以去下載。 那么我們下一篇見(jiàn)。

百度網(wǎng)盤(pán) 提取碼：2whi。

附：參考鏈接

【翻譯】西川善司「實(shí)驗(yàn)做出的游戲圖形」「GUILTY GEAR Xrd -SIGN-」中實(shí)現(xiàn)的「純卡通動(dòng)畫(huà)的實(shí)時(shí)3D圖形」的秘密，前篇（1）

【翻譯】西川善司「實(shí)驗(yàn)做出的游戲圖形」「GUILTY GEAR Xrd -SIGN-」中實(shí)現(xiàn)的「純卡通動(dòng)畫(huà)的實(shí)時(shí)3D圖形」的秘密，前篇（2）

【翻譯】西川善司的「實(shí)驗(yàn)做出的游戲圖形」「GUILTY GEAR Xrd -SIGN-」中實(shí)現(xiàn)的「純卡通動(dòng)畫(huà)的實(shí)時(shí)3D圖形」的秘密，后篇

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的寄存器分配图着色_【02】从零开始的卡通渲染-着色篇1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。