Merge pull request #5794 from davepagurek/fix/webgl-blend

Fix WebGL blending bugs

Author: davepagurek

src/core/rendering.js

@@ -252,7 +252,8 @@ p5.prototype.createGraphics = function(w, h, renderer) {
  * min(A*factor, B).</li>
  * <li><code>LIGHTEST</code> - only the lightest colour succeeds: C =
  * max(A*factor, B).</li>
- * <li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>
+ * <li><code>DIFFERENCE</code> - subtract colors from underlying image.
+ * <em>(2D)</em></li>
  * <li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less
  * extreme.</li>
  * <li><code>MULTIPLY</code> - multiply the colors, result will always be

src/webgl/material.js

@@ -1054,7 +1054,10 @@ p5.RendererGL.prototype._applyColorBlend = function(colors) {
 
   const isTexture = this.drawMode === constants.TEXTURE;
   const doBlend =
-    isTexture || colors[colors.length - 1] < 1.0 || this._isErasing;
+    isTexture ||
+    this.curBlendMode !== constants.BLEND ||
+    colors[colors.length - 1] < 1.0 ||
+    this._isErasing;
 
   if (doBlend !== this._isBlending) {
     if (
@@ -1085,10 +1088,13 @@ p5.RendererGL.prototype._applyBlendMode = function() {
   const gl = this.GL;
   switch (this.curBlendMode) {
     case constants.BLEND:
-    case constants.ADD:
       gl.blendEquation(gl.FUNC_ADD);
       gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
       break;
+    case constants.ADD:
+      gl.blendEquation(gl.FUNC_ADD);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+      break;
     case constants.REMOVE:
       gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
       gl.blendFunc(gl.SRC_ALPHA, gl.DST_ALPHA);

src/webgl/p5.RendererGL.js

@@ -1032,6 +1032,7 @@ p5.RendererGL.prototype.push = function() {
   properties.drawMode = this.drawMode;
 
   properties._currentNormal = this._currentNormal;
+  properties.curBlendMode = this.curBlendMode;
 
   return style;
 };

test/unit/webgl/p5.RendererGL.js

@@ -437,7 +437,7 @@ suite('p5.RendererGL', function() {
     test('blendModes change pixel colors as expected', function(done) {
       myp5.createCanvas(10, 10, myp5.WEBGL);
       myp5.noStroke();
-      assert.deepEqual([133, 69, 191, 255], mixAndReturn(myp5.ADD, 255));
+      assert.deepEqual([122, 0, 122, 255], mixAndReturn(myp5.ADD, 0));
       assert.deepEqual([0, 0, 255, 255], mixAndReturn(myp5.REPLACE, 255));
       assert.deepEqual([133, 255, 133, 255], mixAndReturn(myp5.SUBTRACT, 255));
       assert.deepEqual([255, 0, 255, 255], mixAndReturn(myp5.SCREEN, 0));
@@ -447,6 +447,68 @@ suite('p5.RendererGL', function() {
       assert.deepEqual([0, 0, 0, 255], mixAndReturn(myp5.DARKEST, 255));
       done();
     });
+
+    test('blendModes match 2D mode', function(done) {
+      myp5.createCanvas(10, 10, myp5.WEBGL);
+      myp5.setAttributes({ alpha: true });
+      const ref = myp5.createGraphics(myp5.width, myp5.height);
+      ref.translate(ref.width / 2, ref.height / 2); // Match WebGL mode
+
+      const testBlend = function(target, colorA, colorB, mode) {
+        target.clear();
+        target.push();
+        target.background(colorA);
+        target.blendMode(mode);
+        target.noStroke();
+        target.fill(colorB);
+        target.rectMode(target.CENTER);
+        target.rect(0, 0, target.width, target.height);
+        target.pop();
+        return target.get(0, 0);
+      };
+
+      const assertSameIn2D = function(colorA, colorB, mode) {
+        const refColor = testBlend(myp5, colorA, colorB, mode);
+        const webglColor = testBlend(ref, colorA, colorB, mode);
+        if (refColor[3] === 0) {
+          assert.equal(webglColor[3], 0);
+        } else {
+          assert.deepEqual(
+            refColor,
+            webglColor,
+            `Blending ${colorA} with ${colorB} using ${mode}`
+          );
+        }
+      };
+
+      const red = '#F53';
+      const blue = '#13F';
+      assertSameIn2D(red, blue, myp5.BLEND);
+      assertSameIn2D(red, blue, myp5.ADD);
+      assertSameIn2D(red, blue, myp5.DARKEST);
+      assertSameIn2D(red, blue, myp5.LIGHTEST);
+      assertSameIn2D(red, blue, myp5.EXCLUSION);
+      assertSameIn2D(red, blue, myp5.MULTIPLY);
+      assertSameIn2D(red, blue, myp5.SCREEN);
+      assertSameIn2D(red, blue, myp5.REPLACE);
+      assertSameIn2D(red, blue, myp5.REMOVE);
+      done();
+    });
+
+    test('blendModes are included in push/pop', function(done) {
+      myp5.createCanvas(10, 10, myp5.WEBGL);
+      myp5.blendMode(myp5.MULTIPLY);
+      myp5.push();
+      myp5.blendMode(myp5.ADD);
+      assert.equal(myp5._renderer.curBlendMode, myp5.ADD, 'Changed to ADD');
+      myp5.pop();
+      assert.equal(
+        myp5._renderer.curBlendMode,
+        myp5.MULTIPLY,
+        'Resets to MULTIPLY'
+      );
+      done();
+    });
   });
 
   suite('BufferDef', function() {