您需要 登录 才可以下载或查看，没有账号？注册
x
通渲染（英文Cel Shading或者Toon shading），是一种能够使3D的图像产生动漫效果的渲染手段。它具体的定义我们先看一段来自维基的解释：
Cel shading or toon shading is a type of non-photorealistic rendering designed to make 3-D computer graphics appear to be flat by using less shading color instead of a shade gradient or tints and shades. Cel-shading is often used to mimic the style of a comic bookor cartoon and/or give it a characteristic paper-like texture.
(卡通渲染（英语：Cel-shading或者Toon Shading）是一种去真实感的渲染方法，旨在使电脑生成的图像呈现出手绘般的效果。为了使图像可以与漫画或者卡通达到形似的效果，专业人员通常使用卡通渲染着色器进行处理)
总结来说，卡通渲染是一种NPR(非真实感绘制)，可以使用在一些3D的日系二次元风格的手游或者端游中，使得画面的质感更加接近动漫中的感觉。
比较的有名的使用卡通渲染的游戏，这里我必须提一下崩坏三（崩坏学园3）。每次看到崩崩崩的视频，总是会被它的画风给惊叹到。米忽悠真不愧是被游戏耽误的动画公司。崩坏三大量使用了卡通渲染技术，这一点在米哈游的技术总监贺甲对于崩坏3的技术演讲中可以了解到。B站有关于这个演讲的视频（不过是日语的，因为是在Unite Tokyo 2018上的演讲，貌似被官方翻译了）。文字版本的可以百度。
这种风格对于喜欢动漫的人来说简直是完美，恨不得把自己的所有游戏都加上一个卡通渲染。那么，卡通渲染具体是怎么实现的呢？原理又是什么？
简单来说，在正常的渲染着色过程中，由于使用了真实的光照模型，在模型上的颜色是随着光照的角度渐变的，而卡通渲染为了模拟动画绘制时候的风格，根据每个像素的法线和光照的方向的关系，来使得这片区域的像素投影到其中一个明暗区域上面，达到多段离散的明暗区域的效果。
接下来我们将分别在Unreal Engine 4（UE4）中和WebGL中来实现简单的Cel Shading，可以选择自己感兴趣的阅读，其中WebGL涉及shader代码。
Unreal Engine 4在UE4当中，我们甚至不需要写shader的代码，只需要通过材质的蓝图编辑器就能够实现卡通渲染的效果。首先先新建一个Material。然后在Material Domain中选择PostProcessing,这样这个材质就会被作为后处理的材质，能够作用在计算了光照和颜色的模型上面。
接下来就是在蓝图中实现卡通渲染的细节了。在UE4中，我们无法直接获得光照的信息，这里需要使用一些手段来获得光照LightMap。 UE4中可以通过SceneTexture来获得一些有用的信息，在SceneTextureID中可以选择其类型 这里我们需要一个PostProcessingInput0来获得场景中应用了光照和后处理之后的颜色，再添加一个SceneTexture节点并且选择DiffuseColor来获得场景中初始（无光照和后处理）的颜色，用一个divide节点来从PostProcessingInput0中除去DiffuseColor获取LIghtMap的灰阶值。
当然，可以先先将两个输出连接DeSaturation的节点来更彻底地将颜色去除。
我们将获得的结果映射到0-1的范围内
通过这个结果，我们可以大概地了解到对于每个像素点的光照信息。这样我们就可以根据光照信息来计算最后的颜色值。
这里我采用了最简单的方法，只有两种明暗差别，如果之前获得结果大于0.5，则最后的颜色信息直接为DIffuseColor，否则要将DiffuseColor乘一个系数。最后的整个蓝图如下图显示 当然你可以将结果更加细分（WebGL的部分中就更加细分），这样结果就会有更多段的明亮度。之后在场景中添加一个PostProcessingVolume并且把整个后处理材质添加到PostProcessingVolume中就可以作用到场景上。 设置PostProcessingVolume中的Infinite Extend为Infinite，整个场景就会被PostProcessingVolume给覆盖，添加的后处理材质就能够作用到整个场景上 这里你可能会发现结果有点和想象中的不一样。记住，在卡通渲染的蓝图选项中把Blendable location选为Before tonemapping 关于Blendable location的解释，我们可以在 官网中看到这个介绍
假如你想要把卡通渲染只作用在一些模型上而不是整个场景。这时就要使用custom depth buffer了。把需要使用卡通渲染的模型中的render custom depth pass勾选上
然后修改刚才的蓝图为如下
可以看到，我们主要添加了对于depth buffer的判断，根据custom depth buffer和scene depth的关系来进行最后明亮度的取舍。
到目前为止，我们都是将颜色乘一个自定义的系数来表明明亮度。更好的方法是使用一个材质查询表（Texture LUT<look-up table>）。
这样就能够使用计算出来的值通过查表来乘相应的系数。
到此，超简单版本的卡通渲染就完成了，结果大概是这个样子。当然如果你是把它作用在整个场景上的话，可能会丢失光照。场景的背景就是黑色的，下图是只用在了人物的模型上，就很动画。
转自：知乎 作者：赤土晴絵 文章链接：https://zhuanlan.zhihu.com/p/50260340
| 
显示全部 9
评分
