Add a way to clean up image texture resources in WebGL

Increasing access

This can help support larger p5 projects, in terms of resolution (e.g. for a 4K TV in a gallery) or just size of content, where currently you'll run into memory limitations that force projects to be smaller.

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 request details

When you drawn an image or any other texture to the canvas in WebGL, we create a new texture on the GPU. For most things, there is no way to clear this out to make room for more. The exception is p5.Framebuffer, where you can call .remove() on it, and it cleans up all its GPU resources, and p5.Geometry, which you can pass into freeGeometry() to clear its GPU resources.

Ideally I'd like something similar to clear image GPU resources (which just means it might be a bit slower the next time you try to draw it), and possibly also an LRU cache that automatically can clear out least recently used GPU resources. (The latter is a little hard because it doesnt seem like there's a reliable way to get GPU memory limits? so manual management is probably fine, since this only comes up when a project has already become fairly advanced.)

Start in src/webgl/p5.RendererGL.js at lines 2168-2182, where image and texture GPU resources are created. Compare the cleanup behavior described for p5.Framebuffer.remove() and p5.Geometry/freeGeometry(). Done means image texture resources can be explicitly cleared and used again when needed, with behavior comparable to those existing cleanup APIs.