fix: memory leaks in renderer systems (#11581)

* fix: memory leaks

Ensures proper cleanup and avoids memory leaks

* fix test

* Fixes resource leaks and improves cleanup

Addresses memory leaks by implementing proper resource cleanup.

This includes:

- Adding destroy methods to relevant classes and systems
- Registering pools and caches with a collector for centralized management.
- Ensuring resources are released when objects are destroyed or when the renderer is destroyed.
- Prevents errors by checking for null values before destroying resources.

These changes improve application stability and prevent potential performance issues related to excessive memory usage.

* fix batch return

* tidy pipes

* rename to GlobalResourceRegistry

* change option name

* fix index

* pr feedback

* PR feedback

Author: Zyie

src/environment/ImageLike.ts

@@ -26,6 +26,9 @@ export interface ImageLike extends EventTarget
     /** Returns a Promise that resolves once the image is decoded. */
     decode(): Promise<void>;
 
+    /** Removes the image from the DOM and cleans up resources. */
+    remove(): void;
+
     onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onerror: ((this: GlobalEventHandlers, ev: Event) => any) | null;
 }

src/events/EventSystem.ts

@@ -499,6 +499,7 @@ export class EventSystem implements System<EventSystemOptions>
     /** Destroys all event listeners and detaches the renderer. */
     public destroy(): void
     {
+        EventsTicker.destroy();
         this.setTargetElement(null);
         this.renderer = null;
         this._currentCursor = null;

src/events/EventTicker.ts

@@ -131,6 +131,18 @@ class EventsTickerClass
 
         this._update();
     }
+
+    /** Destroys the event ticker. */
+    public destroy(): void
+    {
+        this.removeTickerListener();
+        this.events = null;
+        this.domElement = null;
+        this._deltaTime = 0;
+        this._didMove = false;
+        this._tickerAdded = false;
+        this._pauseUpdate = true;
+    }
 }
 
 /**

src/rendering/batcher/shared/Batcher.ts

@@ -1,6 +1,7 @@
 import { uid } from '../../../utils/data/uid';
 import { ViewableBuffer } from '../../../utils/data/ViewableBuffer';
 import { deprecation } from '../../../utils/logging/deprecation';
+import { GlobalResourceRegistry } from '../../../utils/pool/GlobalResourceRegistry';
 import { fastCopy } from '../../renderers/shared/buffer/utils/fastCopy';
 import { type BLEND_MODES } from '../../renderers/shared/state/const';
 import { getAdjustedBlendModeBlend } from '../../renderers/shared/state/getAdjustedBlendModeBlend';
@@ -75,6 +76,22 @@ export class Batch implements Instruction
 const batchPool: Batch[] = [];
 let batchPoolIndex = 0;
 
+GlobalResourceRegistry.register({
+    clear: () =>
+    {
+        // check if the first element has a destroy method
+        if (batchPool.length > 0)
+        {
+            for (const item of batchPool)
+            {
+                if (item) item.destroy();
+            }
+        }
+        batchPool.length = 0; // clear the array
+        batchPoolIndex = 0;
+    },
+});
+
 function getBatchFromPool()
 {
     return batchPoolIndex > 0 ? batchPool[--batchPoolIndex] : new Batch();
@@ -759,6 +776,8 @@ export abstract class Batcher
 
     public destroy()
     {
+        if (this.batches === null) return;
+
         for (let i = 0; i < this.batches.length; i++)
         {
             returnBatchToPool(this.batches[i]);
@@ -768,7 +787,7 @@ export abstract class Batcher
 
         for (let i = 0; i < this._elements.length; i++)
         {
-            this._elements[i]._batch = null;
+            if (this._elements[i]) this._elements[i]._batch = null;
         }
 
         this._elements = null;

src/rendering/mask/color/ColorMaskPipe.ts

@@ -103,6 +103,7 @@ export class ColorMaskPipe implements InstructionPipe<ColorMaskInstruction>
 
     public destroy()
     {
+        (this._renderer as null) = null;
         this._colorStack = null;
     }
 }

src/rendering/renderers/__tests__/UniformBatch.test.ts

@@ -1,5 +1,6 @@
 import { GpuUniformBatchPipe } from '../gpu/GpuUniformBatchPipe';
 import { SchedulerSystem } from '../shared/SchedulerSystem';
+import { SystemRunner } from '../shared/system/SystemRunner';
 import { RenderableGCSystem } from '../shared/texture/RenderableGCSystem';
 
 import type { WebGPURenderer } from '../gpu/WebGPURenderer';
@@ -13,6 +14,9 @@ describe('UniformBatch', () =>
         const uniformBatchPipe = new GpuUniformBatchPipe({
             scheduler,
             renderableGC: new RenderableGCSystem({} as WebGPURenderer),
+            runners: {
+                destroy: new SystemRunner('destroy'),
+            },
         } as WebGPURenderer);
 
         const bufferResource = uniformBatchPipe.getArrayBufferResource(new Float32Array(32));

src/rendering/renderers/gl/geometry/GlGeometrySystem.ts

@@ -487,5 +487,6 @@ export class GlGeometrySystem implements System
         this.gl = null;
         this._activeVao = null;
         this._activeGeometry = null;
+        this._geometryVaoHash = null;
     }
 }

src/rendering/renderers/gl/shader/GlProgram.ts

@@ -130,6 +130,11 @@ export class GlProgram
      * @internal
      */
     public readonly _key: number;
+    /**
+     * A cache key used to identify the program instance.
+     * @internal
+     */
+    public _cacheKey: string;
 
     /**
      * Creates a shiny new GlProgram. Used by WebGL renderer.
@@ -188,6 +193,8 @@ export class GlProgram
         this._uniformBlockData = null;
 
         this.transformFeedbackVaryings = null;
+
+        programCache[this._cacheKey] = null;
     }
 
     /**
@@ -204,6 +211,7 @@ export class GlProgram
         if (!programCache[key])
         {
             programCache[key] = new GlProgram(options);
+            programCache[key]._cacheKey = key;
         }
 
         return programCache[key];

src/rendering/renderers/gl/shader/GlShaderSystem.ts

@@ -197,6 +197,10 @@ export class GlShaderSystem
         }
 
         this._programDataHash = null;
+        this._shaderSyncFunctions = null;
+        this._activeProgram = null;
+        (this._renderer as null) = null;
+        this._gl = null;
     }
 
     /**

src/rendering/renderers/gl/texture/GlTextureSystem.ts

@@ -438,7 +438,14 @@ export class GlTextureSystem implements System, CanvasGenerator
             .forEach((source) => this.onSourceDestroy(source));
 
         (this.managedTextures as null) = null;
-
+        this._glTextures = null;
+        this._glSamplers = null;
+        this._boundTextures = null;
+        this._boundSamplers = null;
+        this._mapFormatToInternalFormat = null;
+        this._mapFormatToType = null;
+        this._mapFormatToFormat = null;
+        (this._uploads as null) = null;
         (this._renderer as null) = null;
     }