Merge branch 'dev-2.0' into feat/storagebuffer-read

Author: davepagurek

docs/parameterData.json

@@ -160,6 +160,7 @@ export class Renderer3D extends Renderer {
 
     // clipping
     this._clipDepths = [];
+    this._textContextSavedStack = [];
     this._isClipApplied = false;
     this._stencilTestOn = false;
 
@@ -1327,13 +1328,25 @@ export class Renderer3D extends Renderer {
     return this;
   }
 
+  push() {
+    super.push()
+    const saved = !!(this.states.textFont?.font);
+    if (saved) {
+      this.textDrawingContext().save()
+    }
+    this._textContextSavedStack.push(saved);
+  }
+
   pop(...args) {
     if (
       this._clipDepths.length > 0 &&
       this._pushPopDepth === this._clipDepths[this._clipDepths.length - 1]
     ) {
       this._clearClip();
     }
+    if (this._textContextSavedStack.pop()) {
+      this.textDrawingContext().restore()
+    }
     super.pop(...args);
     this._applyStencilTestIfClipping();
   }

src/core/p5.Renderer3D.js

@@ -45,10 +45,12 @@ function rendering(p5, fn){
    * system variable to check what version is being used, or call
    * `setAttributes({ version: 1 })` to create a WebGL1 context.
    *
+   * Note: In WebGPU mode, you must `await` this function.
+   *
    * @method createCanvas
    * @param  {Number} [width] width of the canvas. Defaults to 100.
    * @param  {Number} [height] height of the canvas. Defaults to 100.
-   * @param  {(P2D|WEBGL|P2DHDR|WEBGPU)} [renderer] either P2D, WEBGL, or WEBGPU. Defaults to `P2D`.
+   * @param  {(P2D|WEBGL|P2DHDR)} [renderer] either P2D or WEBGL. Defaults to `P2D`.
    * @param  {HTMLCanvasElement} [canvas] existing canvas element that should be used for the sketch.
    * @return {p5.Renderer} new `p5.Renderer` that holds the canvas.
    *
@@ -106,6 +108,14 @@ function rendering(p5, fn){
    *   describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
    * }
    */
+  /**
+   * @method createCanvas
+   * @param  {Number} width
+   * @param  {Number} height
+   * @param  {WEBGPU} renderer
+   * @param  {HTMLCanvasElement} [canvas]
+   * @return {Promise<p5.Renderer>}
+   */
   /**
    * @method createCanvas
    * @param  {Number} [width]

src/core/rendering.js

@@ -107,8 +107,10 @@ function attributes(p5, fn){
    * In WebGL mode, `noSmooth()` causes all shapes to be drawn with jagged
    * (aliased) edges. The functions don't affect images or fonts.
    *
+   * Note: In WebGPU mode, you must `await` this function.
+   *
    * @method noSmooth
-   * @chainable
+   * @return {void|Promise<void>}
    *
    * @example
    * let heart;
@@ -162,10 +164,10 @@ function attributes(p5, fn){
       if ('imageSmoothingEnabled' in this.drawingContext) {
         this.drawingContext.imageSmoothingEnabled = false;
       }
+      return this;
     } else {
-      this.setAttributes('antialias', false);
+      return this.setAttributes('antialias', false);
     }
-    return this;
   };
 
   /**

src/shape/attributes.js

@@ -213,7 +213,17 @@ if (typeof p5 !== "undefined") {
 
 /* ------------------------------------------------------------- */
 /**
- * @property {Object} worldInputs
+ * @typedef {Object} WorldInputsHook
+ * @property {any} position
+ * @property {any} normal
+ * @property {any} texCoord
+ * @property {any} color
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ */
+
+/**
+ * @property {WorldInputsHook} worldInputs
  * @beta
  * @description
  * A shader hook block that modifies the world-space properties of each vertex in a shader. This hook can be used inside <a href="#/p5/buildColorShader">`buildColorShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. Modifications happen between the `.begin()` and `.end()` methods of the hook. "World space" refers to the coordinate system of the 3D scene, before any camera or projection transformations are applied.
@@ -258,7 +268,22 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property {Object} combineColors
+ * @typedef {Object} CombineColorsHook
+ * @property {any} baseColor
+ * @property {any} diffuse
+ * @property {any} ambientColor
+ * @property {any} ambient
+ * @property {any} specularColor
+ * @property {any} specular
+ * @property {any} emissive
+ * @property {any} opacity
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ * @property {function(color: any): void} set
+ */
+
+/**
+ * @property {CombineColorsHook} combineColors
  * @beta
  * @description
  * A shader hook block that modifies how color components are combined in the fragment shader. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to control the final color output of a material. Modifications happen between the `.begin()` and `.end()` methods of the hook.
@@ -591,7 +616,26 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property {Object} pixelInputs
+ * @typedef {Object} PixelInputsHook
+ * @property {any} normal
+ * @property {any} texCoord
+ * @property {any} ambientLight
+ * @property {any} ambientMaterial
+ * @property {any} specularMaterial
+ * @property {any} emissiveMaterial
+ * @property {any} color
+ * @property {any} shininess
+ * @property {any} metalness
+ * @property {any} tangent
+ * @property {any} center
+ * @property {any} position
+ * @property {any} strokeWeight
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ */
+
+/**
+ * @property {PixelInputsHook} pixelInputs
  * @beta
  * @description
  * A shader hook block that modifies the properties of each pixel before the final color is calculated. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to adjust per-pixel data before lighting is applied. Modifications happen between the `.begin()` and `.end()` methods of the hook.
@@ -679,13 +723,23 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property finalColor
+ * @typedef {Object} FinalColorHook
+ * @property {any} color
+ * @property {any} texCoord
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ * @property {function(color: any): void} set
+ */
+
+/**
+ * @property {FinalColorHook} finalColor
  * @beta
  * @description
  * A shader hook block that modifies the final color of each pixel after all lighting is applied. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to adjust the color before it appears on the screen. Modifications happen between the `.begin()` and `.end()` methods of the hook.
  *
  * `finalColor` has the following properties:
  * - `color`: a four-component vector representing the pixel color (red, green, blue, alpha).
+ * - `texCoord`: a two-component vector representing the texture coordinates (u, v)
  *
  * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) to update the final color.
  *
@@ -762,8 +816,18 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property {Object} filterColor
- * @beta
+ * @typedef {Object} FilterColorHook
+ * @property {any} texCoord
+ * @property {any} canvasSize
+ * @property {any} texelSize
+ * @property {any} canvasContent
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ * @property {function(color: any): void} set
+ */
+
+/**
+ * @property {FilterColorHook} filterColor
  * @description
  * A shader hook block that sets the color for each pixel in a filter shader. This hook can be used inside <a href="#/p5/buildFilterShader">`buildFilterShader()`</a> to control the output color for each pixel.
  *
@@ -807,7 +871,17 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property {Object} objectInputs
+ * @typedef {Object} ObjectInputsHook
+ * @property {any} position
+ * @property {any} normal
+ * @property {any} texCoord
+ * @property {any} color
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ */
+
+/**
+ * @property {ObjectInputsHook} objectInputs
  * @beta
  * @description
  * A shader hook block to modify the properties of each vertex before any transformations are applied. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. Modifications happen between the `.begin()` and `.end()` methods of the hook. "Object space" refers to the coordinate system of the 3D scene before any transformations, cameras, or projection transformations are applied.
@@ -849,7 +923,17 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property {Object} cameraInputs
+ * @typedef {Object} CameraInputsHook
+ * @property {any} position
+ * @property {any} normal
+ * @property {any} texCoord
+ * @property {any} color
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ */
+
+/**
+ * @property {CameraInputsHook} cameraInputs
  * @beta
  * @description
  * A shader hook block that adjusts vertex properties from the perspective of the camera. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. "Camera space" refers to the coordinate system of the 3D scene after transformations have been applied, seen relative to the camera.

src/strands/p5.strands.js

@@ -235,6 +235,35 @@ function replaceReferences(node, tempVarMap) {
   internalReplaceReferences(node);
 }
 
+// Shared handler for both BinaryExpression and LogicalExpression —
+// both follow the same operator-to-method-call transformation pattern.
+function transformBinaryOrLogical(node, state, ancestors) {
+  if (ancestors.some(a => nodeIsUniform(a) || nodeIsUniformCallbackFn(a, state.uniformCallbackNames))) {
+    return;
+  }
+  const unsafeTypes = ['Literal', 'ArrayExpression', 'Identifier'];
+  if (unsafeTypes.includes(node.left.type)) {
+    node.left = {
+      type: 'CallExpression',
+      callee: {
+        type: 'Identifier',
+        name: '__p5.strandsNode',
+      },
+      arguments: [node.left]
+    };
+  }
+  node.type = 'CallExpression';
+  node.callee = {
+    type: 'MemberExpression',
+    object: node.left,
+    property: {
+      type: 'Identifier',
+      name: replaceBinaryOperator(node.operator),
+    },
+  };
+  node.arguments = [node.right];
+}
+
 const ASTCallbacks = {
   UnaryExpression(node, state, ancestors) {
     if (ancestors.some(a => nodeIsUniform(a) || nodeIsUniformCallbackFn(a, state.uniformCallbackNames))) {
@@ -509,72 +538,10 @@ const ASTCallbacks = {
       }
     }
   },
-  BinaryExpression(node, state, ancestors) {
-    // Don't convert uniform default values to node methods, as
-    // they should be evaluated at runtime, not compiled.
-    if (ancestors.some(a => nodeIsUniform(a) || nodeIsUniformCallbackFn(a, state.uniformCallbackNames))) {
-      return;
-    }
-    // If the left hand side of an expression is one of these types,
-    // we should construct a node from it.
-    const unsafeTypes = ['Literal', 'ArrayExpression', 'Identifier'];
-    if (unsafeTypes.includes(node.left.type)) {
-      const leftReplacementNode = {
-        type: 'CallExpression',
-        callee: {
-          type: 'Identifier',
-          name: '__p5.strandsNode',
-        },
-        arguments: [node.left]
-      }
-      node.left = leftReplacementNode;
-    }
-    // Replace the binary operator with a call expression
-    // in other words a call to BaseNode.mult(), .div() etc.
-    node.type = 'CallExpression';
-    node.callee = {
-      type: 'MemberExpression',
-      object: node.left,
-      property: {
-        type: 'Identifier',
-        name: replaceBinaryOperator(node.operator),
-      },
-    };
-    node.arguments = [node.right];
-  },
-  LogicalExpression(node, state, ancestors) {
-    // Don't convert uniform default values to node methods, as
-    // they should be evaluated at runtime, not compiled.
-    if (ancestors.some(a => nodeIsUniform(a) || nodeIsUniformCallbackFn(a, state.uniformCallbackNames))) {
-      return;
-    }
-    // If the left hand side of an expression is one of these types,
-    // we should construct a node from it.
-    const unsafeTypes = ['Literal', 'ArrayExpression', 'Identifier'];
-    if (unsafeTypes.includes(node.left.type)) {
-      const leftReplacementNode = {
-        type: 'CallExpression',
-        callee: {
-          type: 'Identifier',
-          name: '__p5.strandsNode',
-        },
-        arguments: [node.left]
-      }
-      node.left = leftReplacementNode;
-    }
-    // Replace the logical operator with a call expression
-    // in other words a call to BaseNode.or(), .and() etc.
-    node.type = 'CallExpression';
-    node.callee = {
-      type: 'MemberExpression',
-      object: node.left,
-      property: {
-        type: 'Identifier',
-        name: replaceBinaryOperator(node.operator),
-      },
-    };
-    node.arguments = [node.right];
-  },
+  BinaryExpression: transformBinaryOrLogical,
+  LogicalExpression: transformBinaryOrLogical,
+
+
   ConditionalExpression(node, state, ancestors) {
     if (ancestors.some(a => nodeIsUniform(a) || nodeIsUniformCallbackFn(a, state.uniformCallbackNames))) {
       return;

src/strands/strands_transpiler.js

@@ -1587,13 +1587,6 @@ function textCore(p5, fn) {
     if (typeof weight === 'number') {
       this.states.setValue('fontWeight', weight);
       this._applyTextProperties();
-
-      // Safari works without weight set in the canvas style attribute, and actually
-      // has buggy behavior if it is present, using the wrong weight when drawing
-      // multiple times with different weights
-      if (!p5.prototype._isSafari()) {
-        this._setCanvasStyleProperty('font-variation-settings', `"wght" ${weight}`);
-      }
       return;
     }
     // the getter