filter() crashes on createGraphics(WEBGL) buffers

[aashu2006]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

v2.2.1 and v2.2.2-rc.2 (reproduces in both)

Web browser and version

Google Chrome 145.0.7632.75 (Official Build, 64-bit)

Operating system

Linux Ubuntu 24.04 LTS

Steps to reproduce this

1. Create a WebGL canvas.
2. Create a secondary createGraphics() buffer in WEBGL mode.
3. Draw a shape on the graphics buffer.
4. Call filter() on the graphics buffer.

The sketch crashes with a TypeError

Snippet:

function setup() {
  createCanvas(100, 100, WEBGL);

  const g = createGraphics(100, 100, WEBGL);
  g.noStroke();
  g.fill('red');
  g.circle(0, 0, 40);

  g.filter(INVERT); // crashes
}

Console Error:

Uncaught (in promise) TypeError: e.getColor is not a function
    at _makeFilterShader (p5.min.js)
    at filter (p5.min.js)
    at Graphics.filter

Calling filter() on a createGraphics(WEBGL) renderer causes a runtime TypeError originating inside the WebGL filter shader pipeline.

[aashu2006]

Hii, @ksen0 I would be interested in working on this, if that’s okay.

[ksen0]

Thanks for finding this! As you observe, it was introduced in 2.2. I've assigned it to you. As you know there's a lot of active development around this, so when you have some idea(s) for the solution, please post an update here and tag @davepagurek for visibility

[davepagurek]

I suspect part of the problem is that a p5.Graphics doesn't automatically get functions defined on p5.prototype. We add shader hook objects to fn here to make them visible:

p5.js/src/strands/strands_api.js

Line 716 in 9c7a97f

fn[name] = hook;

...but that doesn't get added to p5.Graphics. One approach could be to manually add this to p5.Graphics there too, although arguably there's a wider problem of deciding whether p5.Graphics should automatically get fn extensions added to it with some exceptions (like draw loop things), or whether by default nothing is added except what we manually add. See also #8170 for some previous discussion on that if you have thoughts!