Merge pull request #8546 from processing/fix/webgpu-filter-shader

Fix WebGPU filter shader parameters being named differently than in WebGL

Author: davepagurek

src/webgpu/p5.RendererWebGPU.js

@@ -3124,7 +3124,7 @@ ${hookUniformFields}}
           {
             vertex: {},
             fragment: {
-              "vec4<f32> getColor": `(inputs: FilterInputs, tex: texture_2d<f32>, tex_sampler: sampler) -> vec4<f32> {
+              "vec4<f32> getColor": `(inputs: FilterInputs, canvasContent: texture_2d<f32>, canvasContent_sampler: sampler) -> vec4<f32> {
                 return textureSample(tex, tex_sampler, inputs.texCoord);
               }`,
             },

test/unit/visual/cases/webgpu.js

@@ -252,6 +252,26 @@ visualSuite("WebGPU", function () {
 
       await screenshot();
     });
+
+    visualTest('filter shaders with flat API', async function(p5, screenshot) {
+      await p5.createCanvas(50, 50, p5.WEBGPU);
+      p5.background(255);
+      p5.noStroke();
+      p5.fill(0);
+      p5.circle(0, 0, 20);
+      const invert = p5.buildFilterShader(({ p5 }) => {
+        p5.filterColor.begin();
+        const regular = p5.getTexture(
+          p5.filterColor.canvasContent,
+          p5.filterColor.texCoord
+        );
+        const inverted = [1 - regular.rgb, regular.a];
+        p5.filterColor.set(inverted);
+        p5.filterColor.end();
+      }, { p5 });
+      p5.filter(invert);
+      await screenshot();
+    });
   });
 
   visualSuite('filters', function() {

test/unit/visual/screenshots/WebGPU/Shaders/filter shaders with flat API/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}