Minor changes and added tests for the stencil tests

Author: Vaivaswat2244

src/webgl/p5.RendererGL.js

@@ -429,16 +429,13 @@ class RendererGL extends Renderer {
     this.scratchMat3 = new Matrix(3);
 
     this._userEnabledStencil = false;
-    this.isStencilTestOn = 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) => {
-      // When enable is called with STENCIL_TEST
       if (key === this.drawingContext.STENCIL_TEST) {
-        // If not during clip(), mark as user-enabled
         if (!this._clipping) {
           this._userEnabledStencil = true;
         }
@@ -449,14 +446,7 @@ class RendererGL extends Renderer {
     // Override WebGL disable function
     this.drawingContext.disable = (key) => {
       if (key === this.drawingContext.STENCIL_TEST) {
-        // When pop() disables the stencil test after clip(),
-        // preserve the user's stencil test setting
-        if (this._clipDepth === this._pushPopDepth) {
-          // Don't change user setting here, just use internal disable
-        } else {
-          // User explicitly disabled stencil test
           this._userEnabledStencil = false;
-        }
       }
       return this._internalDisable.call(this.drawingContext, key);
     };
@@ -1423,9 +1413,9 @@ class RendererGL extends Renderer {
     this.drawTarget()._isClipApplied = true;
 
     const gl = this.GL;
-    gl.clearStencil(0); 
+    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
@@ -1789,7 +1779,7 @@ 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 {
         if (!this._userEnabledStencil) {

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);
@@ -2684,5 +2685,105 @@ suite('p5.RendererGL', function() {
         expect(logs.join('\n')).to.match(/One of the geometries has a custom vertex property 'aCustom' with fewer values than vertices./);
       }
     );
-  })
+  });
+
+  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);
+
+        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);
+        });
+        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);
+        });
+        myp5.pop();
+
+        myp5.redraw();
+
+        assert.equal(myp5._renderer._userEnabledStencil, false);
+        assert.equal(gl.isEnabled(gl.STENCIL_TEST), false);
+      }
+    );
+  });
 });