Merge pull request #8731 from processing/fix/webgpu

Minor WebGL->WebGPU fixes

Author: davepagurek

docs/parameterData.json

@@ -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

@@ -319,7 +319,7 @@ function rendererWebGPU(p5, fn) {
         }
         if (this._pInst._webgpuAttributes[key] !== value) {
           //changing value of previously altered attribute
-          this._webgpuAttributes[key] = value;
+          this._pInst._webgpuAttributes[key] = value;
           unchanged = false;
         }
         //setting all attributes with some change
@@ -682,9 +682,9 @@ function rendererWebGPU(p5, fn) {
         1;  // No MSAA needed when blitting already-antialiased textures to canvas
       const sampleCount = this._getValidSampleCount(requestedSampleCount);
 
-      const depthFormat = activeFramebuffer && activeFramebuffer.useDepth ?
-        this._getWebGPUDepthFormat(activeFramebuffer) :
-        this.depthFormat;
+      const depthFormat = activeFramebuffer
+        ? (activeFramebuffer.useDepth ? this._getWebGPUDepthFormat(activeFramebuffer) : undefined)
+        : this.depthFormat;
 
       const drawTarget = this.drawTarget();
       const clipping = this._clipping;
@@ -761,25 +761,27 @@ function rendererWebGPU(p5, fn) {
             },
             primitive: { topology },
             multisample: { count: sampleCount },
-            depthStencil: {
-              format: depthFormat,
-              depthWriteEnabled: !clipping,
-              depthCompare: 'less-equal',
-              stencilFront: {
-                compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
-                failOp: 'keep',
-                depthFailOp: 'keep',
-                passOp: clipping ? 'replace' : 'keep',
+            ...(depthFormat ? {
+              depthStencil: {
+                format: depthFormat,
+                depthWriteEnabled: !clipping,
+                depthCompare: 'less-equal',
+                stencilFront: {
+                  compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
+                  failOp: 'keep',
+                  depthFailOp: 'keep',
+                  passOp: clipping ? 'replace' : 'keep',
+                },
+                stencilBack: {
+                  compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
+                  failOp: 'keep',
+                  depthFailOp: 'keep',
+                  passOp: clipping ? 'replace' : 'keep',
+                },
+                stencilReadMask: 0xFF,
+                stencilWriteMask: clipping ? 0xFF : 0x00,
               },
-              stencilBack: {
-                compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
-                failOp: 'keep',
-                depthFailOp: 'keep',
-                passOp: clipping ? 'replace' : 'keep',
-              },
-              stencilReadMask: 0xFF,
-              stencilWriteMask: clipping ? 0xFF : 0x00,
-            },
+            } : {}),
           });
           shader._pipelineCache.set(key, pipeline);
         }
@@ -2986,7 +2988,7 @@ ${hookUniformFields}}
     }
 
     defaultFramebufferAntialias() {
-      return true;
+      return this._pInst._webgpuAttributes?.antialias !== false;
     }
 
     supportsFramebufferAntialias() {
@@ -3852,13 +3854,6 @@ ${hookUniformFields}}
         px = Math.ceil(Math.sqrt(totalIterations));
         py = Math.ceil(totalIterations / px);
         pz = 1;
-
-        if (p5.debug || exceedsLimits) {
-          console.warn(
-            `p5.js: Compute dispatch (${x}, ${y}, ${z}) auto-spread to (${px}, ${py}, 1) ` +
-            `to ${exceedsLimits ? 'stay within GPU limits' : 'optimize performance'}.`
-          );
-        }
       }
 
       shader.setUniform('uPhysicalCount', [px, py, pz]);

src/webgpu/p5.RendererWebGPU.js

@@ -584,12 +584,25 @@ export const wgslBackend = {
     const samplerVariable = build.variableNode(strandsContext, { baseType: BaseType.SAMPLER, dimension: 1 }, samplerIdentifier);
     const samplerNode = createStrandsNode(samplerVariable.id, samplerVariable.dimension, strandsContext);
 
-    // Create the augmented args: [texture, sampler, coords]
-    const augmentedArgs = [textureArg, samplerNode, coordsArg];
-
-    const { id, dimension } = build.functionCallNode(strandsContext, 'textureSample', augmentedArgs, {
+    // Create a LOD literal node (0.0) so we can use textureSampleLevel instead
+    // of textureSample. textureSample doesn't let you use uniform values in control
+    // flow, whereas textureSampleLevel does. While we don't have mipmaps, we don't
+    // miss out.
+    // TODO: if we *do* add mipmap support, update this logic -- we'd need to hoist
+    // the texture lookup out of the control flow.
+    const lodLiteral = build.scalarLiteralNode(
+      strandsContext,
+      { dimension: 1, baseType: BaseType.FLOAT },
+      0.0
+    );
+    const lodNode = createStrandsNode(lodLiteral.id, lodLiteral.dimension, strandsContext);
+
+    // Create the augmented args: [texture, sampler, coords, lod]
+    const augmentedArgs = [textureArg, samplerNode, coordsArg, lodNode];
+
+    const { id, dimension } = build.functionCallNode(strandsContext, 'textureSampleLevel', augmentedArgs, {
       overloads: [{
-        params: [DataType.sampler2D, DataType.sampler, DataType.float2],
+        params: [DataType.sampler2D, DataType.sampler, DataType.float2, DataType.float1],
         returnType: DataType.float4
       }]
     });

src/webgpu/strands_wgslBackend.js

@@ -0,0 +1,9 @@
+import p5 from '../../types/global'
+
+async function setup() {
+  const renderer: p5.Renderer = await createCanvas(100, 100, WEBGPU);
+  background(0);
+  fill(255);
+  noStroke();
+  circle(0, 0, 50);
+}

test/types/webgpu.ts

@@ -273,6 +273,31 @@ visualSuite("WebGPU", function () {
       await screenshot();
     });
 
+    visualTest('filter shaders can sample a texture inside a conditional branch', async function(p5, screenshot) {
+      await p5.createCanvas(50, 50, p5.WEBGPU);
+      p5.background(255);
+      p5.noStroke();
+      p5.fill(0);
+      p5.circle(0, 0, 20);
+      // This shader only samples the texture for pixels in the left half of the
+      // canvas, exercising getTexture() inside a non-uniform conditional
+      const conditionalInvert = p5.buildFilterShader(({ p5 }) => {
+        p5.filterColor.begin();
+        if (p5.filterColor.texCoord.x < 0.5) {
+          const col = p5.getTexture(
+            p5.filterColor.canvasContent,
+            p5.filterColor.texCoord
+          );
+          p5.filterColor.set([1 - col.rgb, col.a]);
+        } else {
+          p5.filterColor.set([0, 0, 1, 1]);
+        }
+        p5.filterColor.end();
+      }, { p5 });
+      p5.filter(conditionalInvert);
+      await screenshot();
+    });
+
     visualTest('instanceID in fragment hook colors instances (WebGPU)', async function(p5, screenshot) {
       await p5.createCanvas(50, 50, p5.WEBGPU);
       const numInstances = 4;
@@ -523,6 +548,28 @@ visualSuite("WebGPU", function () {
       },
     );
 
+    visualTest(
+      "Framebuffer with depth disabled",
+      async function (p5, screenshot) {
+        await p5.createCanvas(50, 50, p5.WEBGPU);
+        const fbo = p5.createFramebuffer({ width: 50, height: 50, depth: false });
+
+        fbo.draw(() => {
+          p5.background(0, 0, 200);
+          p5.fill(255, 200, 0);
+          p5.noStroke();
+          p5.circle(0, 0, 30);
+        });
+
+        p5.background(50);
+        p5.texture(fbo);
+        p5.noStroke();
+        p5.plane(50, 50);
+
+        await screenshot();
+      },
+    );
+
     visualTest(
       "Fixed-size framebuffer after manual resize",
       async function (p5, screenshot) {
@@ -564,6 +611,21 @@ visualSuite("WebGPU", function () {
     );
   });
 
+  visualSuite("Rendering attributes", function () {
+    visualTest(
+      "noSmooth() does not crash and disables antialiasing",
+      async function (p5, screenshot) {
+        await p5.createCanvas(50, 50, p5.WEBGPU);
+        await p5.noSmooth();
+        p5.background(0);
+        p5.fill(255);
+        p5.noStroke();
+        p5.circle(0, 0, 30);
+        await screenshot();
+      },
+    );
+  });
+
   visualSuite("Clipping", function () {
     visualTest(
       "Basic clipping with circles",

test/unit/visual/cases/webgpu.js

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