P5js - inconsistent shader behaviour leading to program crashes

p5.js Coding Questions
1

Version 3 of canvasGUI (released April 2026) uses a shader to display the GUI over a webgl2 context within a p5.js sketch. This was successful and an example was created to demonstrate it. This example can be found here and can be seen below.

Recently I have tried creating 3D sketches using p5.js and canvasGUI but the sketches failed. At first I suspected canvasGUI but I believe the issue is with p5.js because

  1. Some sketches like the example below work and some don’t
  2. This sketch in the p5.js web editor will display either the gui or the animation but attempting to display both crashes the sketch (you can try this yourself :smile:)
  3. canvasGUI works as expected in a pure JavaScript program using a webgl2 canvas. For instance this link takes you to a sketch (same as in [2] but without p5.js) and it works as expected.

Unfortunately the web editor console did not display any editor messages so I ran skecth [3] using VSC amd a local host server and got the results using 3 different browsers.

Firefox browser (v156.0)

WebGL warning: uniform setter: UniformLocation is not from the current active Program. 32
After reporting 32, no further warnings will be reported for this WebGL context.

Duckduckgo browser (v1.206.0)

[Error] WebGL: INVALID_OPERATION: uniform1i: location not for current program
	uniform1i
	_updateTexture (p5.js:125775)
	bindTextures (p5.js:61984)
	_drawFills (p5.js:54777)
	_drawGeometry (p5.js:54756)
	model (p5.js:54724)
	(anonymous function) (p5.js:114039)
	(anonymous function) (p5.js:92654)
	draw (test 01.js:30)
	(anonymous function) (p5.js:3571)
[Warning] WebGL: too many errors, no more errors will be reported to the console for this context.

Safari browser (v20.6.1)

[Error] WebGL: INVALID_OPERATION: uniformMatrix4fv: location not for current program
	uniformMatrix4fv
	setWebGLUniformValue (p5.js:68758)
	setUniform (p5.js:62280)
	_setGlobalUniforms (p5.js:55610)
	_drawFills (p5.js:54775)
	_drawGeometry (p5.js:54756)
	drawShape (p5.js:54688)
	endShape (p5.js:27289)
	endShape (p5.js:54698)
	(anonymous function) (p5.js:33073)
	(anonymous function) (p5.js:92654)
	showAnimation (_2_sketch.js:79)
	draw (_2_sketch.js:64)
	(anonymous function) (p5.js:3571)

Before I raise this as an issue on github I would be interested in hearing from anyone who has experienced similar problems or are aware of any issues that might shed light on this issue.

Now I know very little about creating shaders, the one used in canvasGUI was kindly created by @scudly butd my experiments indicate there is no problem with the actual shader rather it is an issue of p5.js executing the shader program.

The example created using canvasGUI v3.2.0 and p5.js v3.2.2

2

p5, for optimization purposes, does not always re-apply the same gl program if it thinks it shouldn’t have changed, so if canvasGUI is changing the active shader program and does not change it back to what p5 left it at, it could break p5’s assumptions.

p5 caches this info here, in a shader’s _bound: p5.js/src/webgl/p5.Shader.js at 8ce25945fac3c3d49a8ec1cc255b2cb0cb94ca89 · processing/p5.js · GitHub

So one thing you could do, before switching shaders, is make sure the current active shader is unbound first so that it knows to re-bind if it needs to use it, doing something like p5Instance._renderer._curShader.unbindShader().