Merge pull request #8207 from processing/fix/buildgeom-no-faces

Fix buildGeometry with no faces

Author: davepagurek

src/webgl/GeometryBuilder.js

@@ -137,7 +137,7 @@ class GeometryBuilder {
         for (let i = 2; i < geometry.vertices.length; i++) {
           faces.push([0, i - 1, i]);
         }
-      } else {
+      } else if (shapeMode === constants.TRIANGLES) {
         for (let i = 0; i < geometry.vertices.length; i += 3) {
           if (
             !validateFaces ||

src/webgl/ShapeBuilder.js

@@ -280,8 +280,6 @@ export class ShapeBuilder {
    * @private
    */
   _tesselateShape() {
-    // TODO: handle non-PATH shape modes that have contours
-    this.shapeMode = constants.TRIANGLES;
     // const contours = [[]];
     const contours = [];
     for (let i = 0; i < this.geometry.vertices.length; i++) {
@@ -316,6 +314,15 @@ export class ShapeBuilder {
     }
 
     const polyTriangles = this._triangulate(contours);
+
+    // If there were no valid faces, we still want to use the original vertices
+    // for strokes, so we'll stop here.
+    if (polyTriangles.length === 0) {
+      return;
+    }
+
+    // TODO: handle non-PATH shape modes that have contours
+    this.shapeMode = constants.TRIANGLES;
     const originalVertices = this.geometry.vertices;
     this.geometry.vertices = [];
     this.geometry.vertexNormals = [];

test/unit/webgl/p5.Geometry.js

@@ -302,5 +302,31 @@ suite('p5.Geometry', function() {
       myp5.model(geom);
       assert.deepEqual(myp5.get(5, 5), [0, 0, 255, 255]);
     });
+
+    test('buildGeometry() with no fill works', () => {
+      myp5.createCanvas(10, 10, myp5.WEBGL);
+      const geom = myp5.buildGeometry(() => {
+        myp5.noFill();
+        myp5.beginShape();
+        myp5.vertex(0, 0);
+        myp5.vertex(0, 5);
+        myp5.vertex(5, 10);
+        myp5.endShape();
+      });
+      expect(geom.vertices.length).toBeGreaterThan(0);
+      expect(geom.faces.length).toEqual(0);
+    });
+
+    test('buildGeometry() with just a line works', () => {
+      myp5.createCanvas(10, 10, myp5.WEBGL);
+      const geom = myp5.buildGeometry(() => {
+        myp5.beginShape();
+        myp5.vertex(0, 0);
+        myp5.vertex(0, 10);
+        myp5.endShape();
+      });
+      expect(geom.vertices.length).toBeGreaterThan(0);
+      expect(geom.faces.length).toEqual(0);
+    });
   });
 });