Merge branch 'dev-2.0' into woff-support

processing · Dec 27, 2024 · 9e1f506 · 9e1f506
2 parents 450be6d + abe5de9
commit 9e1f506
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 29 deletions.
diff --git a/src/webgl/loading.js b/src/webgl/loading.js
@@ -556,7 +556,6 @@ function loading(p5, fn){
     // Map from source index → Map of material → destination index
     const usedVerts = {}; // Track colored vertices
     let currentMaterial = null;
-    const coloredVerts = new Set(); //unique vertices with color
     let hasColoredVertices = false;
     let hasColorlessVertices = false;
     for (let line = 0; line < lines.length; ++line) {
@@ -622,8 +621,15 @@ function loading(p5, fn){
                 if (currentMaterial
                   && materials[currentMaterial]
                   && materials[currentMaterial].diffuseColor) {
-                  // Mark this vertex as colored
-                  coloredVerts.add(loadedVerts.v[vertParts[0]]); //since a set would only push unique values
+                  hasColoredVertices = true;
+                  const materialDiffuseColor =
+                    materials[currentMaterial].diffuseColor;
+                  model.vertexColors.push(materialDiffuseColor[0]);
+                  model.vertexColors.push(materialDiffuseColor[1]);
+                  model.vertexColors.push(materialDiffuseColor[2]);
+                  model.vertexColors.push(1);
+                } else {
+                  hasColorlessVertices = true;
                 }
               } else {
                 face.push(usedVerts[vertString][currentMaterial]);
@@ -636,24 +642,6 @@ function loading(p5, fn){
               face[1] !== face[2]
             ) {
               model.faces.push(face);
-              //same material for all vertices in a particular face
-              if (currentMaterial
-                && materials[currentMaterial]
-                && materials[currentMaterial].diffuseColor) {
-                hasColoredVertices = true;
-                //flag to track color or no color model
-                hasColoredVertices = true;
-                const materialDiffuseColor =
-                  materials[currentMaterial].diffuseColor;
-                for (let i = 0; i < face.length; i++) {
-                  model.vertexColors.push(materialDiffuseColor[0]);
-                  model.vertexColors.push(materialDiffuseColor[1]);
-                  model.vertexColors.push(materialDiffuseColor[2]);
-                  model.vertexColors.push(1);
-                }
-              } else {
-                hasColorlessVertices = true;
-              }
             }
           }
         }

diff --git a/src/webgl/material.js b/src/webgl/material.js
@@ -513,6 +513,65 @@ function material(p5, fn){
     p5._validateParameters('createShader', arguments);
     return new Shader(this._renderer, vertSrc, fragSrc, options);
   };
+  /**
+   * Creates and loads a filter shader from an external file.
+   *
+   * @method loadFilterShader
+   * @param {String} fragFilename path to the fragment shader file
+   * @param {Function} [successCallback] callback to be called once the shader is
+   *                                     loaded. Will be passed the
+   *                                     <a href="#/p5.Shader">p5.Shader</a> object.
+   * @param {Function} [failureCallback] callback to be called if there is an error
+   *                                     loading the shader. Will be passed the
+   *                                     error event.
+   * @return {Promise<p5.Shader>} a promise that resolves with a shader object
+   *
+   * @example
+   * <div modernizr='webgl'>
+   * <code>
+   * let myShader;
+   *
+   * async function setup() {
+   *   myShader = await loadFilterShader('assets/shader.frag');
+   *   createCanvas(100, 100, WEBGL);
+   *   noStroke();
+   * }
+   *
+   * function draw() {
+   *   // shader() sets the active shader with our shader
+   *   shader(myShader);
+   *
+   *   // rect gives us some geometry on the screen
+   *   rect(0, 0, width, height);
+   * }
+   * </code>
+   * </div>
+   * @alt
+   * A rectangle with a shader applied to it.
+   */
+  fn.loadFilterShader = async function (fragFilename, successCallback, failureCallback) { 
+    p5._validateParameters('loadFilterShader', arguments);
+    try {
+      // Load the fragment shader
+      const fragSrc = await this.loadStrings(fragFilename);
+      const fragString = await fragSrc.join('\n');
+
+      // Create the shader using createFilterShader
+      const loadedShader = this.createFilterShader(fragString, true);
+
+      if (successCallback) {
+        successCallback(loadedShader);
+      }
+
+      return loadedShader;
+    } catch (err) {
+      if (failureCallback) {
+        failureCallback(err);
+      } else {
+        console.error(err); 
+      }
+    }
+  };
 
   /**
    * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
@@ -604,7 +663,7 @@ function material(p5, fn){
    * </code>
    * </div>
    */
-  fn.createFilterShader = function (fragSrc) {
+  fn.createFilterShader = function (fragSrc, skipContextCheck = false) {
     p5._validateParameters('createFilterShader', arguments);
     let defaultVertV1 = `
       uniform mat4 uModelViewMatrix;
@@ -648,10 +707,12 @@ function material(p5, fn){
     `;
     let vertSrc = fragSrc.includes('#version 300 es') ? defaultVertV2 : defaultVertV1;
     const shader = new Shader(this._renderer, vertSrc, fragSrc);
-    if (this._renderer.GL) {
-      shader.ensureCompiledOnContext(this._renderer);
-    } else {
-      shader.ensureCompiledOnContext(this);
+    if (!skipContextCheck) {
+      if (this._renderer.GL) {
+        shader.ensureCompiledOnContext(this._renderer);
+      } else {
+        shader.ensureCompiledOnContext(this);
+      }
     }
     return shader;
   };
@@ -3683,9 +3744,7 @@ function material(p5, fn){
         );
         break;
     }
-    if (!this._isErasing) {
-      this._cachedBlendMode = this.states.curBlendMode;
-    }
+    this._cachedBlendMode = this.states.curBlendMode;
   };
 
   RendererGL.prototype.shader = function(s) {

diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js
@@ -533,4 +533,33 @@ visualSuite('WebGL', function() {
       screenshot();
     });
   });
+
+  visualSuite('erase()', () => {
+    visualTest('on the main canvas', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      p5.background(0);
+      p5.fill('red');
+      p5.rect(-20, -20, 40, 40);
+      p5.erase();
+      p5.circle(0, 0, 10);
+      p5.noErase();
+      screenshot();
+    });
+
+    visualTest('on a framebuffer', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      p5.background(0);
+      const fbo = p5.createFramebuffer();
+      fbo.begin();
+      p5.fill('red');
+      p5.rect(-20, -20, 40, 40);
+      p5.erase();
+      p5.circle(0, 0, 10);
+      p5.noErase();
+      fbo.end();
+      p5.imageMode(p5.CENTER);
+      p5.image(fbo, 0, 0);
+      screenshot();
+    });
+  });
 });
diff --git a/test/unit/visual/screenshots/WebGL/erase()/on a framebuffer/000.png b/test/unit/visual/screenshots/WebGL/erase()/on a framebuffer/000.png
diff --git a/test/unit/visual/screenshots/WebGL/erase()/on a framebuffer/metadata.json b/test/unit/visual/screenshots/WebGL/erase()/on a framebuffer/metadata.json
@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}
diff --git a/test/unit/visual/screenshots/WebGL/erase()/on the main canvas/000.png b/test/unit/visual/screenshots/WebGL/erase()/on the main canvas/000.png
diff --git a/test/unit/visual/screenshots/WebGL/erase()/on the main canvas/metadata.json b/test/unit/visual/screenshots/WebGL/erase()/on the main canvas/metadata.json
@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}