Merge branch 'dev-2.0' into fix/webgpu-crash-pixel-density

Author: davepagurek

package-lock.json

@@ -20,7 +20,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.2.1-rc.0",
+  "version": "2.2.1",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.7",
     "@japont/unicode-range": "^1.0.0",

package.json

@@ -80,7 +80,7 @@ export const verifierUtils = {
 
     try {
       const ast = parse(code, {
-        ecmaVersion: 2021,
+        ecmaVersion: 'latest',
         sourceType: 'module',
         locations: true  // This helps us get the line number.
       });

src/core/friendly_errors/sketch_verifier.js

@@ -485,7 +485,12 @@ function enforceReturnTypeMatch(strandsContext, expectedType, returned, hookName
   }
   if (receivedType.dimension !== expectedType.dimension) {
     if (receivedType.dimension !== 1) {
-      FES.userError('type error', `You have returned a vector with ${receivedType.dimension} components in ${hookName} when a ${expectedType.baseType + expectedType.dimension} was expected!`);
+      const receivedTypeDisplay = receivedType.baseType + (receivedType.dimension > 1 ? receivedType.dimension : '');
+      const expectedTypeDisplay = expectedType.baseType + expectedType.dimension;
+      FES.userError('type error',
+        `You have returned a ${receivedTypeDisplay} in ${hookName} when a ${expectedTypeDisplay} was expected!\n\n` +
+        `Make sure your hook returns the correct type.`
+      );
     }
     else {
       const result = build.primitiveConstructorNode(strandsContext, expectedType, returned);
@@ -576,7 +581,24 @@ export function createShaderHooksFunctions(strandsContext, fn, shader) {
           if (retNode instanceof StrandsNode) {
             const returnedNode = getNodeDataFromID(strandsContext.dag, retNode.id);
             if (returnedNode.baseType !== expectedStructType.typeName) {
-              FES.userError("type error", `You have returned a ${retNode.baseType} from ${hookType.name} when a ${expectedStructType.typeName} was expected.`);
+              const receivedTypeName = returnedNode.baseType || 'undefined';
+              const receivedDim = dag.dimensions[retNode.id];
+              const receivedTypeDisplay = receivedDim > 1 ?
+                `${receivedTypeName}${receivedDim}` : receivedTypeName;
+
+              const expectedProps = expectedStructType.properties
+                .map(p => p.name).join(', ');
+              FES.userError('type error',
+                `You have returned a ${receivedTypeDisplay} from ${hookType.name} when a ${expectedStructType.typeName} was expected.\n\n` +
+                `The ${expectedStructType.typeName} struct has these properties: { ${expectedProps} }\n\n` +
+                `Instead of returning a different type, you should modify and return the ${expectedStructType.typeName} struct that was passed to your hook.\n\n` +
+                `For example:\n` +
+                `${hookType.name}((inputs) => {\n` +
+                `  // Modify properties of inputs\n` +
+                `  inputs.someProperty = ...;\n` +
+                `  return inputs; // Return the modified struct\n` +
+                `})`
+              );
             }
             const newDeps = returnedNode.dependsOn.slice();
             for (let i = 0; i < expectedStructType.properties.length; i++) {
@@ -595,10 +617,14 @@ export function createShaderHooksFunctions(strandsContext, fn, shader) {
               const propName = expectedProp.name;
               const receivedValue = retNode[propName];
               if (receivedValue === undefined) {
-                FES.userError('type error', `You've returned an incomplete struct from ${hookType.name}.\n` +
-                  `Expected: { ${expectedReturnType.properties.map(p => p.name).join(', ')} }\n` +
-                  `Received: { ${Object.keys(retNode).join(', ')} }\n` +
-                  `All of the properties are required!`);
+                const expectedProps = expectedReturnType.properties.map(p => p.name).join(', ');
+                const receivedProps = Object.keys(retNode).join(', ');
+                FES.userError('type error',
+                  `You've returned an incomplete ${expectedStructType.typeName} struct from ${hookType.name}.\n\n` +
+                  `Expected properties: { ${expectedProps} }\n` +
+                  `Received properties: { ${receivedProps} }\n\n` +
+                  `All properties are required! Make sure to include all properties in the returned struct.`
+                );
               }
               const expectedTypeInfo = expectedProp.dataType;
               const returnedPropID = enforceReturnTypeMatch(strandsContext, expectedTypeInfo, receivedValue, hookType.name);

src/strands/strands_api.js

@@ -593,12 +593,10 @@ function loading(p5, fn){
               const vertString = tokens[vertexTokens[tokenInd]];
               let vertParts = vertString.split('/');
 
-              // TODO: Faces can technically use negative numbers to refer to the
-              // previous nth vertex. I haven't seen this used in practice, but
-              // it might be good to implement this in the future.
-
               for (let i = 0; i < vertParts.length; i++) {
-                vertParts[i] = parseInt(vertParts[i]) - 1;
+                let index = parseInt(vertParts[i]);
+                if (index > 0) index -= 1; // OBJ uses 1-based indexing
+                vertParts[i] = index;
               }
 
               if (!usedVerts[vertString]) {
@@ -607,11 +605,11 @@ function loading(p5, fn){
 
               if (usedVerts[vertString][currentMaterial] === undefined) {
                 const vertIndex = model.vertices.length;
-                model.vertices.push(loadedVerts.v[vertParts[0]].copy());
-                model.uvs.push(loadedVerts.vt[vertParts[1]] ?
-                  loadedVerts.vt[vertParts[1]].slice() : [0, 0]);
-                model.vertexNormals.push(loadedVerts.vn[vertParts[2]] ?
-                  loadedVerts.vn[vertParts[2]].copy() : new Vector());
+                model.vertices.push(loadedVerts.v.at(vertParts[0]).copy());
+                model.uvs.push(loadedVerts.vt.at(vertParts[1]) ?
+                  loadedVerts.vt.at(vertParts[1]).slice() : [0, 0]);
+                model.vertexNormals.push(loadedVerts.vn.at(vertParts[2]) ?
+                  loadedVerts.vn.at(vertParts[2]).copy() : new Vector());
 
                 usedVerts[vertString][currentMaterial] = vertIndex;
                 face.push(vertIndex);

src/webgl/loading.js

@@ -684,6 +684,40 @@ function material(p5, fn) {
    * }
    * ```
    *
+   * We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+   *
+   * ```js example
+   * let myFilter;
+   *
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *   myFilter = buildFilterShader(noiseShaderCallback);
+   *   describe('Evolving animated cloud-like noise in cyan and magenta');
+   * }
+   *
+   * function noiseShaderCallback() {
+   *   let time = uniformFloat();
+   *   filterColor.begin();
+   *   let coord = filterColor.texCoord;
+   *
+   *   //generate a value roughly between 0 and 1
+   *   let noiseVal = noise(coord.x, coord.y, time / 2000);
+   *
+   *   let result = mix(
+   *     [1, 0, 1, 1], // Magenta
+   *     [0, 1, 1, 1], // Cyan
+   *     noiseVal
+   *   );
+   *   filterColor.set(result);
+   *   filterColor.end();
+   * }
+   *
+   * function draw() {
+   *   myFilter.setUniform("time", millis());
+   *   filter(myFilter);
+   * }
+   * ```
+   *
    * Like the `modify()` method on shaders,
    * advanced users can also fill in `filterColor` using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
    * instead of JavaScript.
@@ -1633,7 +1667,7 @@ function material(p5, fn) {
   /**
    * Returns the base shader used for filters.
    *
-   * Calling <a href="#/p5/buildMaterialShader">`buildFilterShader(shaderFunction)`</a>
+   * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
    * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
    *
    * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or

src/webgl/material.js

@@ -685,7 +685,7 @@ function text(p5, fn) {
 
     if (!p5.Font.hasGlyphData(this.states.textFont)) {
       console.log(
-        'WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts with glyph data are supported'
+        'WEBGL: only Opentype (.otf) and Truetype (.ttf) fonts with glyph data are supported. Make sure to set the font using textFont() before drawing text.'
       );
       return;
     }

src/webgl/text.js

@@ -0,0 +1,20 @@
+# Cube using negative vertex indices
+# Negative indices count backwards: -1 = last vertex, -2 = second-to-last, etc.
+
+# Vertices
+v  0.0  0.0  0.0
+v  1.0  0.0  0.0
+v  1.0  1.0  0.0
+v  0.0  1.0  0.0
+v  0.0  0.0  1.0
+v  1.0  0.0  1.0
+v  1.0  1.0  1.0
+v  0.0  1.0  1.0
+
+# Faces using negative indices
+f  -8 -7 -6 -5
+f  -4 -3 -2 -1
+f  -8 -4 -1 -5
+f  -7 -3 -2 -6
+f  -5 -6 -2 -1
+f  -8 -7 -3 -4

test/unit/assets/cube-negative-indices.obj

@@ -10,6 +10,8 @@ suite('loadModel', function() {
   const inconsistentColorObjFile = '/test/unit/assets/eg1.obj';
   const objMtlMissing = '/test/unit/assets/objMtlMissing.obj';
   const validSTLfileWithoutExtension = '/test/unit/assets/ascii';
+  const validCubeFile = '/test/unit/assets/cube.obj';
+  const negativeIndexCubeFile = '/test/unit/assets/cube-negative-indices.obj';
 
   beforeAll(async () => {
     loading(mockP5, mockP5Prototype);
@@ -115,4 +117,20 @@ suite('loadModel', function() {
     const model = await mockP5Prototype.loadModel(validSTLfileWithoutExtension, '.STL');
     assert.instanceOf(model, Geometry);
   });
+
+  test('OBJ with negative vertex indices loads correctly', async function() {
+    const model = await mockP5Prototype.loadModel(negativeIndexCubeFile);
+    assert.instanceOf(model, Geometry);
+    assert.isAbove(model.vertices.length, 0, 'Model should have vertices');
+    assert.isAbove(model.faces.length, 0, 'Model should have faces');
+  });
+
+  test('OBJ negative indices produce same geometry as positive', async function() {
+    const positiveModel = await mockP5Prototype.loadModel(validCubeFile);
+    const negativeModel = await mockP5Prototype.loadModel(negativeIndexCubeFile);
+    assert.equal(positiveModel.vertices.length, negativeModel.vertices.length,
+      'Vertex count should match');
+    assert.equal(positiveModel.faces.length, negativeModel.faces.length,
+      'Face count should match');
+  });
 });

test/unit/io/loadModel.js

@@ -1,4 +1,16 @@
 import p5 from '../../../src/app.js';
+import { vi } from 'vitest';
+
+const mockUserError = vi.fn();
+vi.mock('../../../src/strands/strands_FES', () => ({
+  userError: (...args) => {
+    mockUserError(...args);
+    const prefixedMessage = `[p5.strands ${args[0]}]: ${args[1]}`;
+    throw new Error(prefixedMessage);
+  },
+  internalError: (msg) => { throw new Error(`[p5.strands internal error]: ${msg}`); }
+}));
+
 suite('p5.Shader', function() {
   var myp5;
   beforeAll(function() {
@@ -1942,4 +1954,60 @@ test('returns numbers for builtin globals outside hooks and a strandNode when ca
       assert.approximately(pixelColor[2], 0, 5);
     });
   });
+
+  suite('p5.strands error messages', () => {
+    afterEach(() => {
+      mockUserError.mockClear();
+    });
+
+    test('wrong type in struct hook shows actual type and expected properties', () => {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+
+      try {
+        myp5.baseMaterialShader().modify(() => {
+          myp5.getWorldInputs(() => [1, 2, 3, 4]); // vec4 instead of Vertex struct
+        }, { myp5 });
+      } catch (e) { /* expected */ }
+
+      assert.isAbove(mockUserError.mock.calls.length, 0, 'FES.userError should have been called');
+      const errMsg = mockUserError.mock.calls[0][1];
+      assert.notInclude(errMsg, 'a undefined'); //
+      assert.include(errMsg, 'float4');
+      assert.include(errMsg, 'getWorldInputs');
+      assert.include(errMsg, 'Vertex');
+      assert.include(errMsg, 'properties');
+    });
+
+    test('vector dimension mismatch shows actual and expected types', () => {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+
+      try {
+        myp5.baseMaterialShader().modify(() => {
+          myp5.getFinalColor((c) => [c.r, c.g, c.b]); // vec3 instead of vec4
+        }, { myp5 });
+      } catch (e) { /* expected */ }
+
+      assert.isAbove(mockUserError.mock.calls.length, 0, 'FES.userError should have been called');
+      const errMsg = mockUserError.mock.calls[0][1];
+      assert.include(errMsg, 'float3');
+      assert.include(errMsg, 'float4');
+    });
+
+    test('incomplete struct shows expected vs received properties', () => {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+
+      try {
+        myp5.baseMaterialShader().modify(() => {
+          myp5.getWorldInputs((inputs) => {
+            return { position: inputs.position };
+          });
+        }, { myp5 });
+      } catch (e) { /* expected */ }
+
+      assert.isAbove(mockUserError.mock.calls.length, 0, 'FES.userError should have been called');
+      const errMsg = mockUserError.mock.calls[0][1];
+      assert.include(errMsg, 'Expected properties');
+      assert.include(errMsg, 'Received properties');
+    });
+  });
 });