brendankenny / libtess.js Goto Github PK

libtess.min.js

'use strict';var n;function t(a,b){return a.b===b.b&&a.a===b.a}function u(a,b){return a.b<b.b||a.b===b.b&&a.a<=b.a}......

I tried to build this library

npm i
npm run prepublish

The get the following error:

In several places the code cites a "README" that I should be looking at to understand the interface better, but README.md doesn't get into any of that detail.

With the examples and experimentation I imagine I'll be able to figure it out, but at least documenting things like the signatures of the callbacks would be helpful.

EDIT 2:

okay it seems the problem was that libtess generates a bunch of triangles with area zero. My code didn't like that very much and did stupid things.

So I guess this was my fault?

============

It appears that in some cases triangles outside the original bounds are created.

For example this polygon:

480 320 440 320 440 360 460 360 460 440 440 440 440 480 480 480 480 460 560 460 560 480 600 480 600 440 580 440 580 360 600 360 600 320 560 320 560 340 480 340

Looks like this:
https://i.imgur.com/rnJHSzp.png

libtess triangulation:
https://i.imgur.com/2MZsFIU.png

Earcut correctly triangulates:
https://i.imgur.com/4qsH4uf.png

This is one of multiple such examples I've encountered. Some were fixable by passing in the polyline in a reversed manner. This one however is not, it stays broken even when reversed. All examples had 90° angles and were basically build up from the union of multiple little squares.
Libtess manages to fix self intersections in the input, unlike earcut, which is great. But it seems it can generate self intersecting triangles on other inputs.

EDIT:
Another example is

500 320 460 320 460 420 360 420 360 460 460 460 460 560 500 560 500 460 600 460 600 420 500 420

The shape: https://i.imgur.com/nSYIqe5.png
The self intersecting triangulation: https://i.imgur.com/CGbuDf6.png

I am wondering if this is somehow my fault, but I can't see what I would be doing wrong

Hi Brendan,

Thanks so much for creating this awesome library! I've learned a lot from using it. I've tried other JS libraries like earcut, poly2tri, and several point-in-polygon libraries, but libtess.js gives the best results across many different inputs.

This is a long shot and I'm not sure where to post this but maybe you might have some insights (or alternatively this could be rubber duck debugging for me). Anyway, I'm using a mapping library called CesiumJS to render arbitrary polygons on a globe. However, I want to exclude certain polygons from being rendered, so this is where libtess.js comes in.

Using libtess.js, I've implemented code very similarly to the simple triangulation example you've provided, so initially I created a single contour of 2 triangles, as seen here (the blue and brown triangles):

Next, I added another contour for an arbitrary polygon I want to not render (it's actually a "circle" polygon with 100 points that are radius-distanced from a center point). This produced the following results, where I render every triangle returned from the array passed into gluTessBeginPolygon:

This worked better than every other library/algorithm I've tried (many others had issues triangulating the contours) but my goal is to exclude the center circle.

I tried setting the winding rule to every possible rule to no avail. However, the "GLU_TESS_WINDING_ABS_GEQ_TWO" rule seems to produce the interior contour/polygon that I'm trying to exclude, so that seemed interesting:

Here are the other rules I tried

tessy.gluTessProperty(libtess.gluEnum.GLU_TESS_WINDING_RULE, libtess.windingRule.GLU_TESS_WINDING_NEGATIVE);
tessy.gluTessProperty(libtess.gluEnum.GLU_TESS_WINDING_RULE, libtess.windingRule.GLU_TESS_WINDING_ODD);
tessy.gluTessProperty(libtess.gluEnum.GLU_TESS_WINDING_RULE, libtess.windingRule.GLU_TESS_WINDING_NONZERO);

GLU_TESS_WINDING_NEGATIVE:

GLU_TESS_WINDING_POSITIVE:

GLU_TESS_WINDING_NONZERO:

So overall, my question is: when I run gluTessBeginPolygon and pass in an array, how can I make it so the array I get back excludes the triangles generated for a particular contour?

Brendan,

I saw your Tessellation demo on G+ and was wondering about access to the WebGL extension of the Google Maps JS API - when will it be available? We're building out a product that uses the new visual refresh for Google Maps and the performance between the MapsGL enabled version on maps.google.com and our non-MapsGL version is night and day.

I have some simple benchmarks I sometimes run locally, but they need to be checked in to start solving some performance bottlenecks.

To do this well, we need good example geometry of what people actually need to triangulate, ranging from extremely simple polys (e.g. building footprints), to complicated but well behaved polys, to the self-intersecting messes commonly encountered with geo data.

@bcamper may have a good idea of representative data that's also distributable under the SGI/X11/MIT-like license used here.