fix(webgl): normalize nearly identical vertices before tessellation

Author: avinxshKD

src/webgl/ShapeBuilder.js

@@ -313,6 +313,32 @@ export class ShapeBuilder {
       }
     }
 
+    // Normalize nearly identical consecutive vertices to prevent tessellation artifacts
+    // This addresses numerical precision issues in libtess when consecutive vertices
+    // have coordinates that are almost (but not exactly) equal (e.g., differing by ~1e-8)
+    const epsilon = 1e-6;
+    for (const contour of contours) {
+      const stride = this.tessyVertexSize;
+      for (let i = stride; i < contour.length; i += stride) {
+        const prevX = contour[i - stride];
+        const prevY = contour[i - stride + 1];
+        const prevZ = contour[i - stride + 2];
+        const currX = contour[i];
+        const currY = contour[i + 1];
+        const currZ = contour[i + 2];
+
+        if (Math.abs(currX - prevX) < epsilon) {
+          contour[i] = prevX;
+        }
+        if (Math.abs(currY - prevY) < epsilon) {
+          contour[i + 1] = prevY;
+        }
+        if (Math.abs(currZ - prevZ) < epsilon) {
+          contour[i + 2] = prevZ;
+        }
+      }
+    }
+
     const polyTriangles = this._triangulate(contours);
 
     // If there were no valid faces, we still want to use the original vertices

test/unit/visual/cases/webgl.js

@@ -693,4 +693,35 @@ visualSuite('WebGL', function() {
       screenshot();
     });
   });
+
+  visualSuite('Tessellation', function() {
+    visualTest('Handles nearly identical consecutive vertices', function(p5, screenshot) {
+      p5.createCanvas(100, 100, p5.WEBGL);
+      p5.pixelDensity(1);
+      p5.background(255);
+      p5.fill(0);
+      p5.noStroke();
+
+      // Contours with nearly identical consecutive vertices (as can occur with textToContours)
+      // Outer contour
+      p5.beginShape();
+      p5.vertex(-30, -30, 0);
+      p5.vertex(30, -30, 0);
+      p5.vertex(30, 30, 0);
+      p5.vertex(-30, 30, 0);
+
+      // Inner contour (hole) with nearly identical vertices
+      p5.beginContour();
+      p5.vertex(-10, -10, 0);
+      p5.vertex(-10, 10, 0);
+      // This vertex has x coordinate almost equal to previous (10.00000001 vs 10)
+      p5.vertex(10.00000001, 10, 0);
+      p5.vertex(10, -10, 0);
+      p5.endContour();
+
+      p5.endShape(p5.CLOSE);
+
+      screenshot();
+    });
+  });
 });