最初做这个项目的原因是作为百度 IFE 的高级题。想起我去百度面试的时候,沈大侠问我怎么做人脸的 Low-Poly 风格渲染。我当时 blabla 扯了一堆有的没的,不知道有没有把沈大侠忽悠过去……后来不记得怎么就被忽悠去做 IFE 的这道题了,实现起来当然没有 yy 算法那么容易。前前后后绕了不少弯路,犯了不少愚蠢的错误,才得到了这样的结果。

然后我要说说这个 Low-Poly 的项目为什么要叫 Polyvia 呢?因为 Ovilia 是从 Olivia 来的,再加上 Poly 就变成了 Polyvia!是不是很有意思~ :sunglasses:

之所以昨天开源,是因为我免费的 GitHub private repo 权限昨天到期了,所以赶紧写完 UI 部分发布了,现在代码可以在 Polyvia @ GitHub 看到。效果可以在线看到,图像版的可以对上传的图片进行处理,另外做了超出题目要求的视频版。

在线运行:

图像版视频版

如果有问题或建议,欢迎报 issue 给我。

好了,废话不多说了,直接上图吧!(前面的是原图,后面的是效果图)

核心算法参见本系列的上一篇博客。主要思想就是先将图像用 Sobel 边缘检测的着色器渲染到屏幕,然后在边缘上取一些随机点,然后用 Delaunay 三角化组成三角形,用每个三角形重心处的颜色作为三角形的颜色。

涉及到的技术主要是 Three.js,尤其是着色器相关部分。我原来只试过用自己写的着色器,通过这个项目的练习,让我对 Three.js 的 EffectComposer 更熟悉了。

用到的第三方库还有用于做三角化的 ironwallaby/delaunay,用于统计帧数的mrdoob/stats.js,以及用于 UI 的dat.gui

用到的工具包括用来管理包的 Bower,用来生成 HTML 的模板 JADE,和用来自动化的强大助手 Gulp

想了解更多的话,不如到 Polyvia @ GitHub 查看源代码吧!