p5 2.2.3 → 2.3.0-rc.1

package/dist/webgl/p5.Shader.js

@@ -3,18 +3,38 @@
  * @module 3D
  * @submodule Material
  * @for p5
- * @requires core
  */
 
 const TypedArray = Object.getPrototypeOf(Uint8Array);
 class Shader {
   constructor(renderer, vertSrc, fragSrc, options = {}) {
     this._renderer = renderer;
-    this._vertSrc = vertSrc;
-    this._fragSrc = fragSrc;
+
+    // Detect compute shader: first arg is STRING and second is undefined OR an options object
+    if (
+      typeof vertSrc === 'string' && (
+        fragSrc === undefined || (typeof fragSrc === 'object' && !Array.isArray(fragSrc))
+      )
+    ) {
+      // Compute shader
+      this.shaderType = 'compute';
+      this._computeSrc = vertSrc;
+      this._vertSrc = null;
+      this._fragSrc = null;
+      // If fragSrc is an options object, use it
+      if (typeof fragSrc === 'object') {
+        options = fragSrc;
+      }
+    } else {
+      // Render shader - shaderType will be set later during binding ('fill', 'stroke', etc.)
+      this._vertSrc = vertSrc;
+      this._fragSrc = fragSrc;
+      this._computeSrc = null;
+    }
+
     this._vertShader = -1;
     this._fragShader = -1;
-    this._glProgram = 0;
+    this._compiled = false;
     this._loadedAttributes = false;
     this.attributes = {};
     this._loadedUniforms = false;
@@ -28,18 +48,25 @@ class Shader {
       // Stores uniforms + default values.
       uniforms: options.uniforms || {},
 
+      // Compute shader storage uniforms + default values
+      storageUniforms: options.storageUniforms || {},
+
       // Stores custom uniform + helper declarations as a string.
       declarations: options.declarations,
 
       // Stores an array of variable names + types passed between the vertex and fragment shader
       varyingVariables: options.varyingVariables || [],
 
+      // Stores instanceID varying info for forwarding to the fragment shader
+      instanceIDVarying: options.instanceIDVarying || null,
+
       // Stores helper functions to prepend to shaders.
       helpers: options.helpers || {},
 
       // Stores the hook implementations
       vertex: options.vertex || {},
       fragment: options.fragment || {},
+      compute: options.compute || {},
 
       hookAliases: options.hookAliases || {},
 
@@ -48,7 +75,8 @@ class Shader {
       // yourShader.modify(...).
       modified: {
         vertex: (options.modified && options.modified.vertex) || {},
-        fragment: (options.modified && options.modified.fragment) || {}
+        fragment: (options.modified && options.modified.fragment) || {},
+        compute: (options.modified && options.modified.compute) || {},
       }
     };
   }
@@ -80,13 +108,20 @@ class Shader {
   }
 
   vertSrc() {
+    if (this.shaderType === 'compute') return null;
     return this.shaderSrc(this._vertSrc, 'vertex');
   }
 
   fragSrc() {
+    if (this.shaderType === 'compute') return null;
     return this.shaderSrc(this._fragSrc, 'fragment');
   }
 
+  computeSrc() {
+    if (this.shaderType !== 'compute') return null;
+    return this.shaderSrc(this._computeSrc, 'compute');
+  }
+
   /**
    * Logs the hooks available in this shader, and their current implementation.
    *
@@ -136,29 +171,40 @@ class Shader {
    *                 color.a = components.opacity;
    *                 return color;
    *               }
-   * vec4 getFinalColor(vec4 color) { return color; }
+   * vec4 getFinalColor(vec4 color, vec2 texCoord) { return color; }
    * void afterFragment() {}
    * ```
    *
    * @beta
    */
   inspectHooks() {
-    console.log('==== Vertex shader hooks: ====');
-    for (const key in this.hooks.vertex) {
-      console.log(
-        (this.hooks.modified.vertex[key] ? '[MODIFIED] ' : '') +
-          key +
-          this.hooks.vertex[key]
-      );
-    }
-    console.log('');
-    console.log('==== Fragment shader hooks: ====');
-    for (const key in this.hooks.fragment) {
-      console.log(
-        (this.hooks.modified.fragment[key] ? '[MODIFIED] ' : '') +
-          key +
-          this.hooks.fragment[key]
-      );
+    if (this.shaderType === 'compute') {
+      console.log('==== Compute shader hooks: ====');
+      for (const key in this.hooks.compute) {
+        console.log(
+          (this.hooks.modified.compute[key] ? '[MODIFIED] ' : '') +
+            key +
+            this.hooks.compute[key]
+        );
+      }
+    } else {
+      console.log('==== Vertex shader hooks: ====');
+      for (const key in this.hooks.vertex) {
+        console.log(
+          (this.hooks.modified.vertex[key] ? '[MODIFIED] ' : '') +
+            key +
+            this.hooks.vertex[key]
+        );
+      }
+      console.log('');
+      console.log('==== Fragment shader hooks: ====');
+      for (const key in this.hooks.fragment) {
+        console.log(
+          (this.hooks.modified.fragment[key] ? '[MODIFIED] ' : '') +
+            key +
+            this.hooks.fragment[key]
+        );
+      }
     }
     console.log('');
     console.log('==== Helper functions: ====');
@@ -209,15 +255,15 @@ class Shader {
    * type of the data, such as `uniformFloat` for a number or `uniformVector2` for a two-component vector.
    * They take in a function that returns the data for the variable. You can then reference these
    * variables in your hooks, and their values will update every time you apply
-   * the shader with the result of your function.  
-   * 
+   * the shader with the result of your function.
+   *
    * Move the mouse over this sketch to increase the moveCounter which will be passed to the shader as a uniform.
    *
    * ```js example
    * let myShader;
    * //count of frames in which mouse has been moved
    * let moveCounter = 0;
-   * 
+   *
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
    *   myShader = baseMaterialShader().modify(() => {
@@ -370,28 +416,37 @@ class Shader {
     const newHooks = {
       vertex: {},
       fragment: {},
+      compute: {},
       helpers: {}
     };
     for (const key in hooks) {
       if (key === 'declarations') continue;
       if (key === 'uniforms') continue;
+      if (key === 'storageUniforms') continue;
       if (key === 'varyingVariables') continue;
+      if (key === 'instanceIDVarying') continue;
       if (key === 'vertexDeclarations') {
         newHooks.vertex.declarations =
           (newHooks.vertex.declarations || '') + '\n' + hooks[key];
       } else if (key === 'fragmentDeclarations') {
         newHooks.fragment.declarations =
           (newHooks.fragment.declarations || '') + '\n' + hooks[key];
+      } else if (key === 'computeDeclarations') {
+        newHooks.compute.declarations =
+          (newHooks.compute.declarations || '') + '\n' + hooks[key];
       } else if (this.hooks.vertex[key]) {
         newHooks.vertex[key] = hooks[key];
       } else if (this.hooks.fragment[key]) {
         newHooks.fragment[key] = hooks[key];
+      } else if (this.hooks.compute[key]) {
+        newHooks.compute[key] = hooks[key];
       } else {
         newHooks.helpers[key] = hooks[key];
       }
     }
     const modifiedVertex = Object.assign({}, this.hooks.modified.vertex);
     const modifiedFragment = Object.assign({}, this.hooks.modified.fragment);
+    const modifiedCompute = Object.assign({}, this.hooks.modified.compute);
     for (const key in newHooks.vertex || {}) {
       if (key === 'declarations') continue;
       modifiedVertex[key] = true;
@@ -400,21 +455,37 @@ class Shader {
       if (key === 'declarations') continue;
       modifiedFragment[key] = true;
     }
+    for (const key in newHooks.compute || {}) {
+      if (key === 'declarations') continue;
+      modifiedCompute[key] = true;
+    }
 
-    return new Shader(this._renderer, this._vertSrc, this._fragSrc, {
+    const args = [this._renderer];
+    if (this.shaderType === 'compute') {
+      args.push(this._computeSrc);
+    } else {
+      args.push(this._vertSrc, this._fragSrc);
+    }
+    args.push({
       declarations:
         (this.hooks.declarations || '') + '\n' + (hooks.declarations || ''),
       uniforms: Object.assign({}, this.hooks.uniforms, hooks.uniforms || {}),
+      storageUniforms: Object.assign({}, this.hooks.storageUniforms, hooks.storageUniforms || {}),
       varyingVariables: (hooks.varyingVariables || []).concat(this.hooks.varyingVariables || []),
+      instanceIDVarying: hooks.instanceIDVarying || this.hooks.instanceIDVarying || null,
       fragment: Object.assign({}, this.hooks.fragment, newHooks.fragment || {}),
       vertex: Object.assign({}, this.hooks.vertex, newHooks.vertex || {}),
+      compute: Object.assign({}, this.hooks.compute, newHooks.compute || {}),
       helpers: Object.assign({}, this.hooks.helpers, newHooks.helpers || {}),
       hookAliases: Object.assign({}, this.hooks.hookAliases, newHooks.hookAliases || {}),
       modified: {
         vertex: modifiedVertex,
-        fragment: modifiedFragment
+        fragment: modifiedFragment,
+        compute: modifiedCompute,
       }
     });
+
+    return new Shader(...args);
   }
 
   /**
@@ -436,7 +507,9 @@ class Shader {
         );
       }
 
-      this._loadAttributes();
+      if (this.shaderType !== 'compute') {
+        this._loadAttributes();
+      }
       this._loadUniforms();
       this._renderer._finalizeShader(this);
 
@@ -464,6 +537,13 @@ class Shader {
         this.setUniform(name, value);
       }
     }
+    for (const name in this.hooks.storageUniforms) {
+      const initializer = this.hooks.storageUniforms[name];
+      const value = initializer instanceof Function ? initializer() : initializer;
+      if (value !== undefined && value !== null) {
+        this.setUniform(name, value);
+      }
+    }
   }
 
   /**
@@ -639,11 +719,14 @@ class Shader {
    * }
    */
   copyToContext(context) {
-    const shader = new Shader(
-      context._renderer,
-      this._vertSrc,
-      this._fragSrc
-    );
+    const args = [context._renderer];
+    if (this.shaderType === 'compute') {
+      args.push(this._computeSrc);
+    } else {
+      args.push(this._vertSrc, this._fragSrc);
+    }
+    args.push(this.hooks);
+    const shader = new Shader(...args);
     shader.ensureCompiledOnContext(context._renderer);
     return shader;
   }
@@ -652,11 +735,11 @@ class Shader {
    * @private
    */
   ensureCompiledOnContext(context) {
-    if (this._glProgram !== 0 && this._renderer !== context) {
+    if (this._compiled && this._renderer !== context) {
       throw new Error(
         'The shader being run is attached to a different context. Do you need to copy it to this context first with .copyToContext()?'
       );
-    } else if (this._glProgram === 0) {
+    } else if (!this._compiled) {
       this._renderer = context?._renderer?.filterRenderer?._renderer || context;
       this.init();
     }
@@ -809,7 +892,7 @@ class Shader {
    * @chainable
    * @param {String} uniformName name of the uniform. Must match the name
    *                             used in the vertex and fragment shaders.
-   * @param {Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture}
+   * @param {Boolean|p5.Vector|p5.Color|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture|p5.StorageBuffer}
    * data value to assign to the uniform. Must match the uniform’s data type.
    *
    * @example
@@ -1020,6 +1103,16 @@ class Shader {
       return;
     }
 
+    // In p5.strands-related code, where some of the code may be in
+    // p5.webgpu.js instead of the main p5.js build, we generally use
+    // duck typing instead of instanceof to avoid accidentally importing
+    // and comparing against a separate copy of p5 classes
+    if (data?.isVector) {
+      data = data.values.length !== data.dimensions ? data.values.slice(0, data.dimensions) : data.values;
+    } else if (data?.isColor) {
+      data = data._getRGBA([1, 1, 1, 1]);
+    }
+
     if (uniform.isArray) {
       if (
         uniform._cachedData &&

package/dist/webgl/p5.Texture.js

@@ -1,11 +1,11 @@
-import '../constants-BdTiYOQI.js';
+import '../constants-0wkVUfqa.js';
 import '../dom/p5.Element.js';
-import '../p5.Renderer-BmD2P6Wv.js';
+import '../p5.Renderer-CQI8PO1F.js';
 import '../dom/p5.MediaElement.js';
-export { M as MipmapTexture, T as Texture, t as default } from '../rendering-CC8JNTwG.js';
+export { M as MipmapTexture, T as Texture, t as default } from '../rendering-ltTIxpF2.js';
 import '../dom/p5.File.js';
 import '../io/p5.XML.js';
-import '../creating_reading-C7hu6sg1.js';
+import '../creating_reading-DLkHH80h.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
 import '../image/filters.js';
@@ -13,6 +13,7 @@ import '../math/p5.Vector.js';
 import '../shape/custom_shapes.js';
 import '../core/States.js';
 import '../io/utilities.js';
+import '../strands/ir_types.js';
 import '../shape/2d_primitives.js';
 import '../core/helpers.js';
 import '../shape/attributes.js';
@@ -21,7 +22,6 @@ import '../shape/vertex.js';
 import '../color/setting.js';
 import 'omggif';
 import '../io/csv.js';
-import 'gifenc';
 import '../image/pixels.js';
 import '../core/transform.js';
 import './GeometryBuilder.js';