feat: add support for variable premultipliedAlpha on a per layer basis

bhouston · Sep 9, 2020 · dde2b70 · dde2b70
1 parent d472b33
commit dde2b70
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/examples/compositing/basic/index.ts b/src/examples/compositing/basic/index.ts
@@ -28,12 +28,16 @@ async function init(): Promise<null> {
     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
@@ -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
@@ -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) {