fix(webgl): normalize nearly identical vertices before tessellation

- Remove Z-axis normalization (only X/Y needed based on testing)
- Update visual test to use textToContours() example from issue #8186
- Test now reproduces the actual bug that gets fixed

Resolves #8186

Author: avinxshKD

src/webgl/ShapeBuilder.js

@@ -322,20 +322,15 @@ export class ShapeBuilder {
       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;
-        }
       }
     }
 

test/unit/visual/cases/webgl.js

@@ -695,31 +695,32 @@ visualSuite('WebGL', function() {
   });
 
   visualSuite('Tessellation', function() {
-    visualTest('Handles nearly identical consecutive vertices', function(p5, screenshot) {
-      p5.createCanvas(100, 100, p5.WEBGL);
-      p5.pixelDensity(1);
+    visualTest('Handles nearly identical consecutive vertices from textToContours', async function(p5, screenshot) {
+      p5.createCanvas(200, 200, p5.WEBGL);
       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);
+      const font = await p5.loadFont('/unit/assets/Inconsolata-Bold.ttf');
+      const contours = font.textToContours('p', 0, 0, 60);
+
+      if (contours && contours.length > 0) {
+        p5.translate(-p5.width / 4, -p5.height / 4);
+        p5.beginShape();
+        for (let contourIdx = 0; contourIdx < contours.length; contourIdx++) {
+          const contour = contours[contourIdx];
+          if (contourIdx > 0) {
+            p5.beginContour();
+          }
+          for (let i = 0; i < contour.length; i++) {
+            p5.vertex(contour[i].x, contour[i].y, 0);
+          }
+          if (contourIdx > 0) {
+            p5.endContour();
+          }
+        }
+        p5.endShape(p5.CLOSE);
+      }
 
       screenshot();
     });