三角剖分算法(delaunay)

开篇

在做一个Low Poly的课题，而这种低多边形的成像效果在现在设计中越来越被喜欢，其中的低多边形都是由三角形组成的。

而如何自动生成这些看起来很特殊的三角形，就是本章要讨论的内容。

项目地址： https://github.com/zhiyishou/polyer

Demo：https://zhiyishou.github.io/Polyer

选择

其是最先是由很多离散的点组成，基于这个确定的点集，将点集连接成一定大小的三角形，且分配要相对合理，才能呈现出漂亮的三角化。

这时则要求使用三角剖分算法（Delaunay），引于百度百科《Delaunay三角剖分算法》对Delaunay三角形的定义为：

【定义】三角剖分：假设V是二维实数域上的有限点集，边e是由点集中的点作为端点构成的封闭线段, E为e的集合。那么该点集V的一个三角剖分T=(V,E)是一个平面图G，该平面图满足条件：

1.除了端点，平面图中的边不包含点集中的任何点。

2.没有相交边。

3.平面图中所有的面都是三角面，且所有三角面的合集是散点集V的凸包。

在实际中运用的最多的三角剖分是Delaunay三角剖分，它是一种特殊的三角剖分。先从Delaunay边说起：

【定义】Delaunay边：假设E中的一条边e（两个端点为a,b），e若满足下列条件，则称之为Delaunay边：存在一个圆经过a,b两点，圆内(注意是圆内，圆上最多三点共圆)不含点集V中任何其他的点，这一特性又称空圆特性。

【定义】Delaunay三角剖分：如果点集V的一个三角剖分T只包含Delaunay边，那么该三角剖分称为Delaunay三角剖分。

【定义】假设T为V的任一三角剖分，则T是V的一个Delaunay三角剖分，当前仅当T中的每个三角形的外接圆的内部不包含V中任何的点。

如图，将离散点联结成Delaunay三角形

算法

关于Delaunay三角形的算法，有翻边算法、逐点插入算法、分割合并算法、Bowyer-Watson算法等。

而在这几种算法中，逐点插入算法比较简单、易懂，在本文中只针对该算法进行讨论，该算法也是目前使用最为广泛的Delaunay算法。

在该算法中，主要应用Delaunay三角形【定义4】，理解下来就是每一个三角形的外接圆圆内不能存在点集内的其它任何一点，而有时候会出现点在外接圆上的情况，这种情况被称为“退化”。

在文章《Triangulate》里对该方法进行了分析，并提出了伪代码思路：

subroutine triangulate
input : vertex list
output : triangle list
   initialize the triangle list
   determine the supertriangle
   add supertriangle vertices to the end of the vertex list
   add the supertriangle to the triangle list
   for each sample point in the vertex list
      initialize the edge buffer
      for each triangle currently in the triangle list
         calculate the triangle circumcircle center and radius
         if the point lies in the triangle circumcircle then
            add the three triangle edges to the edge buffer
            remove the triangle from the triangle list
         endif
      endfor
      delete all doubly specified edges from the edge buffer
         this leaves the edges of the enclosing polygon only
      add to the triangle list all triangles formed between the point 
         and the edges of the enclosing polygon
   endfor
   remove any triangles from the triangle list that use the supertriangle vertices
   remove the supertriangle vertices from the vertex list
end

其方法虽然可实现三角化，但是效率还是不太高

在看过https://github.com/ironwallaby/delaunay该js也是基于该伪代码进行编写的，但是作者在其中进行了一次排序优化，使得代码运行效率得到了提高

优化后的伪代码为：

input: 顶点列表(vertices)　　　　　　　　　　　　　　　　　　　　  　//vertices为外部生成的随机或乱序顶点列表
output:已确定的三角形列表(triangles)
　　　　初始化顶点列表
　　　　创建索引列表(indices = new Array(vertices.length))　　　　//indices数组中的值为0,1,2,3,......,vertices.length-1
　　　　基于vertices中的顶点x坐标对indices进行sort　　  　　　　　  //sort后的indices值顺序为顶点坐标x从小到大排序（也可对y坐标，本例中针对x坐标）
　　　　确定超级三角形
　　　　将超级三角形保存至未确定三角形列表（temp triangles）
　　　　将超级三角形push到triangles列表
　　　　遍历基于indices顺序的vertices中每一个点　　　　　　　　　  　//基于indices后，则顶点则是由x从小到大出现
　　　　　　初始化边缓存数组（edge buffer）
　　　　　　遍历temp triangles中的每一个三角形
　　　　　　　　计算该三角形的圆心和半径
　　　　　　　　如果该点在外接圆的右侧
　　　　　　　　　　则该三角形为Delaunay三角形，保存到triangles
　　　　　　　　　　并在temp里去除掉
　　　　　　　　　　跳过
　　　　　　　　如果该点在外接圆外（即也不是外接圆右侧）
　　　　　　　　　　则该三角形为不确定        　　　　　　　　　     //后面会在问题中讨论
　　　　　　　　　　跳过
　　　　　　　　如果该点在外接圆内
　　　　　　　　　　则该三角形不为Delaunay三角形
　　　　　　　　　　将三边保存至edge buffer
　　　　　　　　　　在temp中去除掉该三角形
　　　　　　对edge buffer进行去重
　　　　　　将edge buffer中的边与当前的点进行组合成若干三角形并保存至temp triangles中
　　　　将triangles与temp triangles进行合并
　　　　除去与超级三角形有关的三角形
end

大多数同学看过伪代码后还是一头雾水，所以用图来解释这个过程，我们先用三点来做实例：

如图，随机的三个点

根据离散点的最大分布来求得随机一个超级三角形（超级三角形意味着该三角形包含了点集中所有的点）

我的方法是根据相似三角形定理求得与矩形一半的小矩形的对角三角形，扩大一倍后则扩大后的直角三角形斜边经过点(Xmax,Ymin)

但是为了将所有的点包含在超级三角形内，在右下角对该三角形的顶点进行了横和高的扩展，并要保证这个扩展三角形底大于高，才能实现包含

这样求得的超级三角形不会特别大使得计算复杂，而且过程也简单，并将超级三角形放入temp triangles中

接下来就像是伪代码中描述的那样，对temp triangle中的的三角形遍历画外接圆，这时先对左边的第一个点进行判断，其在圆内

所以该三角形不为Delaunay三角形，将其三边保存至edge buffer中，temp triangle中删除该三角形

将该点与edge buffer中的每一个边相连，组成三个三角形，加入到temp triangles中

再将重复对temp triangles的遍历并画外接圆，这时使用的是第二个点来进行判断

该点在三角形1外接圆右侧，则表示左侧三角形为Delaunay三角形，将该三角形保存至triangles中
该点在三角形2外接圆外侧，为不确定三角形，所以跳过（后面会讲到为什么要跳过该三角形），但并不在temp triangles中删除
该点在三角形3外接圆内侧，则这时向清空后的edge buffer加入该三角形的三条边，并用该点写edge buffer中的三角边进行组合，组合成了三个三角形并加入到temp triangles中