Merge pull request #5914 from davepagurek/fix/tess-normal

Author: Qianqianye

src/webgl/p5.RendererGL.js

@@ -1494,11 +1494,27 @@ p5.RendererGL.prototype._initTessy = function initTesselator() {
 };
 
 p5.RendererGL.prototype._triangulate = function(contours) {
-  // libtess will take 3d verts and flatten to a plane for tesselation
-  // since only doing 2d tesselation here, provide z=1 normal to skip
-  // iterating over verts only to get the same answer.
-  // comment out to test normal-generation code
-  this._tessy.gluTessNormal(0, 0, 1);
+  // libtess will take 3d verts and flatten to a plane for tesselation.
+  // libtess is capable of calculating a plane to tesselate on, but
+  // if all of the vertices have the same z values, we'll just
+  // assume the face is facing the camera, letting us skip any performance
+  // issues or bugs in libtess's automatic calculation.
+  const z = contours[0] ? contours[0][2] : undefined;
+  let allSameZ = true;
+  for (const contour of contours) {
+    for (let j = 0; j < contour.length; j += 12) {
+      if (contour[j + 2] !== z) {
+        allSameZ = false;
+        break;
+      }
+    }
+  }
+  if (allSameZ) {
+    this._tessy.gluTessNormal(0, 0, 1);
+  } else {
+    // Let libtess pick a plane for us
+    this._tessy.gluTessNormal(0, 0, 0);
+  }
 
   const triangleVerts = [];
   this._tessy.gluTessBeginPolygon(triangleVerts);

test/unit/webgl/p5.RendererGL.js

@@ -1010,6 +1010,46 @@ suite('p5.RendererGL', function() {
 
       done();
     });
+
+    test('TESS handles vertex data perpendicular to the camera', function(done) {
+      var renderer = myp5.createCanvas(10, 10, myp5.WEBGL);
+
+      myp5.textureMode(myp5.NORMAL);
+      renderer.beginShape(myp5.TESS);
+      renderer.vertex(-10, 0, -10);
+      renderer.vertex(10, 0, -10);
+      renderer.vertex(10, 0, 10);
+      renderer.vertex(-10, 0, 10);
+      renderer.endShape(myp5.CLOSE);
+
+      assert.equal(renderer.immediateMode.geometry.vertices.length, 6);
+      assert.deepEqual(
+        renderer.immediateMode.geometry.vertices[0].array(),
+        [10, 0, 10]
+      );
+      assert.deepEqual(
+        renderer.immediateMode.geometry.vertices[1].array(),
+        [-10, 0, -10]
+      );
+      assert.deepEqual(
+        renderer.immediateMode.geometry.vertices[2].array(),
+        [10, 0, -10]
+      );
+      assert.deepEqual(
+        renderer.immediateMode.geometry.vertices[3].array(),
+        [-10, 0, -10]
+      );
+      assert.deepEqual(
+        renderer.immediateMode.geometry.vertices[4].array(),
+        [10, 0, 10]
+      );
+      assert.deepEqual(
+        renderer.immediateMode.geometry.vertices[5].array(),
+        [-10, 0, 10]
+      );
+
+      done();
+    });
   });
 
   suite('setAttributes', function() {