add opacity to layers and fix transparent blending

src/lib/engines/layerCompositor/Layer.ts

@@ -22,13 +22,18 @@ class LayerTexture {
     public url: string,
     public texImage2D: TexImage2D,
     public offset: Vector2,
-    public uvScaleFactor = new Vector2(1, -1),
+    public opacity = 1,
+    public uvScaleFactor = new Vector2(1, 1),
     public uvOffset = new Vector2(0, 1),
   ) {
-    // console.log(`Layer: size ( ${texImage2D.size.x}, ${texImage2D.size.y} ) `);
-
     // world space is assumed to be in layer pixel space
-    const planeToLayer = makeMatrix4Scale(new Vector3(this.texImage2D.size.width, this.texImage2D.size.height, 1.0));
+    const planeToLayer = makeMatrix4Scale(
+      new Vector3(
+        this.texImage2D.size.width * this.uvScaleFactor.width,
+        this.texImage2D.size.height * this.uvScaleFactor.height,
+        1.0,
+      ),
+    );
     const layerToImage = makeMatrix4Translation(new Vector3(this.offset.x, this.offset.y, 0.0));
     this.planeToImage = makeMatrix4Concatenation(layerToImage, planeToLayer);
 
@@ -102,10 +107,11 @@ export class LayerMask extends LayerTexture {
     texImage2D: TexImage2D,
     offset: Vector2,
     public mode: LayerMaskMode = LayerMaskMode.Luminance,
-    uvScaleFactor = new Vector2(1, -1),
+    opacity = 1,
+    uvScaleFactor = new Vector2(1, 1),
     uvOffset = new Vector2(0, 1),
   ) {
-    super(compositor, url, texImage2D, offset, uvScaleFactor, uvOffset);
+    super(compositor, url, texImage2D, offset, opacity, uvScaleFactor, uvOffset);
   }
 }
 
@@ -117,10 +123,11 @@ export class Layer extends LayerTexture {
     offset: Vector2,
     public mask?: LayerMask,
     public blendMode: LayerBlendMode = LayerBlendMode.SrcOver,
-    uvScaleFactor = new Vector2(1, -1),
+    opacity = 1,
+    uvScaleFactor = new Vector2(1, 1),
     uvOffset = new Vector2(0, 1),
   ) {
-    super(compositor, url, texImage2D, offset, uvScaleFactor, uvOffset);
+    super(compositor, url, texImage2D, offset, opacity, uvScaleFactor, uvOffset);
   }
 
   public get isTriviallyBlended(): boolean {

src/lib/engines/layerCompositor/LayerCompositor.ts

@@ -322,6 +322,7 @@ export class LayerCompositor {
 
       maskMode: 0,
       blendMode: 0,
+      opacity: 1,
     };
 
     //console.log(`drawing layer #${index}: ${layer.url} at ${layer.offset.x}, ${layer.offset.y}`);
@@ -402,6 +403,7 @@ export class LayerCompositor {
 
           maskMode: 0,
           blendMode: 0,
+          opacity: 1,
         };
 
         renderBufferGeometry(
@@ -430,6 +432,7 @@ export class LayerCompositor {
 
           maskMode: 0,
           blendMode: layer.blendModeUniformValue,
+          opacity: layer.opacity,
         };
 
         if (mask) {

src/lib/engines/layerCompositor/blend.frag

@@ -54,7 +54,7 @@ vec4 compositeColors(vec4 src, vec4 dst) {
   }
 
   return vec4(
-    IDa * Sc + ISa * Dc + Sa * Da * blend,
+    IDa * Sc * Sa +  ISa * Dc * Da + Sa * Da * blend,
     Sa + ISa * Da
   );
 }

src/lib/engines/layerCompositor/fragment.glsl

@@ -10,6 +10,8 @@ uniform int convertToPremultipliedAlpha;
 uniform int maskMode;
 uniform int blendMode;
 
+uniform float opacity;
+
 #pragma include "./mask.frag"
 #pragma include "./blend.frag"
 
@@ -26,6 +28,7 @@ void main() {
   }
 
   vec4 outputColor = layerColor;
+  outputColor *= opacity;
 
   if( maskMode != 0 ){
 
@@ -51,13 +54,12 @@ void main() {
   }
 
   if( blendMode != 0){
-    vec4 imageColor = texture2D( imageMap, v_image_uv, mipmapBias );
-
-    // Image always comes from premultiplied backbuffer
+    vec4 imageColor = texture2D( imageMap, v_image_uv, mipmapBias ); // non-premultiplied
 
-    outputColor = compositeColors( outputColor, imageColor );
+    // convert to non-premultiplied
+    outputColor.rgb = outputColor.a > (0.5 / 255.) ? outputColor.rgb / outputColor.a : vec3(0);
+    outputColor = compositeColors( outputColor, imageColor ); // output is premultiplied, inputs are not
   }
 
   gl_FragColor = outputColor;
-
-}
+}