Merge pull request #7578 from Vaivaswat2244/stencil_test

Updated Stencil Test Case to prevent it from disable after every draw

Author: davepagurek

src/webgl/p5.RendererGL.js

@@ -432,6 +432,29 @@ class RendererGL extends Renderer {
     this.drawShapeCount = 1;
 
     this.scratchMat3 = new Matrix(3);
+
+    this._userEnabledStencil = false;
+    // Store original methods for internal use
+    this._internalEnable = this.drawingContext.enable;
+    this._internalDisable = this.drawingContext.disable;
+
+    // Override WebGL enable function
+    this.drawingContext.enable = (key) => {
+      if (key === this.drawingContext.STENCIL_TEST) {
+        if (!this._clipping) {
+          this._userEnabledStencil = true;
+        }
+      }
+      return this._internalEnable.call(this.drawingContext, key);
+    };
+
+    // Override WebGL disable function
+    this.drawingContext.disable = (key) => {
+      if (key === this.drawingContext.STENCIL_TEST) {
+          this._userEnabledStencil = false;
+      }
+      return this._internalDisable.call(this.drawingContext, key);
+    };
   }
 
   //////////////////////////////////////////////
@@ -1010,7 +1033,10 @@ class RendererGL extends Renderer {
     //Clear depth every frame
     this.GL.clearStencil(0);
     this.GL.clear(this.GL.DEPTH_BUFFER_BIT | this.GL.STENCIL_BUFFER_BIT);
-    this.GL.disable(this.GL.STENCIL_TEST);
+    if (!this._userEnabledStencil) {
+      this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
+    }
+  
   }
 
   /**
@@ -1402,7 +1428,7 @@ class RendererGL extends Renderer {
     const gl = this.GL;
     gl.clearStencil(0);
     gl.clear(gl.STENCIL_BUFFER_BIT);
-    gl.enable(gl.STENCIL_TEST);
+    this._internalEnable.call(gl, gl.STENCIL_TEST);
     this._stencilTestOn = true;
     gl.stencilFunc(
       gl.ALWAYS, // the test
@@ -1752,6 +1778,12 @@ class RendererGL 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();
@@ -1760,10 +1792,12 @@ class RendererGL extends Renderer {
     const drawTarget = this.drawTarget();
     if (drawTarget._isClipApplied !== this._stencilTestOn) {
       if (drawTarget._isClipApplied) {
-        this.GL.enable(this.GL.STENCIL_TEST);
+        this._internalEnable.call(this.GL, this.GL.STENCIL_TEST);
         this._stencilTestOn = true;
       } else {
-        this.GL.disable(this.GL.STENCIL_TEST);
+        if (!this._userEnabledStencil) {
+          this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
+        }
         this._stencilTestOn = false;
       }
     }

test/unit/webgl/p5.RendererGL.js

@@ -1,3 +1,4 @@
+import { suite } from 'vitest';
 import p5 from '../../../src/app.js';
 import '../../js/chai_helpers';
 const toArray = (typedArray) => Array.from(typedArray);
@@ -2704,6 +2705,108 @@ suite('p5.RendererGL', function() {
     );
   });
 
+  suite('Stencil Test Tracking', function() {
+    test('Stencil test is disabled by default',
+      function() {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const gl = myp5._renderer.GL;
+        const isEnabled = gl.isEnabled(gl.STENCIL_TEST);
+        
+        assert.equal(isEnabled, false);
+        assert.equal(myp5._renderer._userEnabledStencil, false);
+      }
+    );
+    
+    test('Tracks when user manually enables stencil test',
+      function() {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const gl = myp5._renderer.GL;
+        
+        gl.enable(gl.STENCIL_TEST);
+        assert.equal(myp5._renderer._userEnabledStencil, true);
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), true);
+      }
+    );
+    
+    test('Tracks when user manually disables stencil test',
+      function() {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const gl = myp5._renderer.GL;
+
+        gl.enable(gl.STENCIL_TEST);
+        gl.disable(gl.STENCIL_TEST);
+        
+        assert.equal(myp5._renderer._userEnabledStencil, false);
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), false);
+      }
+    );
+    
+    test('Maintains stencil test state across draw cycles when user enabled',
+      function() {
+        let drawCalled = false;
+
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const originalDraw = myp5.draw;
+        
+        myp5.draw = function() {
+          drawCalled = true;
+          if (originalDraw) originalDraw.call(myp5);
+        };
+        
+        const gl = myp5._renderer.GL;
+        gl.enable(gl.STENCIL_TEST);
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), true)
+        myp5.redraw();
+
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), true);
+        assert.equal(myp5._renderer._userEnabledStencil, true);
+
+        myp5.draw = originalDraw;
+      }
+    );
+    
+    test('Internal clip operations preserve user stencil test setting',
+      function() {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const gl = myp5._renderer.GL;
+
+        gl.enable(gl.STENCIL_TEST);
+
+        myp5.push();
+        myp5.clip(() => {
+          myp5.rect(0, 0, 10, 10);
+        });
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), true)
+        myp5.pop();
+
+        assert.equal(myp5._renderer._userEnabledStencil, true);
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), true);
+      }
+    );
+    
+    test('Internal clip operations do not enable stencil test for future draw cycles',
+      function() {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const gl = myp5._renderer.GL;
+
+        gl.disable(gl.STENCIL_TEST);
+        assert.equal(myp5._renderer._userEnabledStencil, false);
+
+        myp5.push();
+        myp5.clip(() => {
+          myp5.rect(0, 0, 10, 10);
+        });
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), true)
+        myp5.pop();
+
+        myp5.redraw();
+
+        assert.equal(myp5._renderer._userEnabledStencil, false);
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), false);
+      }
+    );
+  });
+
   suite('Matrix getters', function() {
     test('uModelMatrix', function() {
       p5.registerAddon(function (p5, fn) {