【02】从零开始的卡通渲染-着色篇1

序言：

接上一篇的描边篇，整理成一个专栏了。在本节中，我们开始讨论卡通渲染的一些光照计算方法。

如何让角色看起来卡通

思考一下，究竟是哪些因素，让我们觉得角色是卡通的呢。我觉得可以先从下面3点入手

1.减少色阶数量

2.冷暖色调分离

3.对明暗区域的手绘控制

减少色阶数量

冷暖色调分离

在美术上根据颜色区分为暖色调(红色，黄色)和冷色调(蓝色、紫色)。在偏真实的光照计算中，往往只计算一个明暗关系，然后由光和物体的颜色决定最终效果。而卡通渲染则会根据明暗关系，为明面和暗面分配不同色调的颜色。比如一个暖色调的明面，配合一个冷色调的暗面。将色调拉开以后，更进一步给人卡通感。相关链接 tone-based-shadin

在《GUILTY GEAR Xrd》游戏中，绘制了一张称为SSS Texture的贴图，来对暗面的色调进行调整。

对明暗区域的手绘控制

在手绘动画中为了好的画面效果，往往其明暗的分布并不是完全正确的。最明显的，角色的脖子部分通常都出现明显的阴影。经典光照计算的结果是非常“正确”的，因而缺少卡通的手绘感。需要用其他方式对光照的计算结果进行调整。 下面介绍一下《GUILTY GEAR Xrd》中是如何对明暗区域进行手绘控制的

灯光方向控制：

卡通渲染的角色在部分灯光方向下，可以有最佳的画面表现。有时候这个灯光方向和场景灯光或者其他角色的灯光方向不一致。为了让每个角色都有最佳表现，最好每个角色有一盏自己的灯光方向。甚至当这个角色转向时，这个灯光也跟着角色做一定程度的转向，来让角色有一个更好的光影表现。

Threshold贴图控制：

《GUILTY GEAR Xrd》中将这张贴图称作ilmTexture。为了减少歧义，我们这里也这么称呼好了。

这张贴图有些类似于AO贴图，不过它是对光照计算的结果进行一些倾向性的修正。让一部分区域，比如角色脖子的部分更容易产生阴影。来达到手绘风格的阴影效果。

法线方向控制：

法线控制有两种方法，一种是直接编辑法线，达到想要的光照结果。一种是创建一个平滑的简单模型，然后将其法线传递到复杂物体上，达到优化阴影的效果。Maya自带法线传递的功能，3ds Max可以通过插件 Noors Normal Thief 实现法线传递的功能。

赛璐璐风格插画

赛璐璐片是一种塑料卡片，在早期日本动画制作流程中的，画师会在赛璐璐材质的塑料卡片上对原画进行上色。其特点为通常只有明暗2个色阶，明暗变化的交界非常明显。现在这种风格的卡通渲染比较流行。在本篇中，也将实现偏向这种风格的卡通渲染。

厚涂风格插画

厚涂风格相较赛璐璐风格，色阶更多，明暗交界变化会柔和很多。这个风格也有它的好处，因为3D场景比较难做成赛璐璐的。如何让赛璐璐风格的角色和非赛璐璐的场景融合是也许需要考虑的。厚涂风格的角色会更容易和场景进行融合。

双色阶的渲染实现

首先我们实现一个明暗边界分明的光照效果，并支持分别设置明暗区域的颜色，设置暗面颜色为冷色调，和明面的色调做出区分。

    
    
    

     
     
     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