unity 卡通风格渲染

最新推荐文章于 2025-06-25 10:32:31 发布

原创

最新推荐文章于 2025-06-25 10:32:31 发布 · 5.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#unity shader

本文详细介绍了在Unity中实现卡通风格渲染的两个关键步骤：模型描边和卡通着色高光效果。描边通过剔除正面并针对背面轮廓线进行处理，避免鬼畜效果；高光部分采用不同于Blinn-Phong模型的计算方式，利用smoothstep函数实现平滑过渡。完整代码展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述 unity 卡通风格的渲染主要分成两个步骤，第一个步骤是给模型描边，第二个步骤是实现卡通着色的高光效果。这两个步骤同时也是对应的两个不同的pass。
第一个步骤首先要剔除正面，然后对背面的轮廓线进行描边，为什么要对背面进行描边呢。当然是因为对正面进行描边的效果很鬼畜啦，删除代码中的Cull Front，会看到下图的效果，所以这时候应该能理解为什么要对背面进行描边了，描边的方法是把顶点往法线的方向扩张一段距离，但是这样的话，如果一些内凹的物体，偏移的时候很可能就直接跑到前面来了，形成的画面很糟糕，因此，这里把所有的z值先减去0.5，然后再进行偏移。
在这里插入图片描述观察代码：

float4 pos = mul(UNITY_MATRIX_MV, v.vertex);
float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);  
normal.z = -0.5;
pos = pos + float4(normalize(normal), 0) * _Outline;
o.pos = mul(UNITY_MATRIX_P, pos);

其中有趣的是，我们是在观察空间进行偏移的，而不是在投影空间，因为投影空间已经不是线性变换了，这样扩张会出现错误，我们可以尝试着在投影空间进行上述变化。

float4 pos = mul(UNITY_MATRIX_MVP, v.vertex);
float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);  
normal.z = -0.5;
pos = pos + float4(normalize(normal), 0) * _Outline;
o.pos = pos;

会出现下图的效果，显然不是我们想要的。
在这里插入图片描述第二个步骤就是高光部分，高光的书写不同于blinn-phong模型，
fixed3 specular = _Specular.rgb * lerp(0, 1, smoothstep(-w, w, spec + _Specul在这里插入代码片arScale - 1)) * step(0.0001, _SpecularScale);
乍一看还是挺复杂的，我们可以去掉一些无关紧要的部分，比如去掉* step(0.0001, _SpecularScale);这个是为了让_SpecularScale=0的时候直接去掉高光，如果直接删掉这部分的话，我们看到原图还是有部分高光，如下图所示，因为_SpecularScale是个浮点数，虽然看起来是0，但是实际上存储的时候就不一定是