[p5.strands] Add full support for using filter shaders on 2d sketches.

[nbogie]

Increasing access

1. Many people who only know 2d sketches (not 3d) should be able to write and consume filter shaders with strands (or glsl) for those 2d sketches.

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)

Feature enhancement details

Add as much of the functionality as possible.

TODO: Add a list of the functionality here which we find is not available when we try to buildFilterShader when the main context is 2d not 3d.

Missing functionality (placeholder):

• filterColor is not defined: example
• noise() - this._renderer.getNoiseShaderSnippet is not a function: example

[LalitNarayanYadav]

Hi @nbogie, I’d like to start working on this issue.

I’ll begin by reproducing the current limitations of buildFilterShader in 2D sketches and documenting the missing functionality (such as filterColor, noise() issues, etc.).

I plan to open a draft PR with my findings and possible approaches so we can iterate on a proper solution.

Please let me know if there’s any specific direction you’d like me to follow.

[nbogie]

Hi! (This will be up to the maintainers, not me :) )
In the meantime, here is a tiny bit more context from a short discord conversation.

[davepagurek]

Hi @LalitNarayanYadav! to shed some light on this and the causes:

• filterColor is not defined because the base filter shader for the 2D renderer looks like this:

  p5.js/src/image/filterRenderer2D.js

  Lines 296 to 303 in 5f8a19a

  	{
  	vertex: {},
  	fragment: {
  	'vec4 getColor': `(FilterInputs inputs, in sampler2D canvasContent) {
  	return getTexture(canvasContent, inputs.texCoord);
  	}`
  	}
  	}

  when the base filter shader for the WebGL renderer looks like this (note the alias):

  p5.js/src/webgl/p5.RendererGL.js

  Lines 858 to 867 in 5f8a19a

  	{
  	vertex: {},
  	fragment: {
  	"vec4 getColor": `(FilterInputs inputs, in sampler2D canvasContent) {
  	return getTexture(canvasContent, inputs.texCoord);
  	}`,
  	},
  	hookAliases: {
  	'getColor': ['filterColor'],
  	},

• noise isn't working because renderers need to implement getNoiseShaderSnippet, which the WebGL renderer does but the filter renderer does not yet:

  p5.js/src/webgl/p5.RendererGL.js

  Lines 1908 to 1910 in 5f8a19a

  	getNoiseShaderSnippet() {
  	return noiseGLSL;
  	}

I think the noise snippet is currently the only snippet renderers need to define on their own like that, due to the complexity of noise compared to more elemental shader language constructs, which live in the glsl or wgsl strands backends, which the filter renderer already shares. Arguably we should move the noise snippet from the renderer to the strands backend (which would mean changing both RendererGL and RendererWebGPU), which would then make the filter renderer work.

If you're interested in fixing those issues along with any other inconsistencies you find (but I think those could be it for now, as we don't use aliases elsewhere either just yet) then I'm happy to assign this to you!

[LalitNarayanYadav]

Hi @davepagurek, I’ve opened a PR addressing the filterColor alias issue for 2D filter shaders.

From the current codebase, it looks like noise() support is already available via the shared backend, so this PR focuses on resolving the remaining filterColor gap.

Happy to iterate further or take on additional improvements if needed!

[davepagurek]

I think noise is not part of the backend, it calls a method on the renderer directly:

p5.js/src/strands/strands_api.js

Line 340 in 0f966a1

const noiseSnippet = this._renderer.getNoiseShaderSnippet();

...but you're right, it is already on the 2D filter runner:

p5.js/src/image/filterRenderer2D.js

Lines 309 to 311 in 0f966a1

	getNoiseShaderSnippet() {
	return noiseGLSL;
	}

Do you think that should be moved to the strands backend for consistency? I think it's the only snippet we put on the renderer instead of the strands backend currently.

[LalitNarayanYadav]

Thanks for the clarification!

That makes sense, since noise() is currently resolved via this._renderer.getNoiseShaderSnippet(), it’s effectively renderer-specific rather than part of the strands backend.

I think moving it to the strands backend could improve consistency, especially since other shader utilities are already shared there. It would also reduce duplication across renderers.

That said, keeping it on the renderer side does give flexibility if different renderers need different implementations.

I’d be happy to explore moving it to the backend if that’s the preferred direction.

[davepagurek]

I think that'll make it easier to keep the different renderers up-to-date. If you've got the time, that'd be great to do that refactor!

[LalitNarayanYadav]

Sounds good, I’ll work on moving getNoiseShaderSnippet to the strands backend and update the renderers accordingly.

I’ll open a draft PR once I have an initial version ready.