processing/p5.js

Add a way to clean up image texture resources in WebGL

Open

#7,700 opened on Apr 4, 2025

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (20,784 stars) (3,178 forks)batch import
Area:WebGLFeature RequestHelp Wanted

Description

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.)

Contributor guide

Tech stack
javascript
Domain
performancedeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptp5.js basicsWebGL concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
Investigate the existing pattern for cleaning up GPU resources in p5.js, specifically the `p5.Framebuffer.remove()` method and `freeGeometry()` function. Examine the file `src/webgl/p5.RendererGL.js` around line 2168 where textures are created. Implement a similar function to delete image textures using WebGL's `deleteTexture` API, and consider adding a manual cleanup method analogous to `freeGeometry()`. Optionally, research an LRU cache for automatic cleanup, but focus on manual cleanup first.
Add a way to clean up image texture resources in WebGL · processing/p5.js#7700 | Good First Issue