Merge pull request #3835 from stalgiag/glGraphicsClear

Make WebGL canvases clear alpha by default + add unit tests for this

Author: lmccart

src/webgl/p5.RendererGL.js

@@ -164,7 +164,7 @@ p5.RendererGL.prototype = Object.create(p5.Renderer.prototype);
 
 p5.RendererGL.prototype._setAttributeDefaults = function(pInst) {
   var defaults = {
-    alpha: false,
+    alpha: true,
     depth: true,
     stencil: true,
     antialias: false,
@@ -254,7 +254,7 @@ p5.RendererGL.prototype._resetContext = function(options, callback) {
  * The available attributes are:
  * <br>
  * alpha - indicates if the canvas contains an alpha buffer
- * default is false
+ * default is true
  * <br><br>
  * depth - indicates whether the drawing buffer has a depth buffer
  * of at least 16 bits - default is true

test/unit/webgl/p5.RendererGL.js

@@ -231,6 +231,76 @@ suite('p5.RendererGL', function() {
     });
   });
 
+  suite('GL Renderer clear()', function() {
+    var pg;
+    var pixel;
+    test('webgl graphics background draws into webgl canvas', function(done) {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+      myp5.background(0, 255, 255, 255);
+      pg = myp5.createGraphics(25, 50, myp5.WEBGL);
+      pg.background(0);
+      myp5.image(pg, -myp5.width / 2, -myp5.height / 2);
+      pixel = myp5.get(0, 0);
+      assert.deepEqual(pixel, [0, 0, 0, 255]);
+      done();
+    });
+
+    test('transparent GL graphics with GL canvas', function(done) {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+      pg = myp5.createGraphics(25, 50, myp5.WEBGL);
+      myp5.background(0, 255, 255);
+      pg.clear();
+      myp5.image(pg, -myp5.width / 2, -myp5.height / 2);
+      pixel = myp5.get(0, 0);
+      assert.deepEqual(pixel, [0, 255, 255, 255]);
+      done();
+    });
+
+    test('semi-transparent GL graphics with GL canvas', function(done) {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+      pg = myp5.createGraphics(25, 50, myp5.WEBGL);
+      myp5.background(0, 255, 255);
+      pg.background(100, 100, 100, 100);
+      myp5.image(pg, -myp5.width / 2, -myp5.height / 2);
+      pixel = myp5.get(0, 0);
+      assert.deepEqual(pixel, [39, 194, 194, 194]);
+      done();
+    });
+
+    test('webgl graphics background draws into 2D canvas', function(done) {
+      myp5.createCanvas(50, 50);
+      myp5.background(0, 255, 255, 255);
+      pg = myp5.createGraphics(25, 50, myp5.WEBGL);
+      pg.background(0);
+      myp5.image(pg, 0, 0);
+      pixel = myp5.get(0, 0);
+      assert.deepEqual(pixel, [0, 0, 0, 255]);
+      done();
+    });
+
+    test('transparent GL graphics with 2D canvas', function(done) {
+      myp5.createCanvas(50, 50);
+      pg = myp5.createGraphics(25, 50, myp5.WEBGL);
+      myp5.background(0, 255, 255);
+      pg.clear();
+      myp5.image(pg, 0, 0);
+      pixel = myp5.get(0, 0);
+      assert.deepEqual(pixel, [0, 255, 255, 255]);
+      done();
+    });
+
+    test('semi-transparent GL graphics with 2D canvas', function(done) {
+      myp5.createCanvas(50, 50);
+      pg = myp5.createGraphics(25, 50, myp5.WEBGL);
+      myp5.background(0, 255, 255);
+      pg.background(100, 100, 100, 100);
+      myp5.image(pg, 0, 0);
+      pixel = myp5.get(0, 0);
+      assert.deepEqual(pixel, [39, 194, 194, 255]);
+      done();
+    });
+  });
+
   suite('blendMode()', function() {
     var testBlend = function(mode, intended) {
       myp5.blendMode(mode);
@@ -274,8 +344,8 @@ 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([0, 0, 255, 255], mixAndReturn(myp5.REPLACE, 255));
+      assert.deepEqual([133, 69, 191, 158], mixAndReturn(myp5.ADD, 255));
+      assert.deepEqual([0, 0, 255, 122], mixAndReturn(myp5.REPLACE, 255));
       assert.deepEqual([133, 255, 133, 255], mixAndReturn(myp5.SUBTRACT, 255));
       assert.deepEqual([255, 0, 255, 255], mixAndReturn(myp5.SCREEN, 0));
       assert.deepEqual([0, 255, 0, 255], mixAndReturn(myp5.EXCLUSION, 255));