Monster Farm 开发日志 2017.02.04

这周主要讲讲我们的edge detection的技术吧，先预警这是技术文，看着各种名词会头痛的可以赶紧关掉了。这篇主要讲的是Postrender实现的edge detection和外面toon shader的edge等妖艳贱货不是一个东西。写这篇日志一是记录下来自己的研究历程，二是感谢前人研究的铺垫，三是希望对大家有所启发。

其实原理很简单，三张图就解释清楚了。你照相机渲染的图片，sample几次并且每次sample都往不同方向移一移，然后找到颜色和周围环境不同的的地方就是边边了。写到这基本就没什么好说的了，后面的就是不同方式利用这个技巧了。（日了，这个内联不能改大小？只能拆行？就特么不能3图并排放？）

由于本人是个描边控，一直深爱给各种东西描边，在还没开始项目的时候我就开始研究怎么做个好看的描边效果，于是找到了一些先驱，他就是正在做Manifold Garden的William Chyr。

他写了很多关于edge detection的文章，和unity自带的几种edge detection技术类似，都是通过相机渲染出来的depth和normal图，然后调不同sample具体深度区别和normal图颜色区别的参数来描边，如果有人没见过，depth和normal图分别长这样：

先要感谢一下他在我当时研究的时候他对我的帮助很大，通过他的文章理解了这些个东西原理都是怎么回事儿。通过他我知道了另一个他觉得描边做的很干净很duang很屌的人，他就是Return of the Obra Dinn的作者Lucas Pope，他更著名的一款游戏叫papers, please。

他把物体通过在空间里的的不同位置以及不同面的向量随机上一个颜色，然后对图片进行多次采样、移位、区分然后画出边界。他的整个devblog有完整的技术细节，包括他怎么样区分光照和texture并且进行dither：

我们基本是用的Lucas Pope的描边技巧，通过物体在空间的具体位置随机赋予一个颜色然后渲染出的边界：

大概就是酱紫，其实还有一些技术细节，根据模型的不同，生成的线图很可能有不少蜜汁噪点，William Chyr在这个问题上纠结了两年，我的解决方案自认为还挺巧妙的，给他发了我的实现方式，但我的Twitter像个僵尸号，所以没回我也很正常，有机会的话跟大家讲讲我是怎么除掉这些个噪点的。

整个edge detection具体实现的代码嘛，暂时没法公开。但是有兴趣深入研究的可以跑去William Chyr和Lucas Pope的blog看，我会在文末附上地址，我就不分他们流量了。

虽然实现起来这么蛋疼，但是我们组里的美术貌似并不喜欢Orz，有移除的走向，不过反正我是挺喜欢的。

我是个平常不说话，写个几百字文章更是每次都要焦头烂额，和zed不一样，他很能说，虽然我觉得大部分都是错的。特别是zed上一篇就说了个不特别对的东西，说要周更，于是我就只能被迫恁一篇出来。我这篇要纠正这个错误，说要月更，这样子说如果实际我周更了，老爷们就会觉得我们很有诚意，如果月更了就说明我们诚实善良守信，如果我们石更了，那就有什么地方出问题了。

通过前文你应该知道我是个粗人，爱说脏话，文章一直是小学水平，那时老师说要承上启下，前文说到写这篇日志有三个目的，记性好的你可能还记得，但记性差的我自然已经不记得我说了啥，因为那都是放屁，主要目的还是为了涨粉，但是发这种技术文真的能涨粉么，我并不知道？呵呵。希望我这篇好像什么都说了又好像什么都没说你看完最后还是不知道怎么实现的文章对你有所帮助，也希望大家多多支持MonsterFarm。

William Chyr的Blog

http://williamchyr.com/2015/08/edge-detection-shader-deep-dive-part-1-even-or-thinner-edges/

Lucas Pope的Return of Obra Dinn的Dev Blog

https://forums.tigsource.com/index.php?topic=40832.80

=============================================================

如果您对Monster Farm的后续信息和更新感兴趣，欢迎关注我们的微博：
@Hi_MoE嗨盟游戏组

或本专栏：纽大游戏故事 知乎专栏