[p5.js 2.0 Bug Report]: WebGL textures corrupt after ~200 consecutive text() calls

[humanbydefinition]

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)

p5.js version

2.0.X

Web browser and version

Any browser

Operating system

Any OS

Steps to reproduce this

Steps:

1. In a loop, draw a lot of elements via text()onto a WebGL texture (p5.Framebuffer, WebGL canvas, p5.Graphics (WebGL)).
2. For all the fonts I've tested, it starts throwing WebGL errors at around 200 text() calls.
3. While the sketch doesn't crash, the resulting texture containing the results from the text() calls is corrupted, not containing all the drawn text() elements and also containing weird/unwanted artifacts.

Error message being thrown X amount of times:

macOS (Safari):

WebGL: INVALID_OPERATION: texImage2D: no texture

Windows (FireFox):

WebGL warning: texImage: No texture bound to TEXTURE_2D[0].

Snippets:

Small example showcasing the bug on v2.0.X using a p5.Framebuffer, resulting in a corrupted texture:
https://editor.p5js.org/humanbydefinition/sketches/acxGcGrd1

Small example showcasing that it works on v2.0.X using a 2D p5.Graphics object, indicating that it only affects WebGL stuff?:
https://editor.p5js.org/humanbydefinition/sketches/9lCKDG Zds
(If WEBGL is added to the createGraphics()-call, the given error/warning will also show up, and the texture breaks)

Small example showcasing that it previously worked flawlessly on v1.11.5 for example, also using a p5.Framebuffer:
https://editor.p5js.org/humanbydefinition/sketches/YiYKDRVMy

All of those sketches are very similar, fetching all the characters from the given font, and drawing them to a texture during set up in a grid once. This texture is then simply drawn to the p5.js canvas in the draw() loop.

The only bigger difference between those sketches is the character fetching logic, because p5.js switched from opentype.js to Typr.js from what I've learned for v2.0.X.

But since the character fetching logic works, also for the v2.0.X sketch using a 2D p5.Graphics object, I assume that there is no problem here.

What it should look like (taken from the v1.11.5 example):

What it currently looks like in v2.0.X:

---

Thanks in advance for an eventual solution to this! Looking very much forward to finally bringing my ASCII conversion library p5.asciify to p5.js v2.X.X once this is resolved. :) Cheers!

[davepagurek]

so this is definitely due to this #7724, the 200 number is actually a hard-coded number where we start evicting old textures from the cache! I think the problem is that I'm deleting the texture data from WebGL but the p5.Texture is still around. So I think I need to delete those too.

[davepagurek]

update: it was freeing the textures properly, but.... each glyph's texture data is not actually unique! I never dove too deep into how those are generated, but it turns out they have some shared components. So doing a LRU cache on the glyphs was not quite the right approach, and I should actually have done an LRU cache on those shared components. I'll work on an update for this