improvements for blending functions such that bleeding with background clearColor is avoided

src/DestinationNode/destinationnode.js

@@ -29,11 +29,14 @@ class DestinationNode extends ProcessingNode {
         let gl = this._gl;
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.enable(gl.BLEND);
         gl.clearColor(0, 0, 0, 0.0); // green;
         gl.clear(gl.COLOR_BUFFER_BIT);
 
+        // Set the initial blend function to 'proiritize' the SRC so that the background
+        // clearColor doesn't bleed / blend into output
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ZERO);
+
         this.inputs.forEach(node => {
             super._render();
             //map the input textures input the node
@@ -46,6 +49,10 @@ class DestinationNode extends ProcessingNode {
             }
 
             gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+            // Update the blend function to allow for 'default' blend of transparency
+            // of the next inputs of the node
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         });
     }
 }

src/ProcessingNodes/compositingnode.js

@@ -38,7 +38,11 @@ class CompositingNode extends ProcessingNode {
         );
         gl.clearColor(0, 0, 0, 0); // green;
         gl.clear(gl.COLOR_BUFFER_BIT);
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+        // Set the initial blend function to 'proiritize' the SRC so that the background
+        // clearColor doesn't bleed / blend into output
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ZERO);
 
         this.inputs.forEach(node => {
             if (node === undefined) return;
@@ -54,6 +58,19 @@ class CompositingNode extends ProcessingNode {
             }
 
             gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+            // Update the blend function to allow for 'default' blend of transparency
+            // of the next inputs of the node
+            gl.blendFuncSeparate(
+                gl.SRC_ALPHA,
+                gl.ONE_MINUS_SRC_ALPHA,
+                gl.ONE,
+                gl.ONE_MINUS_SRC_ALPHA
+            );
+            // We blend RGB and Alpha separately because as you stack layers in a CompositionNode, we don’t want to interpolate alpha
+            // (i.e. we don’t want a mid-point or a weighted average of the alpha channels)
+            // Transparent things in real life don’t blend. The colors blend, but the opacity gets monotonically more opaque as things pile up
+            // (i.e. stack two transparent gels and the result is more opaque than either one individually)
         });
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);

src/ProcessingNodes/effectnode.js

@@ -40,6 +40,10 @@ class EffectNode extends ProcessingNode {
         );
         gl.clearColor(0, 0, 0, 0); // green;
         gl.clear(gl.COLOR_BUFFER_BIT);
+
+        // Set the initial blend function to 'proiritize' the SRC so that the background
+        // clearColor doesn't bleed / blend into output
+        gl.enable(gl.BLEND);
         gl.blendFunc(gl.ONE, gl.ZERO);
 
         super._render();