Unity醬~ 卡通渲染技術分析(一)

前面的話

unitychan是日本unity官方團隊提供的一個Demo潜沦,里面有很好的卡通渲染效果勤众,值得參考學習

Shader分類

上圖是我整理出來的shader結構鸟雏,可以看到Unity娘被拆分成了很多個小的部件耕赘,我想主要是為了掛動態(tài)骨骼吧辩棒。因為有很多部件的材質,shader其實都是一樣的可以合并成少數幾個

我打算分3個部分來學習

  1. CharaMain.cginc 主要用于衣服等材質
  2. CharaSkin.cginc 皮膚效果
  3. Hair 頭發(fā)、眼睛羡玛、睫毛等部位的渲染

CharaMain.cginc

本篇先寫第一部分body材質别智。CharaMain.cginc中包含漫反射、高光稼稿、反射薄榛、邊緣光讳窟、陰影等效果的實現,接下來我們詳細拆解

基礎著色效果(模擬漫反射)

這里是用視角向量跟法線點積(但這樣的做法就不會受光照角度變化)敞恋,然后用結果采樣一張類似這樣的衰減紋理

    // Falloff. Convert the angle between the normal and the camera direction into a lookup for the gradient
    float_t normalDotEye = dot( normalVec, i.eyeDir.xyz );
    float_t falloffU = clamp( 1.0 - abs( normalDotEye ), 0.02, 0.98 );
    float4_t falloffSamplerColor = FALLOFF_POWER * tex2D( _FalloffSampler, float2( falloffU, 0.25f ) );
    float3_t shadowColor = diffSamplerColor.rgb * diffSamplerColor.rgb;
    float3_t combinedColor = lerp( diffSamplerColor.rgb, shadowColor, falloffSamplerColor.r );
    combinedColor *= ( 1.0 + falloffSamplerColor.rgb * falloffSamplerColor.a );
FalloffSampler

效果如下丽啡,邊緣較白


漫反射

但我感覺加上采樣顏色后效果不是很明顯,邊緣顏色會深一些耳舅。


加上采樣顏色

高光效果

    // Use the eye vector as the light vector
    float4_t reflectionMaskColor = tex2D( _SpecularReflectionSampler, i.uv.xy );
    float_t specularDot = dot( normalVec, i.eyeDir.xyz );
    float4_t lighting = lit( normalDotEye, specularDot, _SpecularPower );
    float3_t specularColor = saturate( lighting.z ) * reflectionMaskColor.rgb * diffSamplerColor.rgb;
    combinedColor += specularColor;

這個高光的計算很奇葩碌上,也是用法線跟視角向量的點積,最后的效果就是有一點淡淡的高光浦徊。也是跟真正的燈光角度無關的。

這里還用到了一張貼圖天梧,高光會用到這張圖的rgb通道盔性,后面要寫的反射,會用到這張圖的a通道呢岗。
大概就是描出來那些地方高光強一些

RGB通道
高光效果

反射

// Reflection
float3_t reflectVector = reflect( -i.eyeDir.xyz, normalVec ).xzy;
float2_t sphereMapCoords = 0.5 * ( float2_t( 1.0, 1.0 ) + reflectVector.xy );
float3_t reflectColor = tex2D( _EnvMapSampler, sphereMapCoords ).rgb;
reflectColor = GetOverlayColor( reflectColor, combinedColor );

combinedColor = lerp( combinedColor, reflectColor, reflectionMaskColor.a );
combinedColor *= _Color.rgb * _LightColor0.rgb;
float opacity = diffSamplerColor.a * _Color.a * _LightColor0.a;

這里是采樣一張環(huán)境貼圖冕香,為啥用張這樣的圖呢?我覺得他主要是為了能反射出這種銀色的色調罷了后豫。你想要什么色調就換啥樣的環(huán)境圖悉尾。


GetOverlayColor這個函數是用來融合自身貼圖顏色,跟反射環(huán)境貼圖顏色的挫酿。里面用了很多小技巧

先來看看直接輸出反射貼圖是什么樣

反射貼圖

通過GetOverlayColor融合后的反射顏色


融合后

然后這里會用到高光反射貼圖的A通道构眯,來表示某些區(qū)域的反射的強度。


Alpha通道

用alpha通道做差值后會發(fā)現早龟,大部分區(qū)域的反射顏色都不見了惫霸,因為大部分是黑色。只有少數白色區(qū)域葱弟,能看到一些反射效果


最終反射效果

接收陰影處理

這里是計算其他物體投射在身上的陰影壹店,這里插入了一個自定義的陰影顏色,為了明顯一點我直接調成純黑芝加,然后弄了一個物體擋住了unity醬~ 效果如圖


使用LIGHT_ATTENUATION指令對陰影貼圖采樣并且返回數據供你使用硅卢。如果你想知道LIGHT_ATTENUATION指令具體做了些什么,檢查 AutoLight.cginc文件

#ifdef ENABLE_CAST_SHADOWS
    // Cast shadows
    shadowColor = _ShadowColor.rgb * combinedColor;
    float_t attenuation = saturate( 2.0 * LIGHT_ATTENUATION( i ) - 1.0 );
    combinedColor = lerp( shadowColor, combinedColor, attenuation );
#endif

邊緣高光

終于這里有一個跟著光照角度變換的效果了藏杖,哈哈

一般我們會使用菲尼爾效應來實現邊緣光将塑,而unitychan里面則是采用了一張邊緣光貼圖

RimLight

用N.L計算出來的值域在[-1,1]之間,*0.5+1后制市,轉成[0,1]區(qū)間抬旺,然后對這張1維的rim圖采樣。

我們從右邊打一盞平行燈祥楣,來看看采樣的效果开财。跟光向量夾角越小的值越接近1汉柒,也就越白

邊緣光貼圖采樣

但是邊緣光效果要收到漫反射影響,所以他這里乘上了之前采樣出來的漫反射漸變责鳍,可以看到高光被控制在了邊緣

falloffU = saturate( rimlightDot * falloffU );
rim * 漫反射漸變

完整效果

完整效果

總結

CharaMain.cginc中用了很多的小技巧實現了漫反射碾褂、高光、反射历葛、邊緣光正塌。她沒有傳統卡通渲染賽璐璐的陰影漸變,也沒有油膩的高光恤溶。她的效果都有種欲出還收的感覺乓诽。

我還是覺得效果太淡了一些

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市咒程,隨后出現的幾起案子鸠天,更是在濱河造成了極大的恐慌,老刑警劉巖帐姻,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件稠集,死亡現場離奇詭異,居然都是意外死亡饥瓷,警方通過查閱死者的電腦和手機剥纷,發(fā)現死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來呢铆,“玉大人晦鞋,你說我怎么就攤上這事〈倘鳎” “怎么了鳖宾?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長逆航。 經常有香客問我鼎文,道長,這世上最難降的妖魔是什么因俐? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任拇惋,我火速辦了婚禮,結果婚禮上抹剩,老公的妹妹穿的比我還像新娘撑帖。我一直安慰自己,他們只是感情好澳眷,可當我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布胡嘿。 她就那樣靜靜地躺著,像睡著了一般钳踊。 火紅的嫁衣襯著肌膚如雪衷敌。 梳的紋絲不亂的頭發(fā)上勿侯,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天,我揣著相機與錄音缴罗,去河邊找鬼助琐。 笑死,一個胖子當著我的面吹牛面氓,可吹牛的內容都是我干的兵钮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼舌界,長吁一口氣:“原來是場噩夢啊……” “哼掘譬!你這毒婦竟也來了?” 一聲冷哼從身側響起呻拌,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤屁药,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后柏锄,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡复亏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年趾娃,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缔御。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡抬闷,死狀恐怖,靈堂內的尸體忽然破棺而出耕突,到底是詐尸還是另有隱情笤成,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布眷茁,位于F島的核電站炕泳,受9級特大地震影響,放射性物質發(fā)生泄漏上祈。R本人自食惡果不足惜培遵,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望登刺。 院中可真熱鬧籽腕,春花似錦、人聲如沸纸俭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揍很。三九已至郎楼,卻和暖如春万伤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背箭启。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工壕翩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人傅寡。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓放妈,卻偏偏與公主長得像,于是被迫代替她去往敵國和親荐操。 傳聞我的和親對象是個殘疾皇子芜抒,可洞房花燭夜當晚...
    茶點故事閱讀 45,086評論 2 355

推薦閱讀更多精彩內容