控制描边形状什么是描边和笔触​

描边是让角色看起来像手绘的重要因素:

笔触是指一段描边起点到终点之间的宽度或颜色变化, 形成笔触的物理原因是笔尖在纸上压力的变化:

无笔触, 描边等宽有笔触, 笔画的起点和终点更细

宽度一致的描边比较容易实现, 带笔触的描边实现比较困难, 而是否有笔触则是让描边看起来更像手绘的关键因素, 因此能否自动生成笔触一直是描边技术的分水岭.

描边也有不同的类型:

描边和笔触的实现方法​

下文列举了一些描边和笔触的实现方法.

MooaToon实现了GUILTY GEAR的分享中提到的外描边和内描边:

- 外描边​

外描边指描边在模型的外部, 也就是上图中的"Outline"类型. 是在渲染完角色之后再渲染一次角色背面模型, 同时沿法线方向挤出. 这是最经典的也是使用最广泛的描边技术.

此技术的缺点是挤出用的法线必须是平滑的, 否则描边在硬边处会断开. 并且描边类型单一, 细节不是很多.

由于模型硬边处的法线是断开的, 直接沿着法线挤出会造成描边断开, 所以描边法线需要重新计算:

烘焙描边法线方向​

- 在UE中烘焙​

保存所有修改

在角色骨骼网格体上右键: Scripted Asset Actions > Mooa Toon > Bake Smoothed Normal and Curvature:

- 在Houdini中烘焙​

使用mooa_bakeSmoothedNormalToUV34节点烘焙描边法线

使用mooa_outlinePreview节点预览描边

确保已启用Display Option > Optimize > Remove Backfaces

在UE中检查烘焙的数据​

你可以在UE中检查所有已烘焙的数据:

确保已正确设置Outline Material

将你的角色Actor设置到BP_MooaLookDevTool > Character Actors中

勾选Show XXX以显示对应的烘焙数据

颜色(RGB, 0 - 255)代表方向(XYZ, -1 - 1), 以Show Baked Smooth Normal WS为例, 如果烘焙的数据正确, 颜色应该显示为平滑的世界空间方向, 不应该出现硬边.

绘制顶点色控制描边宽度​

GUILTY GEAR中使用顶点色作为描边宽度, 从而在局部模拟笔触:

带笔触的外描边用于控制宽度的顶点色

肩膀处无宽度调整肩膀处有宽度调整

示例中的Unity Chan是在Houdini中绘制的顶点色:

左: 调整前; 右: 调整后

提示你也可以在Blender或Maya等DCC软件中绘制顶点色.

- 在UE中绘制​

你可以直接在UE中绘制顶点色, 并实时预览结果:

- 在Houdini中绘制​

选择并启用attributePaint_face_vertexColor_alpha节点

点击Reset All Changes

选择需要绘制的Group

选择你觉得合适的光照模式

按回车键进入绘制模式, 按左上角的说明在模型上绘制Alpha, 注意FG的值:

在右下角显示设置中, 确保已启用: Optimize > Remove Backfaces:

Display mooa_outlinePreview节点, 并选中attributePaint_face_vertexColor_alpha节点, 然后启用材质显示即可实时绘制并预览描边:

绘制完成后使用OUTPUT_FBX或OUTPUT_OBJ节点导出模型, 并导入UE.

然后描边材质中启用Use Vertex Color A as Outline Width, 你就能看到修改后的结果:

常见问题​

错误的描边形状​

这种描边的原理是将网格向外挤出, 然后仅渲染其背面作为描边. 由于挤出方向是最后计算的, 在建模过程中可能难以发现问题.

以下原因都可能导致描边挤出方向错误:

网格数据问题:

错误或者缺失的法线

错误或者缺失的UV

一个面的UV面积为0

网格拓扑问题:

一条边的长度为0

一个面的面积为0

多于4个边的多边形

位置重合的顶点

多于2个多边形共用同一条边

距离很近的多层网格, 如果描边宽度大于网格间隙就会导致穿模

单面网格, 描边一定会在正反面交界处断开

一些建议:

在导出模型之前仔细确认数据是否正确, 是否有非法拓扑

你可以在Houdini的Geometry Spreadsheet面板中检查所有几何属性

确保在Houdini中使用了mooa_dataInit节点

Houdini的Clean/PolyDoctor节点可以快速检查并修复非法拓扑

在UE中使用BP_MooaLookDevTool检查烘焙的数据

仔细检查描边出错的顶点附近的网格

避免给单面网格添加外描边

使用内描边替代外描边

如果一定要使用外描边, 务必确保正反面交界处的宽度为0

避免给距离很近的复杂多层网格添加外描边

使用内描边替代外描边

降低宽度

Alembic​

虽然Houdini在导出Alembic时可以通过Additional UV Attributes导出多个UV通道, 但是UE导入Alembic为Geometry Cache时不支持多个UV通道.

由于Alembic通常只用于离线生产或过场动画, 所以你可以连同mooa_outlinePreview节点生成的描边网格一起导出到UE. 并且要确保导入设置中的Compressed Position Precision足够小.

Morph Target​

如果Morph Target不影响描边, 则需要将Project Settings > Rendering > Default Skin Cache Behavior设为Inclusive.

- 内描边​

与外描边相对, 内描边通常直接画在贴图上. 内描边和外描边相互配合可以实现很漂亮的描边效果.

该方法的有点是简单且可控, 但由于贴图有分辨率限制, 加上描边通常很细, 导致在近距离观察时描边会出现模糊和锯齿.

这些方法可以在不增加贴图分辨率的同时减少模糊和锯齿:

- 本村线抗锯齿​

在GUILTY GEAR中, 本村・C・純也提出了一种叫"本村线"的方法, 通过特殊的UV布局和贴图, 可以不受分辨率限制在任何距离获得完美的内描边:

用常规方法画在贴图上的内描边使用本村线获得的内描边

本村线的UV和贴图远处观察本村线内描边近处观察本村线内描边

常规方法的UV和贴图远处观察常规内描边近处观察常规内描边

该方法无需依赖渲染算法即可获得高精度的内描边, 且在不同引擎和渲染器间通用, 但是美术师的工作量非常大.

- SDF抗锯齿​

还有一种方法通过将常规方法的内描边贴图转换为SDF贴图以提高精度并且宽度可控, 类似于基于SDF的高精度文字渲染.

MooaToon暂不支持此方法.

- 后处理描边​

后处理描边是在屏幕空间内对深度/法线/颜色缓冲区做卷积计算得出的描边.

优点是全屏生效, 性能开销与场景复杂度无关, 且可以实现几乎全部类型描边.

缺点是难以精确控制局部描边.

如果需要精确控制描边可见性与宽度, 需要对渲染管线做一些额外开发, 例如二之国 (CG world 2018-06):

固有色顶点色Mesh ID顶点色突变的地方会检测为描边

目前你可以直接通过插件获得后处理描边, 比如:

Post Process Hand Draw Outline

Stylized Post Process Material Pack vol.1

- Pencil+​

Pencil+是电影行业常用的描边插件, 其代表着行业最高的品质, 可控性和易用性.

但只能用于离线用途, 且目前并无UE版本.

- 其他前沿技术​

近几年学术界出现了一些新技术, 比如实时的带笔触的描边, 基于神经网络的描边等.

但离落地到工业界还需要一段时间.