title: Polyvia subtitle: Low-Poly 风格的图像、视频处理 first_time: 2015.06.25 15:08:13 time: 2015.06.26 12:25:15 layout: post tags:
最初做这个项目的原因是作为<a href="https://github.com/baidu-ife/ife" target="_blank">百度 IFE</a> 的高级题。想起我去百度面试的时候，<a href="https://github.com/pissang" target="_blank">沈大侠</a>问我怎么做人脸的 Low-Poly 风格渲染。我当时 blabla 扯了一堆有的没的，不知道有没有把沈大侠忽悠过去……后来不记得怎么就被忽悠去做 IFE 的这道题了，实现起来当然没有 yy 算法那么容易。前前后后绕了不少弯路，犯了不少愚蠢的错误，才得到了这样的结果。
然后我要说说这个 Low-Poly 的项目为什么要叫 Polyvia 呢？因为 Ovilia 是从 Olivia 来的，再加上 Poly 就变成了 Polyvia！是不是很有意思~ :sunglasses:
之所以昨天开源，是因为我免费的 GitHub private repo 权限昨天到期了，所以赶紧写完 UI 部分发布了，现在代码可以在 <a class="button" href="https://github.com/Ovilia/Polyvia" target="_blank">Polyvia @ GitHub</a> 看到。效果可以在线看到，图像版的可以对上传的图片进行处理，另外做了超出题目要求的视频版。
在线运行：
<a href="https://umeecorn.com/Polyvia/image.html" class="button" target="_blank">图像版</a><a href="https://umeecorn.com/Polyvia/video.html" class="button" target="_blank">视频版</a>
如果有问题或建议，欢迎<a href="https://github.com/Ovilia/Polyvia/issues" target="_blank">报 issue</a> 给我。
好了，废话不多说了，直接上图吧！（前面的是原图，后面的是效果图）
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/1.jpg" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/1.png" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/2.jpg" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/2.png" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/3.jpg" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/3.png" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/4.jpg" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/4.png" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/5.jpg" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/5.png" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/6.jpg" />
<img class="single-img" src="{{ site.loadingImg }}" data-src="https://raw.githubusercontent.com/Ovilia/Polyvia/gh-pages/src/img/6.png" />
核心算法参见<a href="{{ site.url }}/2015/06/20/read-from-shader-texture-with-threejs/" target="_blank">本系列的上一篇博客</a>。主要思想就是先将图像用 Sobel 边缘检测的着色器渲染到屏幕，然后在边缘上取一些随机点，然后用 Delaunay 三角化组成三角形，用每个三角形重心处的颜色作为三角形的颜色。
涉及到的技术主要是 <a href="{{ site.url }}/all?tag=ThreeJs" target="_blank">Three.js</a>，尤其是着色器相关部分。我原来只试过用自己写的着色器，通过这个项目的练习，让我对 <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing.html" target="_blank">Three.js 的 EffectComposer</a> 更熟悉了。
用到的第三方库还有用于做三角化的 <a href="https://github.com/ironwallaby/delaunay" target="_blank">ironwallaby/delaunay</a>，用于统计帧数的<a href="http://github.com/mrdoob/stats.js" target="_blank">mrdoob/stats.js</a>，以及用于 UI 的<a href="http://code.google.com/p/dat-gui" target="_blank">dat.gui</a>。
用到的工具包括用来管理包的 <a href="http://bower.io/" target="_blank">Bower</a>，用来生成 HTML 的模板 <a href="http://jade-lang.com/" target="_blank">JADE</a>，和用来自动化的强大助手 <a href="http://gulpjs.com/" target="_blank">Gulp</a>。
想了解更多的话，不如到 <a class="button" href="https://github.com/Ovilia/Polyvia" target="_blank">Polyvia @ GitHub</a> 查看源代码吧！