[p5.js 2.0 Bug Report]: [WEBGPU] Filter shaders not working in CDN builds #8344

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2-rc2

Web browser and version

Chrome 143

Operating system

MacOS 15.2

Steps to reproduce this

Steps:

1. Create a WebGPU canvas
2. Draw something
3. Try to apply a filter shader, e.g. `filter(BLUR)

The issue is that it's failing to go through any of the conditions in this if when the node is a reference to the current canvas texture:

The problem is that while the node is a StrandsNode, it's not the same StrandsNode! When you build p5.webgpu.js, it's currently including the p5.strands module, even though it is also included in the base p5.js build. So a StrandsNode created from p5.js will not pass the node instanceof StrandsNode check in p5.webgpu.js.

The fix is maybe to not use instanceof StrandsNode, and instead use duck typing to determine if something is a strands node by giving them a property like isStrandsNode: true. So then if we see an object where object.isStrandsNode is true, we can just assume it's a StrandsNode, regardless of what script it came from.

Snippet:

Live: https://editor.p5js.org/davepagurek/sketches/2qBUizfo_

async function setup() {
  await createCanvas(400, 400, WEBGPU)
  // This works
  // createCanvas(400, 400, WEBGL)
}

function draw() {
  background(255)
  fill('red')
  noStroke()
  circle(0, 0, 100)
  filter(BLUR, 10)
}