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

Author: Vaivaswat2244

src/webgl/p5.RendererGL.js

@@ -427,6 +427,46 @@ class RendererGL extends Renderer {
     this.drawShapeCount = 1;
 
     this.scratchMat3 = new Matrix(3);
+
+    this.isStencilTestOn = false; // Track stencil test state
+    this._userEnabledStencil = false; // Track whether user enabled stencil
+    // Override WebGL enable function
+    const prevEnable = this.drawingContext.enable;
+    this.drawingContext.enable = (key) => {
+      if (key === this.drawingContext.STENCIL_TEST) {
+        // When clip() calls enable(), don't mark as user-enabled
+          if (!this._clipping) {
+            this._userEnabledStencil = true;
+          }
+          this.isStencilTestOn = true;
+      }
+      return prevEnable.call(this.drawingContext, key);
+    };
+
+    // Override WebGL disable function
+    const prevDisable = this.drawingContext.disable;
+    this.drawingContext.disable = (key) => {
+        if (key === this.drawingContext.STENCIL_TEST) {
+            // When pop() disables the stencil test after clip(), 
+            // restore the user's stencil test setting
+            if (this._clipDepth === this._pushPopDepth) {
+                this.isStencilTestOn = this._userEnabledStencil;
+            } else {
+                this.isStencilTestOn = false;
+                this._userEnabledStencil = false;
+            }
+        }
+        return prevDisable.call(this.drawingContext, key);
+    };
+
+    // Override WebGL getEnabled function
+    const prevGetEnabled = this.drawingContext.getEnabled;
+    this.drawingContext.getEnabled = (key) => {
+        if (key === this.drawingContext.STENCIL_TEST) {
+            return this.isStencilTestOn;
+        }
+        return prevGetEnabled.call(this.drawingContext, key);
+    };
   }
 
   //////////////////////////////////////////////
@@ -1024,7 +1064,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.isStencilTestOn) {
+      this.GL.disable(this.GL.STENCIL_TEST);
+    }
+  
   }
 
   /**
@@ -1387,7 +1430,8 @@ class RendererGL extends Renderer {
     this.drawTarget()._isClipApplied = true;
 
     const gl = this.GL;
-    gl.clearStencil(0);
+    this._savedStencilTestState = this._userEnabledStencil;
+    gl.clearStencil(0); 
     gl.clear(gl.STENCIL_BUFFER_BIT);
     gl.enable(gl.STENCIL_TEST);
     this._stencilTestOn = true;
@@ -1739,6 +1783,11 @@ class RendererGL extends Renderer {
       this._pushPopDepth === this._clipDepths[this._clipDepths.length - 1]
     ) {
       this._clearClip();
+      if (!this._savedStencilTestState) {
+          this.GL.disable(this.GL.STENCIL_TEST);
+      }
+      
+      this._userEnabledStencil = this._savedStencilTestState;
     }
     super.pop(...args);
     this._applyStencilTestIfClipping();
@@ -1750,7 +1799,9 @@ class RendererGL extends Renderer {
         this.GL.enable(this.GL.STENCIL_TEST);
         this._stencilTestOn = true;
       } else {
-        this.GL.disable(this.GL.STENCIL_TEST);
+        if (!this.isStencilTestOn) {
+          this.GL.disable(this.GL.STENCIL_TEST);
+      }
         this._stencilTestOn = false;
       }
     }