Triangulation library works with firefox but not in Chrome?

Question

I am doing a triangulation by using the library Poly2Tri.

My code:

var swctx = new poly2tri.SweepContext(contour);
swctx.triangulate();

var triangles = swctx.getTriangles(); 
for (var w = 0; w < triangles.length; w++) {
    pts_tri = triangles[w].points_;
    index1 = pts2.findIndex(x => x[0] == pts_tri[0].x && x[1] == pts_tri[0].y)
} 

for (var k = 0; k < result.length; k++) { 
    geometry.faces.push(
        new THREE.Face3(result[k][0].id, result[k][1].id, result[k][2].id)
    );
}

It doesn't raise an error while loading the libraries!

Result:

1.) Mozzila Firefox: works (no error occurs)!

2.) Google Chrome: it does not work! (error message: cannot handle collinear points)

My Question is:

1.)How can it be that the same code including the same library works for Firefox but not for Chrome? Does it depend on the Javascript engine of the Browser?

So I read that Chrome uses V8 engine and Firefox uses Rhino/SpiderMonkey. But I thought it depends only on the library which I am using for the triangulation!

2.) How can I run the code in Chrome (by using the same library?) Is there a possibility to avoid this error?

3.) Does the library support collinear points? Because in Firefox it works!!!

Answer 1

You should always try to prevent collinear (and duplicate) points inside your geometry definition when triangulating shapes. Best would be to cleanup your data before triangulation and remove such points.

Most libraries for tessellation or triangulation will have issues handling collinear points.

Note also that if all points are collinear (meaning they are all on one single line) triangulation is not possible since a line cannot be divided into triangles.

You can use the determinant to detect whether points are collinear (the determinant is zero d = 0 in such cases). But there are probably more efficient algorithms. Read also here also more on this topic in this question on stackoverflow.

---

Calculate the determinant

Since you are using three.js you can easily use the .determinant() method of the THREE.Matrix3 class to calculate the determinant of three points:

var v1 = ...
var v2 = ...
var v3 = ...

var matrix = new THREE.Matrix3();

matrix.set(
    v1.x, v1.y, 1, 
    v2.x, v2.y, 1,
    v3.x, v3.y, 1
);

var d = matrix.determinant();