Merge pull request #6783 from davepagurek/fix/filter-on-framebuffer

Fix filters run on framebuffers with different sizes from the main canvas

src/webgl/p5.RendererGL.js

@@ -1125,8 +1125,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     target.filterCamera._resize();
     this._pInst.setCamera(target.filterCamera);
     this._pInst.resetMatrix();
-    this._pInst.image(fbo, -this.width / 2, -this.height / 2,
-      this.width, this.height);
+    this._pInst.image(fbo, -target.width / 2, -target.height / 2,
+      target.width, target.height);
     this._pInst.pop();
     this._pInst.pop();
   }

test/unit/visual/cases/webgl.js

@@ -24,6 +24,52 @@ visualSuite('WebGL', function() {
     });
   });
 
+  visualSuite('filter', function() {
+    visualTest('On the main canvas', function(p5, screenshot) {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      p5.noStroke();
+      p5.fill('red');
+      p5.circle(0, 0, 20);
+      p5.filter(p5.GRAY);
+      screenshot();
+    });
+
+    visualTest('On a framebuffer', function(p5, screenshot) {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const fbo = p5.createFramebuffer({ antialias: true });
+      fbo.begin();
+      p5.noStroke();
+      p5.fill('red');
+      p5.circle(0, 0, 20);
+      p5.filter(p5.GRAY);
+      fbo.end();
+      p5.imageMode(p5.CENTER);
+      p5.image(fbo, 0, 0);
+      screenshot();
+    });
+
+    visualTest(
+      'On a framebuffer sized differently from the main canvas',
+      function(p5, screenshot) {
+        p5.createCanvas(50, 50, p5.WEBGL);
+        const fbo = p5.createFramebuffer({
+          width: 26,
+          height: 26,
+          antialias: true
+        });
+        fbo.begin();
+        p5.noStroke();
+        p5.fill('red');
+        p5.circle(0, 0, 20);
+        p5.filter(p5.GRAY);
+        fbo.end();
+        p5.imageMode(p5.CENTER);
+        p5.image(fbo, 0, 0);
+        screenshot();
+      }
+    );
+  });
+
   visualSuite('Lights', function() {
     visualTest('Fill color and default ambient material', function(p5, screenshot) {
       p5.createCanvas(50, 50, p5.WEBGL);

test/unit/visual/screenshots/WebGL/filter/On a framebuffer sized differently from the main canvas/metadata.json

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

test/unit/visual/screenshots/WebGL/filter/On a framebuffer/metadata.json

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

test/unit/visual/screenshots/WebGL/filter/On the main canvas/metadata.json

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