prideout / polygon.js

tessellation of concave polygons with holes in Javascript

Home Page:https://prideout.net/polygon.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

If you've got a simple concave polygon with holes and you want to tessellate it into triangles, a simple ear clipping algorithm might be the way to go. Another popular method is constrained Delaunay triangulation (CDT) but that's a bit overkill if your source data is a directed polyline (as oppposed to a point cloud).

And, if you simply want to see the triangles but don't care about storing the topology, you could probably use the stencil buffer trick described here.

Otherwise, feel free to use my ear clipping implementation! It's written in coffeescript (polygon.coffee) but it's also available as a single-file Javascript library: polygon.js.

Javascript usage example:

contour = [{x:520,y:440},{x:315,y:100},{x:90,y:440}];
hole = [{x:300,y:290},{x:330,y:290},{x:315,y:380}];
triangles = POLYGON.tessellate(contour, [hole]);
console.info("indices: " + triangles);

Generates output like this:

indices: 4,0,1,3,4,1,3,1,2,5,3,2,5,2,0,5,0,4,4,5,4,4,4,4 

The triangle indices refer to a point list that is the concatenation of contour and hole. Visually, the tessellation for this example looks like this:

tess

Of course, ear clipping can handle much more complex polygons, such as:

fancy

To try it out for yourself, go here.

About

tessellation of concave polygons with holes in Javascript

https://prideout.net/polygon.js/

License:Other


Languages

Language:JavaScript 84.8%Language:CoffeeScript 15.2%