From 07c05431bf8754415736052046123a97ab475d2c Mon Sep 17 00:00:00 2001 From: spayton Date: Mon, 4 Sep 2023 09:40:16 +0100 Subject: [PATCH] split webgl blendmodes into separate destination color/alpha values (#2347) --- spine-ts/spine-webgl/src/LoadingScreen.ts | 2 +- spine-ts/spine-webgl/src/PolygonBatcher.ts | 17 ++++++---- spine-ts/spine-webgl/src/ShapeRenderer.ts | 15 +++++---- .../spine-webgl/src/SkeletonDebugRenderer.ts | 2 +- spine-ts/spine-webgl/src/SkeletonRenderer.ts | 5 +-- spine-ts/spine-webgl/src/WebGL.ts | 33 +++++++++++++++---- 6 files changed, 51 insertions(+), 23 deletions(-) diff --git a/spine-ts/spine-webgl/src/LoadingScreen.ts b/spine-ts/spine-webgl/src/LoadingScreen.ts index 4e74a8bec..19c3eb1f5 100644 --- a/spine-ts/spine-webgl/src/LoadingScreen.ts +++ b/spine-ts/spine-webgl/src/LoadingScreen.ts @@ -88,7 +88,7 @@ export class LoadingScreen implements Disposable { renderer.resize(ResizeMode.Expand); renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0); - renderer.batcher.setBlendMode(gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + renderer.batcher.setBlendMode(gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); if (complete) { this.fadeOut += this.timeKeeper.delta * (this.timeKeeper.totalTime < 1 ? 2 : 1); diff --git a/spine-ts/spine-webgl/src/PolygonBatcher.ts b/spine-ts/spine-webgl/src/PolygonBatcher.ts index 418c0a5b2..3ce608348 100644 --- a/spine-ts/spine-webgl/src/PolygonBatcher.ts +++ b/spine-ts/spine-webgl/src/PolygonBatcher.ts @@ -47,7 +47,8 @@ export class PolygonBatcher implements Disposable { private indicesLength = 0; private srcColorBlend: number; private srcAlphaBlend: number; - private dstBlend: number; + private dstColorBlend: number; + private dstAlphaBlend: number; private cullWasEnabled = false; constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) { @@ -60,7 +61,8 @@ export class PolygonBatcher implements Disposable { let gl = this.context.gl; this.srcColorBlend = gl.SRC_ALPHA; this.srcAlphaBlend = gl.ONE; - this.dstBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstColorBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstAlphaBlend = gl.ONE_MINUS_SRC_ALPHA; } begin (shader: Shader) { @@ -72,7 +74,7 @@ export class PolygonBatcher implements Disposable { let gl = this.context.gl; gl.enable(gl.BLEND); - gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend); + gl.blendFuncSeparate(this.srcColorBlend, this.dstColorBlend, this.srcAlphaBlend, this.dstAlphaBlend); if (PolygonBatcher.disableCulling) { this.cullWasEnabled = gl.isEnabled(gl.CULL_FACE); @@ -80,15 +82,16 @@ export class PolygonBatcher implements Disposable { } } - setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) { - if (this.srcColorBlend == srcColorBlend && this.srcAlphaBlend == srcAlphaBlend && this.dstBlend == dstBlend) return; + setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstColorBlend: number, dstAlphaBlend: number) { + if (this.srcColorBlend == srcColorBlend && this.srcAlphaBlend == srcAlphaBlend && this.dstColorBlend == dstColorBlend && this.dstAlphaBlend == dstAlphaBlend) return; this.srcColorBlend = srcColorBlend; this.srcAlphaBlend = srcAlphaBlend; - this.dstBlend = dstBlend; + this.dstColorBlend = dstColorBlend; + this.dstAlphaBlend = dstAlphaBlend; if (this.isDrawing) { this.flush(); let gl = this.context.gl; - gl.blendFuncSeparate(srcColorBlend, dstBlend, srcAlphaBlend, dstBlend); + gl.blendFuncSeparate(srcColorBlend, dstColorBlend, srcAlphaBlend, dstAlphaBlend); } } diff --git a/spine-ts/spine-webgl/src/ShapeRenderer.ts b/spine-ts/spine-webgl/src/ShapeRenderer.ts index 1bb7c066e..240e86320 100644 --- a/spine-ts/spine-webgl/src/ShapeRenderer.ts +++ b/spine-ts/spine-webgl/src/ShapeRenderer.ts @@ -43,7 +43,8 @@ export class ShapeRenderer implements Disposable { private tmp = new Vector2(); private srcColorBlend: number; private srcAlphaBlend: number; - private dstBlend: number; + private dstColorBlend: number; + private dstAlphaBlend: number; constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) { if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); @@ -52,7 +53,8 @@ export class ShapeRenderer implements Disposable { let gl = this.context.gl; this.srcColorBlend = gl.SRC_ALPHA; this.srcAlphaBlend = gl.ONE; - this.dstBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstColorBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstAlphaBlend = gl.ONE_MINUS_SRC_ALPHA; } begin (shader: Shader) { @@ -63,17 +65,18 @@ export class ShapeRenderer implements Disposable { let gl = this.context.gl; gl.enable(gl.BLEND); - gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend); + gl.blendFuncSeparate(this.srcColorBlend, this.dstColorBlend, this.srcAlphaBlend, this.dstAlphaBlend); } - setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) { + setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstColorBlend: number, dstAlphaBlend: number) { this.srcColorBlend = srcColorBlend; this.srcAlphaBlend = srcAlphaBlend; - this.dstBlend = dstBlend; + this.dstColorBlend = dstColorBlend; + this.dstAlphaBlend = dstAlphaBlend; if (this.isDrawing) { this.flush(); let gl = this.context.gl; - gl.blendFuncSeparate(srcColorBlend, dstBlend, srcAlphaBlend, dstBlend); + gl.blendFuncSeparate(srcColorBlend, dstColorBlend, srcAlphaBlend, dstAlphaBlend); } } diff --git a/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts b/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts index ed71b5c7a..7273b6d2b 100644 --- a/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts @@ -67,7 +67,7 @@ export class SkeletonDebugRenderer implements Disposable { let skeletonY = skeleton.y; let gl = this.context.gl; let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA; - shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); let bones = skeleton.bones; if (this.drawBones) { diff --git a/spine-ts/spine-webgl/src/SkeletonRenderer.ts b/spine-ts/spine-webgl/src/SkeletonRenderer.ts index 73b4fc09c..bded0dd82 100644 --- a/spine-ts/spine-webgl/src/SkeletonRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonRenderer.ts @@ -168,8 +168,9 @@ export class SkeletonRenderer { blendMode = slotBlendMode; batcher.setBlendMode( WebGLBlendModeConverter.getSourceColorGLBlendMode(blendMode, premultipliedAlpha), - WebGLBlendModeConverter.getSourceAlphaGLBlendMode(blendMode), - WebGLBlendModeConverter.getDestGLBlendMode(blendMode)); + WebGLBlendModeConverter.getSourceAlphaGLBlendMode(blendMode, premultipliedAlpha), + WebGLBlendModeConverter.getDestColorGLBlendMode(blendMode), + WebGLBlendModeConverter.getDestAlphaGLBlendMode(blendMode, premultipliedAlpha) ); } if (clipper.isClipping()) { diff --git a/spine-ts/spine-webgl/src/WebGL.ts b/spine-ts/spine-webgl/src/WebGL.ts index 5f21980ec..ad7326808 100644 --- a/spine-ts/spine-webgl/src/WebGL.ts +++ b/spine-ts/spine-webgl/src/WebGL.ts @@ -71,6 +71,7 @@ const ONE_MINUS_DST_ALPHA = 0x0305; const DST_COLOR = 0x0306; export class WebGLBlendModeConverter { + static getDestGLBlendMode (blendMode: BlendMode) { switch (blendMode) { case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; @@ -81,22 +82,42 @@ export class WebGLBlendModeConverter { } } + static getDestColorGLBlendMode (blendMode: BlendMode) { + switch (blendMode) { + case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Additive: return ONE; + case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Screen: return ONE_MINUS_SRC_COLOR; + default: throw new Error("Unknown blend mode: " + blendMode); + } + } + + static getDestAlphaGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { + switch (blendMode) { + case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Additive: return premultipliedAlpha ? ONE_MINUS_SRC_ALPHA : ONE; + case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Screen: return ONE_MINUS_SRC_ALPHA; + default: throw new Error("Unknown blend mode: " + blendMode); + } + } + static getSourceColorGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { switch (blendMode) { case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Multiply: return DST_COLOR; - case BlendMode.Screen: return ONE; + case BlendMode.Screen: return premultipliedAlpha ? ONE : SRC_ALPHA; default: throw new Error("Unknown blend mode: " + blendMode); } } - static getSourceAlphaGLBlendMode (blendMode: BlendMode) { + static getSourceAlphaGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { switch (blendMode) { - case BlendMode.Normal: return ONE; - case BlendMode.Additive: return ONE; - case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA; - case BlendMode.Screen: return ONE_MINUS_SRC_COLOR; + case BlendMode.Normal: return premultipliedAlpha ? SRC_ALPHA : ONE; + case BlendMode.Additive: return premultipliedAlpha ? SRC_ALPHA : ONE; + case BlendMode.Multiply: return ONE; + case BlendMode.Screen: return ONE; default: throw new Error("Unknown blend mode: " + blendMode); } }