Uniforms are not set on the first frame when using filter(shader)

[aferriss]

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

Web browser and version

Chrome 117.0.5938.88

Operating System

Mac OSX 13.5.2

Steps to reproduce this

Uniforms are not being set before the shader is run when using shaders with the filter() function. I've attached an example here showing the issue.

Steps:

1. Create a shader
2. try to set a uniform on the first frame
3. observe uniform isn't set until 2nd frame and beyond.

Snippet:

https://editor.p5js.org/aferriss/sketches/KZVVxiTC9

[davepagurek]

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;

I think to fix this issue, we have some options:

1. Let the filter parameters be an object of key-value pairs, so filter can internally call setUniform(key, value) for each one after it has been properly bound
2. Instead of returning early in the code snippet above, store an object of keys/values of uniforms set before being compiled. At compilation, set the stored uniforms and clear the object.
3. Auto-bind createFilterShader shaders to the filter shader graphic and immediately compile it. (This also means ensuring the graphic exists once you call createFilterShader.)

Honestly we're not limited to doing just one or the other, but the fastest option for now might be (3). This would mean that you can't use filter shaders for non-filter tasks, but I think that's OK, we can always make another API for creating shaders with just fragment shaders.