From 16ca09396a5b4db7344859ed2eab2db3b38aca54 Mon Sep 17 00:00:00 2001 From: Patrick Schroen Date: Sun, 26 Jan 2025 09:27:34 -0500 Subject: [PATCH 1/2] chore: stencil types --- types/core/Program.d.ts | 9 ++++++++- types/core/RenderTarget.d.ts | 2 ++ types/core/Renderer.d.ts | 18 ++++++++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/types/core/Program.d.ts b/types/core/Program.d.ts index 936bc783..e86eca7d 100644 --- a/types/core/Program.d.ts +++ b/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; diff --git a/types/core/RenderTarget.d.ts b/types/core/RenderTarget.d.ts index 0ba8f38c..d3363923 100644 --- a/types/core/RenderTarget.d.ts +++ b/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; diff --git a/types/core/Renderer.d.ts b/types/core/Renderer.d.ts index b4485e35..eef6def5 100644 --- a/types/core/Renderer.d.ts +++ b/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; From 9a0b1a3930956f36ff6a7f8d9f4e7bed8781bd12 Mon Sep 17 00:00:00 2001 From: Patrick Schroen Date: Sun, 26 Jan 2025 09:42:13 -0500 Subject: [PATCH 2/2] chore: prettier --- src/core/Program.js | 11 +++++------ src/core/RenderTarget.js | 2 +- src/core/Renderer.js | 31 ++++++++++++++----------------- 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/core/Program.js b/src/core/Program.js index 1de96da4..a7413402 100644 --- a/src/core/Program.js +++ b/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 } = {}) { diff --git a/src/core/RenderTarget.js b/src/core/RenderTarget.js index c60d92f4..47d43783 100644 --- a/src/core/RenderTarget.js +++ b/src/core/RenderTarget.js @@ -1,4 +1,4 @@ -import { Texture } from './Texture.js' +import { Texture } from './Texture.js'; export class RenderTarget { constructor( diff --git a/src/core/Renderer.js b/src/core/Renderer.js index 7d3b0d98..63dbdfb0 100644 --- a/src/core/Renderer.js +++ b/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(