chore: stencil types

src/core/Program.js

@@ -41,7 +41,7 @@ export class Program {
         this.blendFunc = {};
         this.blendEquation = {};
         this.stencilFunc = {};
-        this.stencilOp = {}
+        this.stencilOp = {};
 
         // set default blendFunc if transparent flagged
         if (this.transparent && !this.blendFunc.src) {
@@ -157,12 +157,11 @@ export class Program {
         if (this.blendFunc.src) this.gl.renderer.setBlendFunc(this.blendFunc.src, this.blendFunc.dst, this.blendFunc.srcAlpha, this.blendFunc.dstAlpha);
         this.gl.renderer.setBlendEquation(this.blendEquation.modeRGB, this.blendEquation.modeAlpha);
 
-        if(this.stencilFunc.func || this.stencilOp.stencilFail) this.gl.renderer.enable(this.gl.STENCIL_TEST)
-            else this.gl.renderer.disable(this.gl.STENCIL_TEST)
-
-        this.gl.renderer.setStencilFunc(this.stencilFunc.func, this.stencilFunc.ref, this.stencilFunc.mask)
-        this.gl.renderer.setStencilOp(this.stencilOp.stencilFail, this.stencilOp.depthFail, this.stencilOp.depthPass)
+        if (this.stencilFunc.func || this.stencilOp.stencilFail) this.gl.renderer.enable(this.gl.STENCIL_TEST);
+        else this.gl.renderer.disable(this.gl.STENCIL_TEST);
 
+        this.gl.renderer.setStencilFunc(this.stencilFunc.func, this.stencilFunc.ref, this.stencilFunc.mask);
+        this.gl.renderer.setStencilOp(this.stencilOp.stencilFail, this.stencilOp.depthFail, this.stencilOp.depthPass);
     }
 
     use({ flipFaces = false } = {}) {

src/core/RenderTarget.js

@@ -1,4 +1,4 @@
-import { Texture } from './Texture.js'
+import { Texture } from './Texture.js';
 
 export class RenderTarget {
     constructor(

src/core/Renderer.js

@@ -201,38 +201,35 @@ export class Renderer {
     }
 
     setStencilMask(value) {
-        if(this.state.stencilMask === value) return;
+        if (this.state.stencilMask === value) return;
         this.state.stencilMask = value;
-        this.gl.stencilMask(value)
+        this.gl.stencilMask(value);
     }
 
     setStencilFunc(func, ref, mask) {
-
-        if((this.state.stencilFunc === func) &&
-            (this.state.stencilRef === ref) &&
-            (this.state.stencilFuncMask === mask)
-        ) return;
-
+        if (
+            this.state.stencilFunc === func &&
+            this.state.stencilRef === ref &&
+            this.state.stencilFuncMask === mask
+        )
+            return;
         this.state.stencilFunc = func || this.gl.ALWAYS;
         this.state.stencilRef = ref || 0;
         this.state.stencilFuncMask = mask || 0;
-
         this.gl.stencilFunc(func || this.gl.ALWAYS, ref || 0, mask || 0);
     }
 
     setStencilOp(stencilFail, depthFail, depthPass) {
-
-        if(this.state.stencilFail === stencilFail &&
+        if (
+            this.state.stencilFail === stencilFail &&
             this.state.stencilDepthFail === depthFail &&
             this.state.stencilDepthPass === depthPass
-        ) return;
-
+        )
+            return;
         this.state.stencilFail = stencilFail;
         this.state.stencilDepthFail = depthFail;
         this.state.stencilDepthPass = depthPass;
-
         this.gl.stencilOp(stencilFail, depthFail, depthPass);
-
     }
 
     activeTexture(value) {
@@ -371,9 +368,9 @@ export class Renderer {
             }
 
             // Same for stencil
-            if(this.stencil || (!target || target.stencil)) {
+            if (this.stencil || !target || target.stencil) {
                 this.enable(this.gl.STENCIL_TEST);
-                this.setStencilMask(0xff)
+                this.setStencilMask(0xff);
             }
 
             this.gl.clear(

types/core/Program.d.ts

@@ -1,4 +1,4 @@
-import type { OGLRenderingContext, BlendFunc, BlendEquation } from './Renderer';
+import type { OGLRenderingContext, BlendFunc, BlendEquation, StencilFunc, StencilOp } from './Renderer';
 
 export interface ProgramOptions {
     vertex: string;
@@ -39,6 +39,9 @@ export class Program {
     depthFunc: GLenum;
     blendFunc: BlendFunc;
     blendEquation: BlendEquation;
+    stencilRef: GLint;
+    stencilFunc: StencilFunc;
+    stencilOp: StencilOp;
 
     vertexShader: WebGLShader;
     fragmentShader: WebGLShader;
@@ -55,6 +58,10 @@ export class Program {
 
     setBlendEquation(modeRGB: GLenum, modeAlpha: GLenum): void;
 
+    setStencilFunc(func: GLenum, ref: GLint, mask: GLuint): void;
+
+    setStencilOp(stencilFail: GLenum, depthFail: GLenum, depthPass: GLenum): void;
+
     applyState(): void;
 
     use(options?: { flipFaces?: boolean }): void;

types/core/RenderTarget.d.ts

@@ -12,6 +12,7 @@ export interface RenderTargetOptions {
     depthTexture: boolean;
     wrapS: GLenum;
     wrapT: GLenum;
+    wrapR: GLenum;
     minFilter: GLenum;
     magFilter: GLenum;
     type: GLenum;
@@ -30,6 +31,7 @@ export class RenderTarget {
     width: number;
     height: number;
     depth: boolean;
+    stencil: boolean;
     buffer: WebGLFramebuffer;
     target: number;
 

types/core/Renderer.d.ts

@@ -41,6 +41,18 @@ export interface BlendEquation {
     modeAlpha?: GLenum;
 }
 
+export interface StencilFunc {
+    func: GLenum;
+    ref: GLint;
+    mask: GLuint;
+}
+
+export interface StencilOp {
+    stencilFail: GLenum;
+    depthFail: GLenum;
+    depthPass: GLenum;
+}
+
 export interface Viewport {
     x: number;
     y: number;
@@ -130,6 +142,12 @@ export class Renderer {
 
     setDepthFunc(value: GLenum): void;
 
+    setStencilMask(value: GLuint): void;
+
+    setStencilFunc(func?: GLenum, ref?: GLint, mask?: GLuint): void;
+
+    setStencilOp(stencilFail: GLenum, depthFail: GLenum, depthPass: GLenum): void;
+
     activeTexture(value: number): void;
 
     bindFramebuffer(options?: { target?: GLenum; buffer?: WebGLFramebuffer | null }): void;