这边文章讲述的是项目中用到的一些卡通渲染描边相关技术。

一、Back Face外扩描边

背面外扩描边和后处理描边是卡通渲染中主要应用到的描边方式。

1.1 实现原理

第一个Pass正常渲染物体。第二个Pass只渲染背面,同时顶点沿着法线方向偏移,开启深度测试。
第二个Pass开启深度测试的用处一个是重叠部分不会显示出来,另外可以利用Early-Z减少需要处理的片元数量。

1.2 描边的法线优化

由于我们是沿着法线偏移顶点,那么最终的描边结果对法线的依赖很大。如果法线分布有问题,可能造成描边断裂的情况。如下图所示:

这是因为四个面的法线都是垂直于面的,在角的地方没有连续性。一种比较好的解决方式是计算平均法线存储在不使用的uv通道内,比如uv8,然后使用这个平均法线去计算描边。
何谓平均法线?即顶点周围面法线的平均或者加权平均。
如何计算这个平均法线了?这个可以编写外部工具对fbx直接离线修改;或者编写Unity的脚本修改uv8,不过在Unity内已经修改不了Fbx文件了,所以去修改Mesh的uv8数据,实际上这个修改是存储在工程的缓存数据内的,因此需要给Mesh新增一个Tag,如果有这个Tag导入Mesh的时候就需要就需要计算平滑法线。

1.3 根据摄像机修正描边宽度

一个是距离摄像机的距离,理论上来说应该是距离摄像机越远描边应该越小,这个可以用摄像机空间的z值来表示。另外一个是Fov,Fov越大描边应该越小。
加入这2个修正因子后,描边的粗细会看起来自然很多。

1.4 描边深度偏移控制消隐

有些地方美术实际上不希望出现描边。比如,头发的中间部位,美术只希望头发的边缘能看到描边。但是,正对着角色的时候,头发的中间部分实际上也是外扩的边缘,同样会看到描边。
这种情况可以通过使用深度偏移来修改顶点着色器的裁剪坐标,从而消隐描边。实际上,就是把不需要看到的描边往里推,从而被角色本身覆盖,就看不到描边了。
那么,哪些描边需要消隐了?就是下面要说的顶点色。

1.5 顶点色控制描边宽度和深度偏移

我们提供了顶点色的两个通道来分别控制描边的粗细和深度偏移。粗细很好理解,就是有些部位描边宽有些更窄。深度偏移就是上面说的消隐问题,有些地方的描边希望看不到就可以增加一定的深度偏移使其被角色挡住。
顶点色需要美术使用DCC工具去涂色,或者也可以在Unity中使用编辑器去涂,然后保存下来。还是类似的问题,在Unity中不能修改原始的Fbx文件,因此涂色后的网格数据只能保存为.asset。
当前项目中使用的是这篇文章:在Unity中写一个简单的顶点颜色编辑器的顶点色工具,基本需求能够满足。

最终的描边效果如下所示:

可以看到头顶的头发通过顶点色深度偏移控制了消隐,头发的描边粗细也是通过另一个顶点色通道控制的。

二、 后处理描边

后处理描边是在图像空间使用边缘检测因子得到边缘信息,通常是检测深度图或者法线图,比颜色图效果更好。因为,深度或者法线在角色边缘有明显的不连续性。但是,后处理描边的缺点是无法控制描边或者说很难像外扩描边一样精细的控制描边效果,同时还会把内描边也检测出来。
对于头发的描边,后处理描边这些缺点就是非常致命的,因为我们主要用的还是外扩描边。

三、其它描边方式

3.1 NdotV

类似简单的边缘光实现方式,也可以用来做描边,但是效果和控制力度肯定是达不到需求的。

3.2 深度贴图描边

之前说的深度贴图边缘光和阴影同样可以用来做描边,也能使用顶点颜色提供一定的控制粒度,比如控制粗细,但是也无法做深度偏移消隐等。

四、内描边

所谓内描边,指的是物体内部的描边,非物体边缘看到的描边。之前说的技术基本上都是针对外描边的。

4.1 本村线

简单来说,是直接在贴图上画描边,同时这些描边基本是跟轴对齐的。不过工作量很大,而且很大细节需要控制,很少有美术愿意采用这种方式,因此不做过多的讨论。
如下图:

4.2 后处理内描边

网上有文章提到二之国中的做法是在顶点属性通道中记录边缘程度,然后在后处理中来进行绘制内描边。
如下图所示:

猜测是类似于顶点色的方式,让美术使用工具在顶点色中涂色边缘程度,
然后需要一个Pass将顶点色上的边缘程度属性输出到一个RT上,最终在后处理Pass中检测这个RT对应像素的边缘程度完成内描边。
至于如何将边缘程度转换为描边,需要参考相关资料才能弄清楚了,这里的日文看不懂啊。

五、参考资料

【01】从零开始的卡通渲染-描边篇
卡通渲染学习总结

Unity下的日式卡通渲染实现-描边篇(三)相关推荐

  1. Unity下的日式卡通渲染实现-着色篇(一)

    这篇文章讲述的是项目中二次元日式卡通着色渲染用到的一些跟着色相关的技术点. 一.卡通着色 何谓卡通着色?大概是让角色看起来卡通的角色吧.这里说的卡通着色,实际上指的是色阶着色.即根据光照和法线计算出当 ...

  2. Unity下的日式卡通渲染实现-阴影篇(二)

    这边文章讲述的是项目中用到的一些卡通渲染阴影相关技术. 一.SDF面部阴影 SDF这个概念具体是什么意思了?可以去观看闫令琪在B站上的101课程,有一节专门讲述了SDF的定义和混合SDF能够产生什么效 ...

  3. 日式卡通渲染笔记(罪恶装备 碧蓝幻想 原神 战双)

    **裁边漫反射(StepDiffuse) 传统的漫反射是这样** float NL = dot(N,L); float3 Diffuse = max(0,NL);//也可以除以PI 而卡通渲染里希望明 ...

  4. vulkan_日式卡通渲染(NPR)实现

    一.卡通渲染 卡通渲染是属于非真实感计算机图形学的范畴的,分为美式卡通和日式卡通两种. 美式卡通:色彩连续.存在渐变色: 日式卡通:明显的明暗交界,大范围的纯色色块: 二.着色 日式卡通渲染的着色,总 ...

  5. 二次元卡通渲染之描边

    前言 本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明 更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项 ...

  6. Unity Shader 卡通渲染 模型描边之退化四边形

    目录 前言 一.基于空间的边缘检测算法 二.退化四边形 三.Unity中的CommandBuffer和ComputeBuffer 四.构成描边的简单实例 五.模型描边的实现 前言 之前写了一篇< ...

  7. unity shader卡通渲染(描边)+阴影+多光源处理

    说道卡通渲染,应该都会想到描边: 我所学的描边有三种: 一种是计算边缘深度检测描边 一种是色差检测描边 一种是利用顶点法线向外扩展返回单色pass,使用正面裁剪 我用的第三种: pass {//剔除前 ...

  8. unity scence灯光不显示_Unity渲染编程(灯光篇)【第二卷:MobileVolumetricLight】

    MY BLOG DIRECTORY: todo... INTRODUCTION: 如果需要一个方案来渲染城镇或空旷的马路上巨量的灯光.图形程序拿到这个需求直接开始搞F+或者延迟光照,但是对于移动端的巨 ...

  9. 二次元卡通渲染——进阶技巧

    前言 随着<原神>游戏的盛行,国内对于二次元游戏这块儿领域越来越看重了.二次元项目中本身基于日本的卡通动漫而来,所以最后的本质都是为了尽量还原2D立绘,而并不像PBR追求物理正确,只要好看 ...

最新文章

  1. java.lang类在电脑哪个位置_Java中的java.lang.Class API 详解
  2. Universal-Image-Loader 示例 工具
  3. good approach for breakfast
  4. 构架高性能WEB网站的几点知识
  5. 字符串关键字的散列映射 (25 分)【详细解析】
  6. python获取键盘事件_50-用Python监听鼠标和键盘事件
  7. 【Git、GitHub、GitLab】九 工作中非常重要的一些git用法
  8. c语言多个子函数声明,C函数在多个源文件中的声明和定义
  9. idea中git分支、合并与使用
  10. elementUI表单验证
  11. sublime text常用快捷键整理
  12. configure: error: xml2-config not found. Please check your libxml2 installation
  13. FreeSwitch中的会议功能
  14. ionic 网站放在服务器,Ionic4 服务器插件-服务器Httpd - Ionic Native
  15. 二进制转化为十六进制
  16. 丽思卡尔顿游轮正式加入万豪旅享家旅行计划
  17. Go语言学习之net/http包(The way to go)
  18. win10 64位系统 打开光盘出现339错误 缺少mscomctl.ocx组件 解决方案
  19. Golang - bufio 包
  20. python爬楼梯问题_爬楼梯算法的数学思路

热门文章

  1. PHP工程师的英文是什么,php程序员英文简历模板
  2. cmake中添加引用动态链接_macos - CMake:MacOS上动态链接资源的运行时错误(dyld:未加载库) - SO中文参考 - www.soinside.com...
  3. Mac OS 安装 fink
  4. Android发展简介
  5. ps拉长psd按钮图层
  6. 数据库之函数依赖、多值依赖
  7. STM32使用printf函数的步骤和注意事项
  8. 蓝桥杯百校真题大联赛第5期(一)
  9. Java SE、Java EE 与 Spring
  10. 今晚直播!池建强、二爷邱岳、左耳朵耗子、朱赟的技术夜话