【03】从零开始的卡通渲染-着色篇2

序言：

在上一篇中，介绍了一些卡通渲染的光照计算方法。在本节中，我们将讨论有关卡通渲染的边缘光和Bloom后处理效果。

边缘光和后处理在卡通渲染中的作用

边缘光是卡通渲染中重要的组成部分。它和描边一样都在物体的轮廓出现。卡通渲染通常饱和度比较高，描边和边缘光能够让角色从高饱和度的画面中凸显出来。在动画中也经常用边缘光经常用来表现逆光效果。之前《阴阳师》出过一段名为《离岛之歌》的CG。我非常喜欢。下面是其中的截图。

图片中除了边缘光效果外，还比较明显的表现了Bloom效果。Bloom后处理是卡通渲染中比较常见的后处理。 在上图中，通过让边缘光部分的颜色溢出到周围区域，能提高画面的通透感，并且让角色更好的跟周围场景融合。下面将这两个效果也加入到工程中。

边缘光的实现

首先实现一个基本的边缘光， 在上一篇的光照计算中，加入下面代码，得到一个基础的边缘光效果。

    

         
     half
      f 
     =
       
     1.0
      
     -
      
     saturate
     (
     dot
     (
     viewDir
     ,
      worldNormal
     )
     )
     ;
     
    
     half3
      rimColor 
     =
      f 
     *
      _RimColor
     .
     rgb 
     *
       _RimColor
     .
     a
     ;
     
    col
     .
     rgb 
     =
      
     (
     diffuse 
     +
      specular 
     +
      rimColor
     )
      
     *
      _LightColor0
     .
     rgb
     ;
    

在卡通渲染中，边缘光的过度通常会比较硬，所以需要对边缘光的软硬和范围进行控制。这里我们和上一章一样采用smoothstep函数来帮助我们解决问题。对代码进行如下修改

    

          
     half
      f 
     =
       
     1.0
      
     -
      
     saturate
     (
     dot
     (
     viewDir
     ,
      worldNormal
     )
     )
     ;
     
    
     half
      rim 
     =
      
     smoothstep
     (
     _RimMin
     ,
      _RimMax
     ,
      f
     )
     ;
     
    rim 
     =
      
     smoothstep
     (
     0
     ,
      _RimSmooth
     ,
      rim
     )
     ;
     
    
     half3
      rimColor 
     =
      rim 
     *
      _RimColor
     .
     rgb 
     *
       _RimColor
     .
     a
     ;
    

我们将边缘光应用到角色模型上，和上一章的效果做比对。能够看到角色的轮廓更加凸显了。

边缘光的Mask控制

边缘光的计算使用的是法线点乘视线。在物体的法线和视线垂直的时候，边缘光会很强。在球体上不会有问题，但是在一些有平面的物体，当平面和视线接近垂直的时候，会导致整个平面都有边缘光。这会让一些不该有边缘光的地方出现边缘光。为了解决这个问题，在《GUILTY GEAR Xrd》中使用边缘光的Mask贴图来对边缘光区域进行调整。

Bloom后处理的实现

Bloom本身作为常见的后处理，在unity的各种插件，或者网络上的文章上面都有实现。这里就不讲Bloom后处理的实现。不过卡通渲染对Bloom后处理有一些特别的要求。常见的Bloom后处理是根据颜色(或者说是亮度)来决定曝光程度的的。但是卡通渲染的Bloom，需要能够自己控制曝光区域，与这个区域的颜色和亮度无关。

以上图的做举例，角色的衣服是白色的，颜色上属于亮度最高的。但是这里我们希望衣服上不要有过多曝光。曝光能集中在角色边缘光的位置。在这里我们采用将颜色写入Alpha通道，利用Alpha值来控制曝光度的方法。这需要大家自行对Bloom进行一定的修改。

用Alpha通道控制Bloom的曝光，在渲染半透明物体的时候会遇到问题，因为半透明混合也需要用到Alpha。这点可以通过使用额外的Pass单独写入Alpha来解决。相关文章

!(https://u3d-connect-cdn-public-prd.cdn.unity.cn/h1/20210711/p/images/a8932ef8-0ee3-44b4-8e45-c7d1f0974424_image.png)

在《离岛之歌》中截图中，bloom的曝光主要集中在光照方向，边缘光的部分。这里对边缘光的公式做点小trick。将边缘光乘以漫反射公式，来获得比较符合光照方向边缘光。将它的值赋给Alpha通道。

    

          
     half3
      worldNormal 
     =
      
     normalize
     (
     i
     .
     worldNormal
     )
     ;
     
    
     half3
      worldLightDir 
     =
      
     normalize
     (
     _WorldSpaceLightPos0
     .
     xyz
     )
     ;
     
    
     half
      NdotL 
     =
      
     max
     (
     0
     ,
      
     dot
     (
     worldNormal
     ,
      worldLightDir
     )
     )
     ;
     
    
     half
      rimBloom 
     =
      pow 
     (
     f
     ,
      _RimBloomExp
     )
      
     *
      _RimBloomMulti 
     *
      NdotL
     ;
     
    col
     .
     a 
     =
      rimBloom
     ;
    

添加Bloom效果后，提高的角色的受光感，画面显得更加通透。实际上Bloom也有助于角色和背景的融合，以及对画面有一定的润色效果。

前面所有的效果叠加起来，再加上背景。终于可以完成题图的效果了。

总结

在本节中，介绍了卡通渲染中的边缘光以及Bloom后处理，终于完成了题图的渲染，也是一个不错的结束。因为本节比预想的长，所以原定于本节的卡通渲染和PBR的融合，打算单独作为一个章节，也许单开章节可以多写一些东西把(并不会，已经编不出来了)。和PBR的融合方案对我而言也是比较纠结的主题，没有完全成熟的方案。但是和PBR的融合确实也是卡通渲染发展的一个方向。下一章打算讨论一下二分色的卡通渲染的局限性，以及市面上的一些游戏如何将卡通渲染和PBR的进行融合，创造出新的表现效果。那么我们下一章见。

PS： 前面有提到边缘光和描边都在物体轮廓出现。事实上还有使用边缘光实现的描边，不过因为比较难以控制描边粗细，所以比较少见，也许比较适合水墨风格的描边吧。如《大神》系列。

PS2：啊，说到边缘光描边。我脑子里第一个出现的是一个大佬的作品。她写过一本非常好的书《Unity Shader入门精要》，对我的学习有很大的帮助。这里放上文章的截图，有兴趣的同学可以去关注一下。 文章链接