Fixes for filters on p5.Graphics

src/image/filterRenderer2D.js

@@ -44,6 +44,7 @@ class FilterRenderer2D {
       console.error('WebGL not supported, cannot apply filter.');
       return;
     }
+    this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
 
     this.textures = new Map();
 
@@ -381,7 +382,7 @@ class FilterRenderer2D {
 
   get canvasTexture() {
     if (!this._canvasTexture) {
-      this._canvasTexture = new Texture(this._renderer, this.parentRenderer.wrappedElt);
+      this._canvasTexture = new Texture(this._renderer, this.parentRenderer);
     }
     return this._canvasTexture;
   }

test/unit/visual/cases/webgl.js

@@ -272,6 +272,37 @@ visualSuite('WebGL', function() {
 
       screenshot();
     });
+
+    for (const mode of ['webgl', '2d']) {
+      visualTest(`Transparent background colors are correct in ${mode} mode`, function(p5, screenshot) {
+        p5.createCanvas(50, 50, p5.WEBGL);
+        const g = p5.createGraphics(50, 50, mode === 'webgl' ? p5.WEBGL : p5.P2D);
+        if (mode === 'webgl') g.translate(-p5.width/2, -p5.height/2);
+        g.noStroke();
+        g.fill(255, 0, 0, 100);
+        g.rect(10, 10, 30, 30);
+        g.filter(p5.BLUR, 4);
+        p5.imageMode(p5.CENTER);
+        p5.image(g, 0, 0);
+        screenshot();
+      });
+
+      visualTest(`Multiple filter passes work correctly on a p5.Graphics in ${mode} mode`, function(p5, screenshot) {
+        p5.createCanvas(50, 50, p5.WEBGL);
+        const g = p5.createGraphics(50, 50, mode === 'webgl' ? p5.WEBGL : p5.P2D);
+        if (mode === 'webgl') g.translate(-g.width/2, -g.height/2);
+        g.background(255);
+        g.noStroke();
+        g.fill(0);
+        g.rect(10, 10, 6, 6);
+        g.filter(p5.BLUR, 2);
+        g.rect(30, 30, 6, 6);
+        g.filter(p5.BLUR, 2);
+        p5.imageMode(p5.CENTER);
+        p5.image(g, 0, 0);
+        screenshot();
+      });
+    }
   });
 
   visualSuite('Lights', function() {
@@ -1164,7 +1195,7 @@ visualSuite('WebGL', function() {
       p5.plane(50, 50);
       screenshot();
     });
-   
+
     visualSuite('auto-return for shader hooks', () => {
       visualTest('auto-returns input struct when return is omitted', (p5, screenshot) => {
         p5.createCanvas(50, 50, p5.WEBGL);

test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/visualTest.js

@@ -64,24 +64,19 @@ export function visualSuite(
   suiteFn(name, () => {
     let lastShiftThreshold;
     let lastPrefix;
-    let lastDeviceRatio = window.devicePixelRatio;
     beforeAll(() => {
       lastPrefix = namePrefix;
       namePrefix += escapeName(name) + '/';
       lastShiftThreshold = shiftThreshold;
       if (newShiftThreshold !== undefined) {
         shiftThreshold = newShiftThreshold;
       }
-
-      // Force everything to be 1x
-      window.devicePixelRatio = 1;
     });
 
     callback();
 
     afterAll(() => {
       namePrefix = lastPrefix;
-      window.devicePixelRatio = lastDeviceRatio;
       shiftThreshold = lastShiftThreshold;
     });
   });
@@ -398,9 +393,12 @@ export function visualTest(
   suiteFn(testName, function() {
     let name;
     let myp5;
+    let lastDeviceRatio = window.devicePixelRatio;
 
     beforeAll(function() {
       name = namePrefix + escapeName(testName);
+      // Force everything to be 1x
+      window.devicePixelRatio = 1;
       return new Promise(res => {
         myp5 = new p5(function(p) {
           p.setup = function() {
@@ -411,6 +409,7 @@ export function visualTest(
     });
 
     afterAll(function() {
+      window.devicePixelRatio = lastDeviceRatio;
       myp5.remove();
     });