From dde2b70afeff5bbc506898309591d30cd1498224 Mon Sep 17 00:00:00 2001 From: Ben Houston Date: Wed, 9 Sep 2020 10:21:44 -0400 Subject: [PATCH] feat: add support for variable premultipliedAlpha on a per layer basis --- src/examples/compositing/basic/index.ts | 10 +++++++--- src/lib/engines/layerCompositor/Layer.ts | 1 + src/lib/engines/layerCompositor/LayerCompositor.ts | 8 ++++---- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/examples/compositing/basic/index.ts b/src/examples/compositing/basic/index.ts index d60defc8..2ffc97d5 100644 --- a/src/examples/compositing/basic/index.ts +++ b/src/examples/compositing/basic/index.ts @@ -28,12 +28,16 @@ async function init(): Promise { requestAnimationFrame(animate); const layers: Layer[] = []; - layers.push(new Layer(layerCompositor, shirtUrl, shirtTexImage2D, new Vector2(0, 0))); - layers.push(new Layer(layerCompositor, splatUrl, splatTexImage2D, new Vector2(750, 1000))); + layers.push(new Layer(layerCompositor, shirtUrl, shirtTexImage2D, new Vector2(0, 0), undefined, undefined, false)); + layers.push( + new Layer(layerCompositor, splatUrl, splatTexImage2D, new Vector2(750, 1000), undefined, undefined, false), + ); // layers.push(new Layer(layerCompositor, radialUrl, radialTexImage2D, new Vector2(825, 0))); // layers.push(new Layer(layerCompositor, concentricUrl, concentricTexImage2D, new Vector2(0, 200))); // layers.push(new Layer(layerCompositor, radialUrl, radialTexImage2D, new Vector2(825, 400))); - layers.push(new Layer(layerCompositor, splatUrl, splatTexImage2D, new Vector2(250, 250))); + layers.push( + new Layer(layerCompositor, splatUrl, splatTexImage2D, new Vector2(250, 250), undefined, undefined, false), + ); // const now = Date.now(); // layerRenderer.zoomScale = Math.sin(now * 0.0001) + 2.0; diff --git a/src/lib/engines/layerCompositor/Layer.ts b/src/lib/engines/layerCompositor/Layer.ts index c623ff05..f2a8d4c3 100644 --- a/src/lib/engines/layerCompositor/Layer.ts +++ b/src/lib/engines/layerCompositor/Layer.ts @@ -19,6 +19,7 @@ export class Layer { public offset: Vector2, public uvScaleFactor = new Vector2(1, -1), public uvOffset = new Vector2(0, 1), + public premultipliedAlpha = true, ) { // console.log(`Layer: size ( ${texImage2D.size.x}, ${texImage2D.size.y} ) `); diff --git a/src/lib/engines/layerCompositor/LayerCompositor.ts b/src/lib/engines/layerCompositor/LayerCompositor.ts index ac4754de..25c563e3 100644 --- a/src/lib/engines/layerCompositor/LayerCompositor.ts +++ b/src/lib/engines/layerCompositor/LayerCompositor.ts @@ -229,7 +229,7 @@ export class LayerCompositor { // shrink to fit within render target // const fitScale = Math.min(canvasSize.width / this.imageSize.width, canvasSize.height / this.imageSize.height); - canvasFramebuffer.clearState = new ClearState(new Vector3(0, 1, 0.0), 1.0); + canvasFramebuffer.clearState = new ClearState(new Vector3(0, 0, 0), 0.0); canvasFramebuffer.clear(); const offscreenColorAttachment = this.offscreenColorAttachment; @@ -276,10 +276,10 @@ export class LayerCompositor { } // clear to black and full alpha. - offscreenFramebuffer.clearState = new ClearState(new Vector3(1, 0, 0), 1.0); + offscreenFramebuffer.clearState = new ClearState(new Vector3(0, 0, 0), 0.0); offscreenFramebuffer.clear(); - const offscreenCenter = this.imageSize.clone().multiplyByScalar(0.5); + // const offscreenCenter = this.imageSize.clone().multiplyByScalar(0.5); const imageToOffscreen = makeMatrix4Orthographic(0, this.offscreenSize.width, 0, this.offscreenSize.height, -1, 1); /* console.log( `Canvas Camera: height ( ${this.offscreenSize.height} ), center ( ${offscreenCenter.x}, ${offscreenCenter.y} ) `, @@ -295,7 +295,7 @@ export class LayerCompositor { layerMap: layer.texImage2D, uvToTexture: layer.uvToTexture, mipmapBias: 0, - premultipledAlpha: 1, + premultipledAlpha: layer.premultipliedAlpha ? 1 : 0, }; /* if (this.firstRender) {