Animation tutorial leaks GPU Process memory

[shamrin]

Animation example leaks GPU Process memory, according to Chrome Task Manager.

How to replicate:

1. Open tutorial: https://wwwtyro.github.io/candygraph/tutorial/dist/
2. Scroll to animation example.
3. Open Chrome Task Manager.
4. Click on plot to start the animation.
5. Watch GPU Process memory grow forever in Task Manager.
6. Close tutorial tab.
7. Watch GPU Process memory get released.

I would have tried to debug the problem myself, but I'm not that familiar with WebGL. I have no idea how to even approach this problem.

CandyGraph is an awesome library, and it works very well. Unfortunately, in my real time animation code, GPU Process memory is leaking very fast. In a few minutes, the web app slows to a halt after about 4Gb of memory allocated. I'm animating at about 30 FPS.

[shamrin]

Probably related:

• Feature/clear cache on dispose #36
• Potential memory leak #34

[shamrin]

@wwwtyro, I've noticed that regl.stats.bufferCount is constantly increasing during animation. I wonder if it's related to the GPU Process memory leak:

I've logged it here:

diff --git a/docs/tutorial/src/doc-00400.ts b/docs/tutorial/src/doc-00400.ts
index 32bb4d3..fbc39be 100644
--- a/docs/tutorial/src/doc-00400.ts
+++ b/docs/tutorial/src/doc-00400.ts
@@ -138,6 +138,7 @@ export default async function doc_00400(cg: CandyGraph) {
       return;
     }
     render();
+    console.log("regl.stats.bufferCount", cg.regl.stats.bufferCount);
   }
 
   document.getElementById("doc_00400")?.addEventListener("click", function () {

[wwwtyro]

Thanks, I was able to repro this. I suspect it's related to relying on GC for the buffer objects. Since WebGL objects tend to add so little GC pressure, it's possible to overrun GPU resources without triggering collection. I'll take a look this week and see what we can do to address this.

[wwwtyro]

@shamrin I should add, if you're hitting these leaks in your own code, I think you should be able to avoid them with careful use, reuse, and disposal of Dataset objects: https://wwwtyro.github.io/candygraph/tutorial/dist/#:~:text=to%20toggle%20animation%3A-,Data%20Reuse,-So%20far%20we%E2%80%99ve

[shamrin]

@wwwtyro My own rendering code is very similar to animation example in the tutorial. I just have extra text and one extra plot on a separate canvas.

I’ve tried to modify animation example to make regl.stats.bufferCount stop increasing, with the help of createDataset. I’ve slowed down the increase rate, but couldn’t get it to zero. I wonder if bufferCount is the right metric to check with regards to GPU Process memory leaks…

I’ll share my attempt later.

[shamrin]

@wwwtyro I've pushed the animation tutorial tweak: https://github.com/wwwtyro/candygraph/pull/39/files?diff=split&w=1. It's still leaking GPU Process memory, but slower.

[shamrin]

@wwwtyro I think I've got rid of the GPU memory leak in the animation example. I've removed createDataset and added .dispose() for the Axis and LineStrip. See PR #39.