processing · aferriss · Aug 2, 2023 · Jun 23, 2023 · Jun 23, 2023 · Jun 23, 2023
diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
@@ -579,7 +579,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
 
     // for post processing step
     this.filterShader = undefined;
-    this.filterFramebuffer = undefined;
+    this.filterGraphicsLayer = undefined;
 
     this.textureMode = constants.IMAGE;
     // default wrap settings
@@ -879,29 +879,44 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     this.curStrokeJoin = join;
   }
 
-  filter(...args) {
-    // Couldn't create filterFramebuffer in RendererGL constructor
-    // (.framebuffers was still undefined)
+  filter(userShader) {
+    // Couldn't create graphics in RendererGL constructor
+    // (led to infinite loop)
     // so it's just created here once on the initial filter call.
-    if (!this.filterFramebuffer) {
-      this.filterFramebuffer = new p5.Framebuffer(this._pInst);
+    if (!this.filterGraphicsLayer) {
+      this.filterGraphicsLayer =
+        new p5.Graphics(this.width, this.height, constants.WEBGL, this._pInst);
     }
 
-    // TODO:
+    // TODO, handle different signatures:
     // if args[0] is a p5.Shader,
     //   this.filterShader = args[0]
     // else
-    //   this.filterShader = selectFromShaderFilterDefaults(args[0])
-    //   filterOperation = undefined or args[1]
-    //
-    // this.filterFramebuffer.begin();
-    //
-    // apply shader
-    // transfer pixels to main canvas
-    //
-    // this.filterFramebuffer.end();
-
-    p5._friendlyError('webgl filter implementation in progress');
+    //   this.filterShader = map(args[0], {GRAYSCALE: grayscaleShader, ...})
+    //   filterOperationParameter = undefined or args[1]
+
+    let pg = this.filterGraphicsLayer;
+
+    // not sure why userShader[0] is the actual shader object
+    // and userShader is Arguments instead
+    userShader = userShader[0];
+    // perhaps necessary: bind the shader to the pg renderer, not the main
+    // let userShaderCopy =
+    //   new p5.Shader(pg._renderer, userShader._vertSrc, userShader._fragSrc);
+
+    // apply shader to pg
+    // TODO: shader isn't being applied properly
+    pg.shader(userShader);
+    userShader.setUniform('tex0', this);
+
+    // draw pg contents onto main renderer
+    this._pInst.push();
+    this._pInst.noStroke(); // don't draw triangles for plane() geometry
+    this._pInst.texture(pg);
+    this._pInst.plane(this.width, this.height);
+    this._pInst.pop();
+
+    // p5._friendlyError('webgl filter implementation in progress');
   }
 
   blendMode(mode) {

diff --git a/test/manual-test-examples/webgl/filter/index.html b/test/manual-test-examples/webgl/filter/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="../../styles.css">
+  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/test/manual-test-examples/webgl/filter/sketch.js b/test/manual-test-examples/webgl/filter/sketch.js
@@ -0,0 +1,44 @@
+function setup() {
+  createCanvas(100, 100, WEBGL);
+
+  let s = createShader(vert, frag);
+
+  // check to see if frag shader changes color as intended
+  // and that vertex shader preserves position, orientation, scale
+  background('RED');
+  circle(10,25,30);
+
+  filter(s);
+
+  // and that there's no side effects after filter()
+  circle(-35,-35,30);
+}
+
+vert = `attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+
+void main() {
+  vTexCoord = aTexCoord;
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+  gl_Position = positionVec4;
+}`;
+
+frag = `precision mediump float;
+varying mediump vec2 vTexCoord;
+
+uniform sampler2D tex0;
+
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+void main() {
+  vec2 uv = vTexCoord;
+  uv.y = 1.0 - uv.y;
+  vec4 sampledColor = texture2D(tex0, uv);
+  float gray = luma(sampledColor.rgb);
+  gl_FragColor = vec4(gray, gray, gray, 1);
+}`;
diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js
@@ -118,6 +118,85 @@ suite('p5.RendererGL', function() {
     });
   });
 
+  suite('filter shader', function() {
+    setup(function() {
+      vert = `attribute vec3 aPosition;
+      attribute vec2 aTexCoord;
+
+      varying vec2 vTexCoord;
+
+      void main() {
+        vTexCoord = aTexCoord;
+        vec4 positionVec4 = vec4(aPosition, 1.0);
+        positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+        gl_Position = positionVec4;
+      }`;
+
+      frag = `precision mediump float;
+      varying mediump vec2 vTexCoord;
+
+      uniform sampler2D tex0;
+
+      float luma(vec3 color) {
+        return dot(color, vec3(0.299, 0.587, 0.114));
+      }
+
+      void main() {
+        vec2 uv = vTexCoord;
+        uv.y = 1.0 - uv.y;
+        vec4 sampledColor = texture2D(tex0, uv);
+        float gray = luma(sampledColor.rgb);
+        gl_FragColor = vec4(gray, gray, gray, 1);
+      }`;
+    });
+
+    teardown(function() {
+    });
+
+    test('filter accepts correct params', function() {
+      myp5.createCanvas(5, 5, myp5.WEBGL);
+      let s = myp5.createShader(vert, frag);
+      myp5.filter(s);
+      // TODO: myp5.filter(myp5.POSTERIZE, 64)
+    });
+
+    test('secondary graphics layer is instantiated', function() {
+      let renderer = myp5.createCanvas(5, 5, myp5.WEBGL);
+      let s = myp5.createShader(vert, frag);
+      myp5.filter(s);
+      assert.notStrictEqual(renderer.filterGraphicsLayer, undefined);
+    });
+
+    test('custom shader makes changes to main canvas', function() {
+      myp5.createCanvas(5, 5, myp5.WEBGL);
+      let s = myp5.createShader(vert, frag);
+      myp5.background('RED');
+      myp5.loadPixels();
+      let p1 = myp5.pixels.slice(); // copy before pixels is reassigned
+      myp5.filter(s);
+      myp5.loadPixels();
+      let p2 = myp5.pixels;
+      assert.notDeepEqual(p1, p2);
+    });
+
+    test('default shader makes changes to main canvas', function() {
+    });
+
+    test('create graphics is unaffected after filter', function() {
+    });
+
+    test('framebuffer is unaffected after filter', function() {
+    });
+
+    test('stroke and other settings are unaffected after filter', function() {
+    });
+
+    test('geometries added after filter do not have shader applied', function() {
+    });
+
+
+  });
+
   suite('text shader', function() {
     test('rendering looks the same in WebGL1 and 2', function(done) {
       myp5.loadFont('manual-test-examples/p5.Font/Inconsolata-Bold.ttf', function(font) {