Fix background(img) handling in WEBGL mode in RendererGL

[Helenbeyorn]

This PR adds support for using background(p5.Image) in WEBGL mode, addressing issue #7917.
What was done:

Modified p5.RendererGL.js to check if the argument is an instance of p5.Image and render it using image().

Confirmed that image background renders properly in WEBGL when served via a local server (python3 -m http.server 5500).

Notes:

The image does not show up when using VS Code Live Server, but this seems to be an environment-specific issue.

Feedback is welcome if there are better integration points for this in the renderer.

[welcome]

🎉 Thanks for opening this pull request! For guidance on contributing, check out our contributor guidelines and other resources for contributors!
🤔 Please ensure that your PR links to an issue, which has been approved for work by a maintainer; otherwise, there might already be someone working on it, or still ongoing discussion about implementation. You are welcome to join the discussion in an Issue if you're not sure!
🌸 Once your PR is merged, be sure to add yourself to the list of contributors on the readme page !

Thank You!

[davepagurek]

Thanks for taking this on! To make sure this continues to work, do you think we could add a unit test or a visual test? Here's an example of a visual test that loads and uses an image, maybe we can add a similar one to that file to ensure background(img) works?

p5.js/test/unit/visual/cases/webgl.js

Lines 160 to 175 in 746a481

	visualTest(
	'Object with different texture coordinates per use of vertex keeps the coordinates intact',
	async function(p5, screenshot) {
	p5.createCanvas(50, 50, p5.WEBGL);
	const tex = await p5.loadImage('/unit/assets/cat.jpg');
	const cube = await new Promise(resolve => p5.loadModel('/unit/assets/cube-textures.obj', resolve));
	cube.normalize();
	p5.background(255);
	p5.texture(tex);
	p5.rotateX(p5.PI / 4);
	p5.rotateY(p5.PI / 4);
	p5.scale(80/400);
	p5.model(cube);
	screenshot();
	}
	);

To test those, you can run npm run test (or npm run test/unit/visual to just run visual tests.) It will create a screenshot in test/unit/visual/screenshots that you can examine to see if it looks correct, and if it isn't, you can delete the screenshot and JSON file it makes, edit the code, and then rerun the tests to generate a new one.

[davepagurek]

It looks like we have a duplicate implementation here that overrides the method inside the class above, are we able to merge this with the implementation above? It looks like this is the code currently being executed, so we could replace the implementation above with the body of this function and then remove it.

[davepagurek]

There are some other image-like things that we probably want to work here, e.g. p5.Graphics or p5.MediaElement (for a webcam capture) or p5.Texture or p5.Framebuffer. (Maybe at that point it makes sense to flip the logic to be, if the argument is NOT a string or color or number?)

[davepagurek]

Since this is already a renderer, does this._renderer here work, or does it need to just be this._setDefaultCamera?