p5 2.2.1 → 2.2.2-rc.1

package/lib/p5.webgpu.esm.js

@@ -11,7 +11,7 @@ const _PI = Math.PI;
  * @property {String} VERSION
  * @final
  */
-const VERSION = '2.2.1';
+const VERSION = '2.2.2-rc.1';
 
 // GRAPHICS RENDERER
 /**
@@ -3007,7 +3007,7 @@ class StrandsNode {
     const baseType = orig?.baseType ?? BaseType.FLOAT;
 
     let newValueID;
-    if (value instanceof StrandsNode) {
+    if (value?.isStrandsNode) {
       newValueID = value.id;
     } else {
       const newVal = primitiveConstructorNode(
@@ -3062,7 +3062,7 @@ class StrandsNode {
     const baseType = orig?.baseType ?? BaseType.FLOAT;
 
     let newValueID;
-    if (value instanceof StrandsNode) {
+    if (value?.isStrandsNode) {
       newValueID = value.id;
     } else {
       const newVal = primitiveConstructorNode(
@@ -3352,6 +3352,20 @@ function constructTypeFromIDs(strandsContext, typeInfo, strandsNodesArray) {
 
 function primitiveConstructorNode(strandsContext, typeInfo, dependsOn) {
   const cfg = strandsContext.cfg;
+  dependsOn = (Array.isArray(dependsOn) ? dependsOn : [dependsOn])
+    .flat(Infinity)
+    .map(a => {
+      if (
+        a.isStrandsNode &&
+        a.typeInfo().baseType === BaseType.INT &&
+        // TODO: handle ivec inputs instead of just int scalars
+        a.typeInfo().dimension === 1
+      ) {
+        return castToFloat(strandsContext, a);
+      } else {
+        return a;
+      }
+    });
   const { mappedDependencies, inferredTypeInfo } = mapPrimitiveDepsToIDs(strandsContext, typeInfo, dependsOn);
 
   const finalType = {
@@ -3367,6 +3381,24 @@ function primitiveConstructorNode(strandsContext, typeInfo, dependsOn) {
   return { id, dimension: finalType.dimension, components: mappedDependencies };
 }
 
+function castToFloat(strandsContext, dep) {
+  const { id, dimension } = functionCallNode(
+    strandsContext,
+    strandsContext.backend.getTypeName('float', dep.typeInfo().dimension),
+    [dep],
+    {
+      overloads: [{
+        params: [dep.typeInfo()],
+        returnType: {
+          ...dep.typeInfo(),
+          baseType: BaseType.FLOAT,
+        },
+      }],
+    }
+  );
+  return createStrandsNode(id, dimension, strandsContext);
+}
+
 function functionCallNode(
   strandsContext,
   functionName,
@@ -3537,7 +3569,7 @@ function swizzleTrap(id, dimension, strandsContext, onRebind) {
       // This may not be the most efficient way, as we swizzle each component individually,
       // so that .xyz becomes .x, .y, .z
       let scalars = [];
-      if (value instanceof StrandsNode) {
+      if (value?.isStrandsNode) {
         if (value.dimension === 1) {
           scalars = Array(chars.length).fill(value);
         } else if (value.dimension === chars.length) {
@@ -3808,10 +3840,11 @@ const wgslBackend = {
     return primitiveTypeName;
   },
   generateHookUniformKey(name, typeInfo) {
-    // For sampler2D types, we don't add them to the uniform struct
-    // Instead, they become separate texture and sampler bindings
+    // For sampler2D types, we don't add them to the uniform struct,
+    // but we still need them in the shader's hooks object so that
+    // they can be set by users.
     if (typeInfo.baseType === 'sampler2D') {
-      return null; // Signal that this should not be added to uniform struct
+      return `${name}: sampler2D`; // Signal that this should not be added to uniform struct
     }
     return `${name}: ${this.getTypeName(typeInfo.baseType, typeInfo.dimension)}`;
   },
@@ -4593,6 +4626,10 @@ function rendererWebGPU(p5, fn) {
       this.finalCamera = new Camera(this);
       this.finalCamera._computeCameraDefaultSettings();
       this.finalCamera._setDefaultCamera();
+
+      this.depthFormat = 'depth24plus-stencil8';
+      this.depthTexture = null;
+      this.depthTextureView = null;
     }
 
     async setupContext() {
@@ -4633,7 +4670,6 @@ function rendererWebGPU(p5, fn) {
       });
 
       // TODO disablable stencil
-      this.depthFormat = 'depth24plus-stencil8';
       this.mainFramebuffer = this.createFramebuffer({ _useCanvasFormat: true });
       this._updateSize();
       this._update();
@@ -4690,6 +4726,7 @@ function rendererWebGPU(p5, fn) {
     }
 
     _updateSize() {
+      if (!this.device || !this.depthFormat) return;
       if (this.depthTexture && this.depthTexture.destroy) {
         this.flushDraw();
         const textureToDestroy = this.depthTexture;
@@ -4784,6 +4821,7 @@ function rendererWebGPU(p5, fn) {
     }
 
     clear(...args) {
+      if (!this.device || !this.drawingContext) return;
       const _r = args[0] || 0;
       const _g = args[1] || 0;
       const _b = args[2] || 0;
@@ -4850,6 +4888,7 @@ function rendererWebGPU(p5, fn) {
      * occlude anything subsequently drawn.
      */
     clearDepth(depth = 1) {
+      if (!this.device || !this.depthTextureView) return;
       this._finishActiveRenderPass();
       const commandEncoder = this.device.createCommandEncoder();
 
@@ -6398,7 +6437,7 @@ function rendererWebGPU(p5, fn) {
 
     getNextBindingIndex({ vert, frag }, group = 0) {
       // Get the highest binding index in the specified group and return the next available
-      const samplerRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var\s+(\w+)\s*:\s*(texture_2d<f32>|sampler|uniform)/g;
+      const samplerRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var(?:<uniform>)?\s+(\w+)\s*:\s*(texture_2d<f32>|sampler|uniform|\w+)/g;
       let maxBindingIndex = -1;
 
       for (const [src, visibility] of [
@@ -6748,6 +6787,9 @@ function rendererWebGPU(p5, fn) {
       // Inject hook uniforms as a separate struct at a new binding
       let hookUniformFields = '';
       for (const key in shader.hooks.uniforms) {
+        // Skip textures, they don't get added to structs
+        if (key.endsWith(': sampler2D')) continue;
+
         // WGSL format: "name: type"
         hookUniformFields += `  ${key},\n`;
       }

package/lib/p5.webgpu.js

@@ -14,7 +14,7 @@
    * @property {String} VERSION
    * @final
    */
-  const VERSION = '2.2.1';
+  const VERSION = '2.2.2-rc.1';
 
   // GRAPHICS RENDERER
   /**
@@ -3010,7 +3010,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       const baseType = orig?.baseType ?? BaseType.FLOAT;
 
       let newValueID;
-      if (value instanceof StrandsNode) {
+      if (value?.isStrandsNode) {
         newValueID = value.id;
       } else {
         const newVal = primitiveConstructorNode(
@@ -3065,7 +3065,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       const baseType = orig?.baseType ?? BaseType.FLOAT;
 
       let newValueID;
-      if (value instanceof StrandsNode) {
+      if (value?.isStrandsNode) {
         newValueID = value.id;
       } else {
         const newVal = primitiveConstructorNode(
@@ -3355,6 +3355,20 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
   function primitiveConstructorNode(strandsContext, typeInfo, dependsOn) {
     const cfg = strandsContext.cfg;
+    dependsOn = (Array.isArray(dependsOn) ? dependsOn : [dependsOn])
+      .flat(Infinity)
+      .map(a => {
+        if (
+          a.isStrandsNode &&
+          a.typeInfo().baseType === BaseType.INT &&
+          // TODO: handle ivec inputs instead of just int scalars
+          a.typeInfo().dimension === 1
+        ) {
+          return castToFloat(strandsContext, a);
+        } else {
+          return a;
+        }
+      });
     const { mappedDependencies, inferredTypeInfo } = mapPrimitiveDepsToIDs(strandsContext, typeInfo, dependsOn);
 
     const finalType = {
@@ -3370,6 +3384,24 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
     return { id, dimension: finalType.dimension, components: mappedDependencies };
   }
 
+  function castToFloat(strandsContext, dep) {
+    const { id, dimension } = functionCallNode(
+      strandsContext,
+      strandsContext.backend.getTypeName('float', dep.typeInfo().dimension),
+      [dep],
+      {
+        overloads: [{
+          params: [dep.typeInfo()],
+          returnType: {
+            ...dep.typeInfo(),
+            baseType: BaseType.FLOAT,
+          },
+        }],
+      }
+    );
+    return createStrandsNode(id, dimension, strandsContext);
+  }
+
   function functionCallNode(
     strandsContext,
     functionName,
@@ -3540,7 +3572,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         // This may not be the most efficient way, as we swizzle each component individually,
         // so that .xyz becomes .x, .y, .z
         let scalars = [];
-        if (value instanceof StrandsNode) {
+        if (value?.isStrandsNode) {
           if (value.dimension === 1) {
             scalars = Array(chars.length).fill(value);
           } else if (value.dimension === chars.length) {
@@ -3811,10 +3843,11 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       return primitiveTypeName;
     },
     generateHookUniformKey(name, typeInfo) {
-      // For sampler2D types, we don't add them to the uniform struct
-      // Instead, they become separate texture and sampler bindings
+      // For sampler2D types, we don't add them to the uniform struct,
+      // but we still need them in the shader's hooks object so that
+      // they can be set by users.
       if (typeInfo.baseType === 'sampler2D') {
-        return null; // Signal that this should not be added to uniform struct
+        return `${name}: sampler2D`; // Signal that this should not be added to uniform struct
       }
       return `${name}: ${this.getTypeName(typeInfo.baseType, typeInfo.dimension)}`;
     },
@@ -4596,6 +4629,10 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         this.finalCamera = new Camera(this);
         this.finalCamera._computeCameraDefaultSettings();
         this.finalCamera._setDefaultCamera();
+
+        this.depthFormat = 'depth24plus-stencil8';
+        this.depthTexture = null;
+        this.depthTextureView = null;
       }
 
       async setupContext() {
@@ -4636,7 +4673,6 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         });
 
         // TODO disablable stencil
-        this.depthFormat = 'depth24plus-stencil8';
         this.mainFramebuffer = this.createFramebuffer({ _useCanvasFormat: true });
         this._updateSize();
         this._update();
@@ -4693,6 +4729,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       }
 
       _updateSize() {
+        if (!this.device || !this.depthFormat) return;
         if (this.depthTexture && this.depthTexture.destroy) {
           this.flushDraw();
           const textureToDestroy = this.depthTexture;
@@ -4787,6 +4824,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       }
 
       clear(...args) {
+        if (!this.device || !this.drawingContext) return;
         const _r = args[0] || 0;
         const _g = args[1] || 0;
         const _b = args[2] || 0;
@@ -4853,6 +4891,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
        * occlude anything subsequently drawn.
        */
       clearDepth(depth = 1) {
+        if (!this.device || !this.depthTextureView) return;
         this._finishActiveRenderPass();
         const commandEncoder = this.device.createCommandEncoder();
 
@@ -6401,7 +6440,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
       getNextBindingIndex({ vert, frag }, group = 0) {
         // Get the highest binding index in the specified group and return the next available
-        const samplerRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var\s+(\w+)\s*:\s*(texture_2d<f32>|sampler|uniform)/g;
+        const samplerRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var(?:<uniform>)?\s+(\w+)\s*:\s*(texture_2d<f32>|sampler|uniform|\w+)/g;
         let maxBindingIndex = -1;
 
         for (const [src, visibility] of [
@@ -6751,6 +6790,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         // Inject hook uniforms as a separate struct at a new binding
         let hookUniformFields = '';
         for (const key in shader.hooks.uniforms) {
+          // Skip textures, they don't get added to structs
+          if (key.endsWith(': sampler2D')) continue;
+
           // WGSL format: "name: type"
           hookUniformFields += `  ${key},\n`;
         }