UE4从零开始的卡通渲染——阴影篇（一）

UE4从零开始的卡通渲染

前言

       由于工作的需要，开始去了解卡通渲染。针对于4.27.2版本的UE4来进行实现一套自己的卡通渲染效果。也算是对自己这段时间的学习的一个总结吧。废话不多说，我们直接开始。

卡通渲染的阴影

       要想实现卡通渲染的阴影，我们必须知道卡通渲染的阴影特点是什么。首先最明显的就是一个色阶分离的效果。什么叫做色阶分离呢？我们先来看一下UE4原本的渲染的阴影效果。

       可以看到这个球面的阴影边缘是非常柔和，具体的计算我们可以去看UE4中MobileBasePassPixelShader.usf这个文件，这个是手机端会跑的shader，与之对应的就是必须把UE中的预览改成Android ES3.1，才会跑这段shader。

       在这个文件中，主要看这段代码。可以看到这是求了法线和方向光的叉乘，然后这个结果会参与到后续的光照计算中，这个我们目前先不用管它在光照中是怎么参与计算的。我们只需要知道，如果想要实现卡通渲染的色阶分离效果，我们就得对这个数值进行二值化。

       我们先来稍微改一下代码，改成下图这种形式。

       这是一个非常简单的二值化代码，目的就是判断光源与法线的夹角，如果小于90度则说明不在阴影中，大于90则说明在阴影中。修改完后，编译一下我们来看一下效果。

       可以看到出现了非常明显的硬阴影分界线，说明我们的修改起到作用了。但是仔细看，我们就会发现问题，这分界线上的锯齿十分明显，这明显不是我们想要的。所以我们需要平滑一下边缘，于是我们将代码修改成

      

       然后我们看效果

       这一次的边缘就没有锯齿的感觉了。到这我们最普通的卡通阴影已经完成了。但是这种写法就太死板了，而且修改了虚幻原生的渲染管线，并不是我们所需要的。这时候，我们就得定义自己的shading model来专门处理这种卡通材质。

       创建shading model的方法可以参考：虚幻4渲染编程(材质编辑器篇)【第二卷：自定义光照模型】 - 知乎 有一点不同的是，上面的链接是修改桌面端的，手机端的稍微改一点地方。

       在我们创建好我们的shading model后，第一阶段我们先启用CustomVector0与CustomData1两个pin脚来分别纪录阴影颜色以及法线与灯光点乘结果。

       然后再修改对应的shader代码

 

 

       然后接下来就可以对比一下，UE4原生的效果以及我们修改后的效果。

  而且我们还可以随意修改阴影颜色

       将其放在人物模型上对比一下区别

       看上去虽然不是那么完美，但是最起码和原生的UE4渲染效果有了区别，接下来就是再添加对应的细节