From 27bfb6697e369fb990685d07899248ad83189eb3 Mon Sep 17 00:00:00 2001
From: Dave Pagurek <davepagurek@gmail.com>
Date: Tue, 14 Nov 2023 18:04:09 -0500
Subject: [PATCH] Fix incorrect draw target when applying filter to a
 framebuffer

---
 src/webgl/p5.RendererGL.js | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index b25156f920..c9095a03fc 100644
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -1092,10 +1092,9 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     else {
       this.filterShader = args[0];
     }
-    // pg.clear(); // prevent undesirable feedback effects accumulating secretly
-
-    let pd = this._pInst.pixelDensity();
-    let texelSize = [1 / (this.width * pd), 1 / (this.height * pd)];
+    const target = this.activeFramebuffer() || this;
+    // TODO: resize pg and change its density here if it doesn't match the target
+    pg.draw(() => this._pInst.clear()); // prevent undesirable feedback effects accumulating secretly
 
     // apply blur shader with multiple passes
     if (operation === constants.BLUR) {
@@ -1103,25 +1102,39 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     }
     // every other non-blur shader uses single pass
     else {
+      let texelSize = [
+        1 / (target.width * target.pixelDensity()),
+        1 / (target.height * target.pixelDensity())
+      ];
       pg.draw(() => {
-        shader(this.filterShader);
-        this.filterShader.setUniform('tex0', this);
+        this._pInst.noStroke();
+        this._pInst.shader(this.filterShader);
+        this.filterShader.setUniform('tex0', target);
         this.filterShader.setUniform('texelSize', texelSize);
-        this.filterShader.setUniform('canvasSize', [this.width, this.height]);
+        this.filterShader.setUniform('canvasSize', [target.width, target.height]);
         this.filterShader.setUniform('filterParameter', filterParameter);
-        console.log(this.activeFramebuffers.slice());
-        rect(-this.width / 2, -this.height / 2, this.width, this.height);
+        this._pInst.plane(target.width, target.height);
       });
     }
     // draw pg contents onto main renderer
     this._pInst.push();
+    this._pInst.clear();
     this._pInst.resetMatrix();
     // Also removed filterCamera for now.
-    this._pInst.image(pg, -this.width / 2, -this.height / 2,
-      this.width, this.height);
+    this._pInst.imageMode(constants.CENTER);
+    this._pInst.image(pg, 0, 0);
     this._pInst.pop();
   }
 
+  // Pass this off to the host instance so that we can treat a renderer and a
+  // framebuffer the same in filter()
+  pixelDensity(newDensity) {
+    if (newDensity) {
+      return this._pInst.pixelDensity(newDensity);
+    }
+    return this._pInst.pixelDensity();
+  }
+
   blendMode(mode) {
     if (
       mode === constants.DARKEST ||