Merge branch 'dev-2.0' into test/webgl-3d-primitives

Author: davepagurek

.gitignore

@@ -2,6 +2,9 @@
 
 .nyc_output/*
 # .vscode/settings.json
+# optional local preferences for vscode
+local.code-workspace
+
 node_modules/*
 
 analyzer/

.vscode/extensions.json

@@ -4,7 +4,6 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
-    "eg2.vscode-npm-script",
     "yzhang.markdown-all-in-one",
     "dbaeumer.vscode-eslint"
   ],

package.json

@@ -5,7 +5,7 @@
     "build": "rollup -c",
     "dev": "vite preview/",
     "dev:global": "concurrently -n build,server \"rollup -c -w\" \"npx vite preview/global/\"",
-    "docs": "documentation build ./src/**/*.js ./src/**/**/*.js -o ./docs/data.json && node ./utils/convert.mjs",
+    "docs": "documentation build ./src/**/*.js ./src/**/**/*.js --shallow -o ./docs/data.json && node ./utils/convert.mjs",
     "bench": "vitest bench",
     "bench:report": "vitest bench --reporter=verbose",
     "test": "vitest",

src/strands/p5.strands.js

@@ -30,7 +30,11 @@ function strands(p5, fn) {
   //////////////////////////////////////////////
   // Global Runtime
   //////////////////////////////////////////////
-  function initStrandsContext(ctx, backend, { active = false, renderer = null, baseShader = null } = {}) {
+  function initStrandsContext(
+    ctx,
+    backend,
+    { active = false, renderer = null, baseShader = null } = {},
+  ) {
     ctx.dag = createDirectedAcyclicGraph();
     ctx.cfg = createControlFlowGraph();
     ctx.uniforms = [];
@@ -78,11 +82,8 @@ function strands(p5, fn) {
 
     const prev = {};
     for (const key of Object.getOwnPropertyNames(fn)) {
-      const descriptor = Object.getOwnPropertyDescriptor(
-        fn,
-        key
-      );
-      if (descriptor && !descriptor.get && typeof fn[key] === 'function') {
+      const descriptor = Object.getOwnPropertyDescriptor(fn, key);
+      if (descriptor && !descriptor.get && typeof fn[key] === "function") {
         prev[key] = window[key];
         window[key] = fn[key].bind(pInst);
       }
@@ -104,7 +105,10 @@ function strands(p5, fn) {
 
   p5.Shader.prototype.modify = function (shaderModifier, scope = {}) {
     try {
-      if (shaderModifier instanceof Function || typeof shaderModifier === 'string') {
+      if (
+        shaderModifier instanceof Function ||
+        typeof shaderModifier === "string"
+      ) {
         // Reset the context object every time modify is called;
         // const backend = glslBackend;
         initStrandsContext(strandsContext, this._renderer.strandsBackend, {
@@ -121,9 +125,10 @@ function strands(p5, fn) {
         if (options.parser) {
           // #7955 Wrap function declaration code in brackets so anonymous functions are not top level statements, which causes an error in acorn when parsing
           // https://github.com/acornjs/acorn/issues/1385
-          const sourceString = typeof shaderModifier === 'string'
-            ? `(${shaderModifier})`
-            : `(${shaderModifier.toString()})`;
+          const sourceString =
+            typeof shaderModifier === "string"
+              ? `(${shaderModifier})`
+              : `(${shaderModifier.toString()})`;
           strandsCallback = transpileStrandsToJS(
             p5,
             sourceString,
@@ -275,6 +280,100 @@ if (typeof p5 !== "undefined") {
  * </div>
  */
 
+/**
+ * @method smoothstep
+ * @description
+ * A shader function that performs smooth Hermite interpolation between `0.0`
+ * and `1.0`.
+ *
+ * This function is equivalent to the GLSL built-in
+ * `smoothstep(edge0, edge1, x)` and is available inside p5.strands shader
+ * callbacks. It is commonly used to create soft transitions, smooth edges,
+ * fades, and anti-aliased effects.
+ *
+ * Smoothstep is useful when a threshold or cutoff is needed, but with a
+ * gradual transition instead of a hard edge.
+ *
+ * - Returns `0.0` when `x` is less than or equal to `edge0`
+ * - Returns `1.0` when `x` is greater than or equal to `edge1`
+ * - Smoothly interpolates between `0.0` and `1.0` when `x` is between them
+ *
+ * @param {Number} edge0
+ *        Lower edge of the transition
+ * @param {Number} edge1
+ *        Upper edge of the transition
+ * @param {Number} x
+ *        Input value to interpolate
+ *
+ * @returns {Number}
+ *          A value between `0.0` and `1.0`
+ *
+ * @example
+ * <div modernizr="webgl">
+ * <code>
+ * // Example 1: A soft vertical fade using smoothstep (no uniforms)
+ *
+ * let fadeShader;
+ *
+ * function fadeCallback() {
+ *   getColor((inputs) => {
+ *     // x goes from 0 → 1 across the canvas
+ *     let x = inputs.texCoord.x;
+ *
+ *     // smoothstep creates a soft transition instead of a hard edge
+ *     let t = smoothstep(0.25, 0.35, x);
+ *
+ *     // Use t directly as brightness
+ *     return [t, t, t, 1];
+ *   });
+ * }
+ *
+ * function setup() {
+ *   createCanvas(300, 200, WEBGL);
+ *   fadeShader = baseFilterShader().modify(fadeCallback);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   filter(fadeShader);
+ * }
+ * </code>
+ * </div>
+ *
+ * @example
+ * <div modernizr="webgl">
+ * <code>
+ * // Example 2: Animate the smooth transition using a uniform
+ *
+ * let animatedShader;
+ *
+ * function animatedFadeCallback() {
+ *   const time = uniformFloat(() => millis() * 0.001);
+ *
+ *   getColor((inputs) => {
+ *     let x = inputs.texCoord.x;
+ *
+ *     // Move the smoothstep band back and forth over time
+ *     let center = 0.5 + 0.25 * sin(time);
+ *     let t = smoothstep(center - 0.05, center + 0.05, x);
+ *
+ *     return [t, t, t, 1];
+ *   });
+ * }
+ *
+ * function setup() {
+ *   createCanvas(300, 200, WEBGL);
+ *   animatedShader = baseFilterShader().modify(animatedFadeCallback);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   filter(animatedShader);
+ * }
+ * </code>
+ * </div>
+ */
+
 /**
  * @method beforeVertex
  * @private

src/webgl/ShapeBuilder.js

@@ -313,6 +313,27 @@ 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 currX = contour[i];
+        const currY = contour[i + 1];
+
+        if (Math.abs(currX - prevX) < epsilon) {
+          contour[i] = prevX;
+        }
+        if (Math.abs(currY - prevY) < epsilon) {
+          contour[i + 1] = prevY;
+        }
+      }
+    }
+
     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

@@ -1312,4 +1312,77 @@ visualSuite('WebGL', function() {
       screenshot();
     });
   });
+
+  visualSuite('Tessellation', function() {
+    visualTest('Handles nearly identical consecutive vertices', function(p5, screenshot) {
+      p5.createCanvas(400, 400, p5.WEBGL);
+      
+      const contours = [
+        [
+          [-3.8642425537109375, -6.120738636363637, 0],
+          [3.2025188099254267, -6.120738636363637, 0],
+          [3.2025188099254267, -4.345170454545455, 0],
+          [-3.8642425537109375, -4.345170454545455, 0],
+          [-3.8642425537109375, -6.120738636363637, 0]
+        ],
+        [
+          [-1.8045834628018462, 4.177556818181818, 0],
+          [-1.8045834628018462, -9.387784090909093, 0],
+          [0.29058699174360836, -9.387784090909093, 0],
+          [0.2905869917436083, 3.609374411367136, 0],
+          [0.31044303036623855, 4.068235883781435, 0],
+          [0.38522861430307975, 4.522728865422799, 0],
+          [0.548044378107245, 4.941051136363637, 0],
+          [0.8364672032828204, 5.2932224887960775, 0],
+          [1.2227602871981542, 5.526988636363637, 0],
+          [1.6572258237923885, 5.634502949876295, 0],
+          [2.101666537198154, 5.669034090909091, 0],
+          [2.6695604948237173, 5.633568761673102, 0],
+          [3.0249619917436084, 5.5625, 0],
+          [3.4510983553799726, 7.4446022727272725, 0],
+          [2.8568950819856695, 7.613138889205699, 0],
+          [2.3751340936529037, 7.676962586830456, 0],
+          [1.8892600236717598, 7.693181792704519, 0],
+          [1.2922705720786674, 7.649533731133848, 0],
+          [0.7080836288276859, 7.519788939617751, 0],
+          [0.14854153719815422, 7.311434659090909, 0],
+          [-0.38643934048179873, 7.00959666478984, 0],
+          [-0.858113258144025, 6.61653855366859, 0],
+          [-1.25415732643821, 6.1484375, 0],
+          [-1.5108595282965422, 5.697682732328092, 0],
+          [-1.6824918355513252, 5.207533878495854, 0],
+          [-1.7762971052870198, 4.695933154267308, 0],
+          [-1.8045834628018462, 4.177556818181818, 0]
+        ]
+      ];
+      
+      p5.background('red');
+      p5.push();
+      p5.stroke(0);
+      p5.fill('#EEE');
+      p5.scale(15);
+      p5.beginShape();
+      for (const contour of contours) {
+        p5.beginContour();
+        for (const v of contour) {
+          p5.vertex(...v);
+        }
+        p5.endContour();
+      }
+      p5.endShape();
+
+      p5.stroke(0, 255, 0);
+      p5.strokeWeight(5);
+      p5.beginShape(p5.POINTS);
+      for (const contour of contours) {
+        for (const v of contour) {
+          p5.vertex(...v);
+        }
+      }
+      p5.endShape();
+      p5.pop();
+
+      screenshot();
+    });
+  });
 });

test/unit/visual/screenshots/WebGL/Tessellation/Handles nearly identical consecutive vertices/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}