【Unity 风格化】水墨风渲染：从总结实现方法开始

妖狐艹你老母 2023-09-25 19:42 27阅读 0赞

**写在前面**

一直比较迷风格化的东西，之前写PBR其实也是为了后面尝试PBR+NRP做铺垫，毕竟了解写实向才能进一步学习奇奇怪怪的NPR方式！话不多说，从水墨渲染开始，正式进入风格化的世界！！

--------------------

无论是什么场合下，水墨渲染的作品总是能让人眼前一亮。实际上水墨风很早就有人实现啦，思路大体都遵循

*  以某种方法勾勒边缘
 *  以某种方式调色，需要接近水墨风的色彩质感

这篇文章简单的总结一下各种实现水墨渲染的方法！

## **1 描边 双Pass** ##

实际上是偶然刷到了一个视频： [Unity-简单水墨渲染][Unity-]，效果如下：

![d37e9aeccb814d618ba21408f336e801.png][] 截图自 [Unity-简单水墨渲染\_哔哩哔哩\_bilibili][Unity-]

这位Up参考了[Unity3D教程：如何实现水墨渲染效果-腾讯游戏学堂 (tencent.com)][Unity3D_-_ _tencent.com]这篇文章的实现方法，居然是16年发的文章了，，，23年的我才开始学习orz

文章内容很简单，通篇看下来是用到black和gray图来实现的，后期会跟着实现一遍。

## 2 描边优化+Ramp结合笔触Texture ##

[Unity-一个简单的水墨渲染方法 - 知乎][Unity-_ -]，这篇文章效果其实是我最喜欢的：

![685d3964557947b2af4e9b1592ce6f90.png][]

参数相对直白，从卡通渲染的思路出发——没有什么是Ramp图解决不了的！Ramp图YYDS!!!

## 3 Blend水墨笔触Texture ##

[在Unity中如何进行水墨风3D渲染][Unity_3D]，文章发表于17年，这位作者直接从一个公鸡模型开始手把手教方法，从：

![4ee2a86fb6b54163b9372aae9d34d2e8.png][]

到

![8244871e83f44057808382077ca6a3db.png][]

边缘检测就是大家熟知的方法，色彩处理就有点类似于直接在PS等绘图软件中实现水墨效果，类似PS中柔和、强光等。

这篇文章[【Unity Shader】 水墨风格渲染：如何优雅的画一只猴子][Unity Shader_]提供的方案，其实就是基于上面这篇文章的实现方法，但在后面色彩处理的部分讲得更加全面，，效果如下：

![ba8c4159efa94e6fbca64bc0a5038ebe.jpeg][]

这种方法存在的问题：

![45375e45dceb46d39637bcdf2254d196.png][]

这篇文章[UnityShader水墨渲染的尝试][UnityShader]实现思路也是一样的，就是混合再混合：

![92a06b1c86e146839ed35e0c6103797c.png][]

各种文章均贴出了这篇[Photoshop图层混合模式计算公式大全（转）][Photoshop]，自己实现的话参考着来，也可以练习各种效果的混合啦。

## 4 LowPoly：模糊+深度描边+笔触Texture滤波 ##

是[Unity Shader实现水墨效果 / 张生荣 (zhangshengrong.com)][Unity Shader_ _ _ _zhangshengrong.com]中展示的方法，感觉实现起来步骤繁琐，描边的话跟上面的都不一样，是深度算出边缘再描边的：

![a83d615c9a62424e89efaf45d520afbe.png][]

效果：

![c0208d523faf497dbd693b54a454f731.png][]

同样的，[unity shader 后处理实现水墨风格渲染][unity shader]，这篇文章实现思路一模一样，而且模型也是lowpoly的，这个方法比较适合LowPoly：

![927c5692861349159f8d1e8441882294.png][]

![2498f1fc75d64105afd1dc2be1a58207.png][]

说实话，这种方法做出来的效果有点点丑。。。本身LowPoly就是一板一眼的光影，但是水墨需要一种层次的感觉，所以简单的模糊并不能达到水墨的效果，反而会显脏。

## 5 层权重+Ramp+自发光\* ##

这算是一个插播！是Blender中实现水墨风勾线效果的方法，只需要简单几个节点就可以完成：

![7cd310ac64054fd69da231ed79a7d200.png][]

Blender里层权重节点，

![8638e83be17e48dca1fddce63605615f.png][]

这种描边的效果也很好！可以想想怎么在Unity里实现~

## 6 Blender水墨材质 ##

这也是偏个题，因为能在Blender里实现的材质！一定能在Unity里实现！！！今天就来复刻一个（如果时间允许的话。。。）

[blender水墨材质制作演示][blender]

[Unity-]: https://www.bilibili.com/video/BV1h54y1X7zD/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=df915e2f42f68699ce7f9d08e53731c5
[d37e9aeccb814d618ba21408f336e801.png]: https://img-blog.csdnimg.cn/d37e9aeccb814d618ba21408f336e801.png
[Unity3D_-_ _tencent.com]: https://gwb.tencent.com/community/detail/106312
[Unity-_ -]: https://zhuanlan.zhihu.com/p/98948117
[685d3964557947b2af4e9b1592ce6f90.png]: https://img-blog.csdnimg.cn/685d3964557947b2af4e9b1592ce6f90.png
[Unity_3D]: https://zhuanlan.zhihu.com/p/25339585
[4ee2a86fb6b54163b9372aae9d34d2e8.png]: https://img-blog.csdnimg.cn/4ee2a86fb6b54163b9372aae9d34d2e8.png
[8244871e83f44057808382077ca6a3db.png]: https://img-blog.csdnimg.cn/8244871e83f44057808382077ca6a3db.png
[Unity Shader_]: https://zhuanlan.zhihu.com/p/63893540
[ba8c4159efa94e6fbca64bc0a5038ebe.jpeg]: https://img-blog.csdnimg.cn/ba8c4159efa94e6fbca64bc0a5038ebe.jpeg
[45375e45dceb46d39637bcdf2254d196.png]: https://img-blog.csdnimg.cn/45375e45dceb46d39637bcdf2254d196.png
[UnityShader]: https://blog.csdn.net/weixin_42362584/article/details/105918198
[92a06b1c86e146839ed35e0c6103797c.png]: https://img-blog.csdnimg.cn/92a06b1c86e146839ed35e0c6103797c.png
[Photoshop]: https://www.cnblogs.com/kex1n/p/3663533.html
[Unity Shader_ _ _ _zhangshengrong.com]: https://www.zhangshengrong.com/p/ArXGb738Nj/
[a83d615c9a62424e89efaf45d520afbe.png]: https://img-blog.csdnimg.cn/a83d615c9a62424e89efaf45d520afbe.png
[c0208d523faf497dbd693b54a454f731.png]: https://img-blog.csdnimg.cn/c0208d523faf497dbd693b54a454f731.png
[unity shader]: https://blog.csdn.net/nannan0811666/article/details/79452197
[927c5692861349159f8d1e8441882294.png]: https://img-blog.csdnimg.cn/927c5692861349159f8d1e8441882294.png
[2498f1fc75d64105afd1dc2be1a58207.png]: https://img-blog.csdnimg.cn/2498f1fc75d64105afd1dc2be1a58207.png
[7cd310ac64054fd69da231ed79a7d200.png]: https://img-blog.csdnimg.cn/7cd310ac64054fd69da231ed79a7d200.png
[8638e83be17e48dca1fddce63605615f.png]: https://img-blog.csdnimg.cn/8638e83be17e48dca1fddce63605615f.png
[blender]: https://www.bilibili.com/video/BV1X64y1S7Ar/?spm_id_from=333.999.0.0&vd_source=df915e2f42f68699ce7f9d08e53731c5