p5.Graphics memory leak?

[davepagurek]

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.6.0

Web browser and version

Chrome 114, Safari 15.6

Operating System

MacOS 12.5.1

Steps to reproduce this

It seems like WebGL contexts don't get removed when you .remove() a p5.Graphics.

I have this test code, which creates and then removes a WebGL graphic 100 times:

function setup() {
  createCanvas(400, 400, WEBGL);
  for (let i = 0; i < 100; i++) {
    const g = createGraphics(width, height, WEBGL);
    g.remove();
  }
}

Live: https://editor.p5js.org/davepagurek/sketches/OSDIjBSgz

There should only ever be at most 2 contexts alive at a time, as I remove each before creating the next one, but instead, Chrome and Safari get this warning:

If you wanted to keep using the main canvas, this would cause an error, as it (being the oldest context) gets lost. Interestingly, it seems like Firefox 114 does not have this problem for me, so it seems browser-dependent. Regardless, it would be great if there were a way to avoid this in Chrome/Safari.

[davepagurek]

On Chrome, manually losing the context seems to work:

const prevRemove = p5.Graphics.prototype.remove;
p5.Graphics.prototype.remove = function() {
  const ext = this.drawingContext.getExtension('WEBGL_lose_context');
  if (ext) ext.loseContext();
  prevRemove.call(this);
}

However, this doesn't fix Safari:

[davepagurek]

This also happens without p5.Graphics, it seems to happen just with canvas elements too:

function setup() {
  createCanvas(400, 400);
  
  for (let i = 0; i < 100; i++) {
    const cnv = document.createElement('canvas');
    cnv.width = width;
    cnv.height = height;
    document.body.appendChild(cnv);
    const ctx = cnv.getContext('webgl');
    document.body.removeChild(cnv);
  }
}

https://editor.p5js.org/davepagurek/sketches/WdegB3Jab

For what it's worth, this StackOverflow suggests not deleting canvases but reusing them: https://stackoverflow.com/a/14992981 A valid answer to this might be that we just don't support creating/destroying so many WebGL graphics and our official recommendation is to reuse old ones.

[davepagurek]

I'm going to close this as not planned since I believe this is something that p5 is unable to solve. For what it's worth, as long as those older context are not being used, the warnings don't have any negative effects.