Fix clipping for WebGPU

Author: davepagurek

preview/index.html

@@ -96,6 +96,8 @@
 
       p.draw = function () {
         p.clear();
+        p.push();
+        p.clip(() => p.rect(-50, -50, 200, 200));
         /*p.orbitControl();
         p.push();
         p.textAlign(p.CENTER, p.CENTER);
@@ -173,6 +175,7 @@
         p.pop();
 
         p.filter(p.BLUR, 10)
+        p.pop();
       };
     };
 

src/core/p5.Renderer3D.js

@@ -1341,12 +1341,6 @@ export class Renderer3D extends Renderer {
       this._pushPopDepth === this._clipDepths[this._clipDepths.length - 1]
     ) {
       this._clearClip();
-      if (!this._userEnabledStencil) {
-        this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
-      }
-
-    // Reset saved state
-    // this._userEnabledStencil = this._savedStencilTestState;
     }
     super.pop(...args);
     this._applyStencilTestIfClipping();

src/webgl/p5.RendererGL.js

@@ -498,6 +498,9 @@ class RendererGL extends Renderer3D {
   _clearClipBuffer() {
     this.GL.clearStencil(1);
     this.GL.clear(this.GL.STENCIL_BUFFER_BIT);
+    if (!this._userEnabledStencil) {
+      this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
+    }
   }
 
   // x,y are canvas-relative (pre-scaled by _pixelDensity)

src/webgpu/p5.RendererWebGPU.js

@@ -414,24 +414,22 @@ class RendererWebGPU extends Renderer3D {
           multisample: { count: sampleCount },
           depthStencil: {
             format: depthFormat,
-            depthWriteEnabled: true,
+            depthWriteEnabled: !clipping,
             depthCompare: 'less-equal',
             stencilFront: {
-              compare: clipping ? 'always' : (clipApplied ? 'equal' : 'always'),
+              compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
               failOp: 'keep',
               depthFailOp: 'keep',
               passOp: clipping ? 'replace' : 'keep',
             },
             stencilBack: {
-              compare: clipping ? 'always' : (clipApplied ? 'equal' : 'always'),
+              compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
               failOp: 'keep',
               depthFailOp: 'keep',
               passOp: clipping ? 'replace' : 'keep',
             },
-            stencilReadMask: clipApplied ? 0xFFFFFFFF : 0x00000000,
-            stencilWriteMask: clipping ? 0xFFFFFFFF : 0x00000000,
-            stencilLoadOp: "load",
-            stencilStoreOp: "store",
+            stencilReadMask: 0xFF,
+            stencilWriteMask: clipping ? 0xFF : 0x00,
           },
         });
         shader._pipelineCache.set(key, pipeline);
@@ -1070,6 +1068,18 @@ class RendererWebGPU extends Renderer3D {
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
     const currentShader = this._curShader;
     passEncoder.setPipeline(currentShader.getPipeline(this._shaderOptions({ mode })));
+
+    // Set stencil reference value for clipping
+    const drawTarget = this.drawTarget();
+    if (drawTarget._isClipApplied && !this._clipping) {
+      // When using the clip mask, test against reference value 0 (background)
+      // WebGL uses NOTEQUAL with ref 0, so fragments pass where stencil != 0
+      // In WebGPU with 'not-equal', we need ref 0 to pass where stencil != 0
+      passEncoder.setStencilReference(0);
+    } else if (this._clipping) {
+      // When writing to the clip mask, write reference value 1
+      passEncoder.setStencilReference(1);
+    }
     // Bind vertex buffers
     for (const buffer of this._getVertexBuffers(currentShader)) {
       const location = currentShader.attributes[buffer.attr].location;
@@ -1569,6 +1579,78 @@ class RendererWebGPU extends Renderer3D {
     return { adjustedWidth: width, adjustedHeight: height };
   }
 
+  _applyClip() {
+    const commandEncoder = this.device.createCommandEncoder();
+
+    const activeFramebuffer = this.activeFramebuffer();
+    const depthTexture = activeFramebuffer ?
+      (activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
+      this.depthTexture;
+
+    if (!depthTexture) {
+      return;
+    }
+
+    const depthStencilAttachment = {
+      view: depthTexture.createView(),
+      stencilLoadOp: 'clear',
+      stencilStoreOp: 'store',
+      stencilClearValue: 0,
+      depthReadOnly: true,
+      stencilReadOnly: false,
+    };
+
+    const renderPassDescriptor = {
+      colorAttachments: [],
+      depthStencilAttachment: depthStencilAttachment,
+    };
+
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.end();
+
+    this._pendingCommandEncoders.push(commandEncoder.finish());
+    this._hasPendingDraws = true;
+  }
+
+  _unapplyClip() {
+    // In WebGPU, clip unapplication is handled through pipeline state rather than direct commands
+    // The stencil test configuration is set in the render pipeline based on _clipping and _clipInvert flags
+    // This is already handled in the _shaderOptions() method and pipeline creation
+  }
+
+  _clearClipBuffer() {
+    const commandEncoder = this.device.createCommandEncoder();
+
+    const activeFramebuffer = this.activeFramebuffer();
+    const depthTexture = activeFramebuffer ?
+      (activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
+      this.depthTexture;
+
+    if (!depthTexture) {
+      return;
+    }
+
+    const depthStencilAttachment = {
+      view: depthTexture.createView(),
+      stencilLoadOp: 'clear',
+      stencilStoreOp: 'store',
+      stencilClearValue: 1,
+      depthReadOnly: true,
+      stencilReadOnly: false,
+    };
+
+    const renderPassDescriptor = {
+      colorAttachments: [],
+      depthStencilAttachment: depthStencilAttachment,
+    };
+
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.end();
+
+    this._pendingCommandEncoders.push(commandEncoder.finish());
+    this._hasPendingDraws = true;
+  }
+
   _applyStencilTestIfClipping() {
     // TODO
   }

test/unit/visual/cases/webgpu.js

@@ -377,6 +377,45 @@ visualSuite("WebGPU", function () {
     );
   });
 
+  visualSuite("Clipping", function () {
+    visualTest(
+      "Basic clipping with circles",
+      async function (p5, screenshot) {
+        await p5.createCanvas(50, 50, p5.WEBGPU);
+        p5.background("white");
+
+        // Draw some circles that extend beyond the clipping area
+        p5.fill("red");
+        p5.noStroke();
+        p5.circle(-15, -15, 25);
+        p5.fill("green");
+        p5.circle(15, -15, 25);
+        p5.fill("blue");
+        p5.circle(-15, 15, 25);
+        p5.fill("yellow");
+        p5.circle(15, 15, 25);
+
+        // Apply clipping to a smaller rectangle in the center
+        p5.push();
+        p5.clip(() => {
+          p5.rect(-12.5, -12.5, 25, 25);
+        });
+
+        // Draw more circles that should be clipped to the rectangle
+        p5.fill("purple");
+        p5.circle(-8, -8, 16);
+        p5.fill("orange");
+        p5.circle(8, 8, 16);
+        p5.fill("cyan");
+        p5.circle(0, 0, 12);
+
+        p5.pop();
+
+        await screenshot();
+      },
+    );
+  });
+
   visualSuite('Typography', function () {
     visualSuite('textFont', function () {
       visualTest('with a font file in WebGPU', async function (p5, screenshot) {

test/unit/visual/screenshots/WebGPU/Clipping/Basic clipping with circles/000.png

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