Fix earcut bug - triangulating faces with +4 vertices

js/pattern.js

@@ -544,15 +544,19 @@ function initPattern(globals){
 
     function processFold(fold, returnCreaseParams){
 
-        rawFold = JSON.parse(JSON.stringify(fold));//save pre-triangulated for for save later
-        //make 3d
-        for (var i=0;i<rawFold.vertices_coords.length;i++){
-            var vertex = rawFold.vertices_coords[i];
-            if (vertex.length === 2) {//make vertices_coords 3d
-                rawFold.vertices_coords[i] = [vertex[0], 0, vertex[1]];
-            }
+        //add missing coordinates to make 3d, and flip y and z for internal use
+        //FOLD spec says that, beyond two dimensions,
+        //"all unspecified coordinates are implicitly zero"
+        var is2d = true;
+        for (var i=0;i<fold.vertices_coords.length;i++){
+            var vertex = fold.vertices_coords[i];
+            if (vertex[2]) is2d = false;
+            fold.vertices_coords[i] = [vertex[0], vertex[2] || 0, vertex[1]];
         }
 
+        //save pre-triangulated faces for later saveFOLD()
+        rawFold = JSON.parse(JSON.stringify(fold));
+
         var cuts = FOLD.filter.cutEdges(fold);
         if (cuts.length>0) {
             fold = splitCuts(fold);
@@ -562,7 +566,7 @@ function initPattern(globals){
         delete fold.vertices_vertices;
         delete fold.vertices_edges;
 
-        foldData = triangulatePolys(fold, true);
+        foldData = triangulatePolys(fold, is2d);
 
         for (var i=0;i<foldData.vertices_coords.length;i++){
             var vertex = foldData.vertices_coords[i];
@@ -1011,17 +1015,55 @@ function initPattern(globals){
             }
 
             var faceVert = [];
-            for (var j=0;j<face.length;j++){
-                var vertex = vertices[face[j]];
-                faceVert.push(vertex[0]);
-                faceVert.push(vertex[1]);
-                if (!is2d) faceVert.push(vertex[2]);
+            var triangles = [];
+            if (is2d) {
+                for (var j=0;j<face.length;j++){
+                    var vertex = vertices[face[j]];
+                    faceVert.push(vertex[0]);
+                    faceVert.push(vertex[2]);
+                }
+                triangles = earcut(faceVert, null, 2);
+            } else {
+                // earcut only uses the two first coordinates for triangulation...
+                // as a fix, we try each of the dimension combinations until we get a result
+                for (var j=0; j<3; j++) {
+                    faceVert = [];
+                    for (var k=0;k<face.length;k++){
+                        var vertex = vertices[face[k]];
+                        faceVert.push(vertex[j]);
+                        faceVert.push(vertex[(j + 1) % 3]);
+                        faceVert.push(vertex[(j + 2) % 3]);
+                    }
+                    triangles = earcut(faceVert, null, 3);
+                    if (triangles.length > 0) break;
+                }
             }
 
-            var triangles = earcut(faceVert, null, is2d? 2:3);
+            // triangles from earcut() can have backwards winding relative to original face
+            // [https://github.com/mapbox/earcut/issues/44]
+            // we look for the first edge of the original face among the triangles;
+            // if it appears reversed in any triangle, we flip all triangles
+            var needsFlip = null;
+            for (var j=0;j<triangles.length;j+=3){
+                for (var k=0; k<3; k++) {
+                    if (triangles[j + k] === 0 && triangles[j + (k+1)%3] === 1) {
+                        needsFlip = false;
+                        break;
+                    } else if (triangles[j + k] === 1 && triangles[j + (k+1)%3] === 0) {
+                        needsFlip = true;
+                        break;
+                    }
+                }
+                if (needsFlip != null) break;
+            }
 
             for (var j=0;j<triangles.length;j+=3){
-                var tri = [face[triangles[j+2]], face[triangles[j+1]], face[triangles[j]]];
+                var tri;
+                if (needsFlip) {
+                    tri = [face[triangles[j+2]], face[triangles[j+1]], face[triangles[j]]];
+                } else {
+                    tri = [face[triangles[j]], face[triangles[j+1]], face[triangles[j+2]]];
+                }
                 var foundEdges = [false, false, false];//ab, bc, ca
 
                 for (var k=0;k<faceEdges.length;k++){

js/saveFOLD.js

@@ -37,7 +37,7 @@ function saveFOLD(){
 
     for (var i=0;i<geo.vertices.length;i++){
         var vertex = geo.vertices[i];
-        json.vertices_coords.push([vertex.x, vertex.y, vertex.z]);
+        json.vertices_coords.push([vertex.x, vertex.z, vertex.y]);
     }
 
     var useTriangulated = globals.triangulateFOLDexport;