filter() shader uniforms stop working if you use more than one

[davepagurek]

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

main branch

Web browser and version

Firefox, Chrome

Operating System

macOS 14

Steps to reproduce this

Steps:

1. Create two filter shaders that need uniforms
2. Apply uniforms and apply both shaders one after the other via filter()
   The uniforms don't get passed in or updated.

Snippet:

let shaderA
let shaderB

function setup() {
  createCanvas(400, 400, WEBGL);
  shaderA = createFilterShader(`
    precision highp float;
    uniform sampler2D tex0;
    uniform float off;
    varying vec2 vTexCoord;
    void main() {
      gl_FragColor = texture2D(tex0, vTexCoord + vec2(-off, 0.));
    }
  `)
  shaderB = createFilterShader(`
    precision highp float;
    uniform sampler2D tex0;
    uniform float off;
    varying vec2 vTexCoord;
    void main() {
      gl_FragColor = texture2D(tex0, vTexCoord + vec2(0, -off));
    }
  `)
}

function draw() {
  background(220)
  rectMode(CENTER)
  rect(0, 0, 20, 20)
  
  // Uncommenting one at a time works, but having both uncommented
  // makes neither shader's uniforms work
  
  shaderA.setUniform('off', map(mouseX, 0, width, -1, 1, true))
  filter(shaderA)
  
  shaderB.setUniform('off', map(mouseY, 0, height, -1, 1, true))
  filter(shaderB)
}

Live: https://editor.p5js.org/davepagurek/sketches/IQyixHYPt

Causes

It seems to be because of this section of code:

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

Lines 1050 to 1059 in 3d62084

	let isSameUserShader = (
	this.filterShader !== undefined &&
	userShader._vertSrc === this.filterShader._vertSrc &&
	userShader._fragSrc === this.filterShader._fragSrc
	);
	if (!isSameUserShader) {
	this.filterShader =
	new p5.Shader(pg._renderer, userShader._vertSrc, userShader._fragSrc);
	this.filterShader.parentShader = userShader;
	}

If you switch filter shaders from one to another, it creates a new shader object. This means that the shader actually being run is not the one you are setting the uniforms on.

[aferriss]

Wonder if this is related to #6430 where the uniforms seem to get set at the wrong time.

[davepagurek]

For that one, I assume it's because createShader doesn't immediately compile the shader, and instead defers it until it is first used, since we don't know which context (main canvas, graphic, etc) it will be called on. I think we just return early if we haven't compiled the shader here:

p5.js/src/webgl/p5.Shader.js

Lines 384 to 387 in 1c2273d

	setUniform(uniformName, data) {
	const uniform = this.uniforms[uniformName];
	if (!uniform) {
	return;

Once we can get it to go past that, we'll probably run into this issue too though!

[davepagurek]

If we solve #6430 by auto-binding createFilterShader to the filter graphic, then I think we can actually take out these code blocks, which exist to handle the fact that one might pass in a user shader that has been bound to the main canvas:

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

Lines 1050 to 1059 in 3d62084

	let isSameUserShader = (
	this.filterShader !== undefined &&
	userShader._vertSrc === this.filterShader._vertSrc &&
	userShader._fragSrc === this.filterShader._fragSrc
	);
	if (!isSameUserShader) {
	this.filterShader =
	new p5.Shader(pg._renderer, userShader._vertSrc, userShader._fragSrc);
	this.filterShader.parentShader = userShader;
	}

p5.js/src/webgl/p5.Shader.js

Lines 396 to 400 in c5f5abb

	let other = this._renderer.filterShader;
	if (other !== undefined && other.parentShader === this) {
	other.setUniform(uniformName, data);
	return;
	}

Then, we aren't dynamically regenerating new shaders every frame, and this issue would go away.