WebGL and Tessellation library?

Question

In C/C++, OpenGL has a nice library for tessellating complex polygonal shapes into triangle strips and fans. That library is "GLUtesselator".

Is there any library with the equivalent functionality for WebGL(HTML)?

Kinglet

Answer 1

Three.JS uses a triangulation function to render text to polygons. It isn't exposed publicly but it looks like it should be fairly easy to extract. Actually it is exposed as THREE.Shape.Utils.triangulateShape.

Liquate

This looks promising. Thanks! I will check it out. – Kinglet

Answer 2

GLUtesselator has been ported to javascript by Brendan Kenny at Google Maps. Here's a link to libtess.js on github.

Vladimir Agafonkin (leaflet.js, Mapbox) recently developed earcut.js which is currently "The fastest and smallest JavaScript polygon triangulation library for your WebGL apps" Here's the github link for earcut.js.

Hannie

Answer 3

I had the same issue (in HTML Canvas with Box2D shapes) and tried to use the triangulation function of Three.js, but it was far easier for me to use this really good library : https://code.google.com/p/poly2tri/

The JS Implementation is there and worked perfectly for me : https://code.google.com/p/poly2tri/source/browse/?repo=javascript#hg%2Fsrc

Muster

Answer 4

There are several libraries for that. What you use depends also on the quality of your data. Some libraries crash on duplicate points, self intersecting polygons or other inconsistencies in the data.

• poly2tri: https://github.com/r3mi/poly2tri.js
• earcut: https://github.com/mapbox/earcut
• libtess: https://github.com/brendankenny/libtess.js/

Ivon