release resources from bind groups when they are destroyed (#10414)

Co-authored-by: Zyie <24736175+Zyie@users.noreply.github.com>

src/rendering/renderers/gpu/shader/BindGroup.ts

@@ -147,9 +147,28 @@ export class BindGroup
         this.resources = null;
     }
 
-    protected onResourceChange()
+    protected onResourceChange(resource: BindResource)
     {
         this._dirty = true;
-        this._updateKey();
+
+        // check if a resource has been destroyed, if it has then we need to destroy this bind group
+        // using this bind group with a destroyed resource will cause the renderer to explode :)
+        if (resource.destroyed)
+        {
+            // free up the resource
+            const resources = this.resources;
+
+            for (const i in resources)
+            {
+                if (resources[i] === resource)
+                {
+                    resources[i] = null;
+                }
+            }
+        }
+        else
+        {
+            this._updateKey();
+        }
     }
 }

src/rendering/renderers/gpu/shader/BindResource.ts

@@ -20,6 +20,14 @@ export interface BindResource
 
     _touched: number;
 
+    /**
+     * a boolean that indicates if the resource has been destroyed.
+     * If true, the resource should not be used and any bind groups
+     * that will release any references to this resource.
+     * @ignore
+     */
+    destroyed: boolean;
+
     /**
      * event dispatch whenever the underlying resource needs to change
      * this could be a texture or buffer that has been resized.

src/rendering/renderers/shared/buffer/Buffer.ts

@@ -154,6 +154,12 @@ export class Buffer extends EventEmitter<{
      */
     public shrinkToFit = true;
 
+    /**
+     * Has the buffer been destroyed?
+     * @readonly
+     */
+    public destroyed = false;
+
     /**
      * Creates a new Buffer with the given options
      * @param options - the options for the buffer
@@ -280,7 +286,10 @@ export class Buffer extends EventEmitter<{
     /** Destroys the buffer */
     public destroy()
     {
+        this.destroyed = true;
+
         this.emit('destroy', this);
+        this.emit('change', this);
 
         this._data = null;
         (this.descriptor as null) = null;

src/rendering/renderers/shared/buffer/BufferResource.ts

@@ -75,6 +75,12 @@ export class BufferResource extends EventEmitter<{
      */
     public readonly _bufferResource = true;
 
+    /**
+     * Has the Buffer resource been destroyed?
+     * @readonly
+     */
+    public destroyed = false;
+
     /**
      * Create a new Buffer Resource.
      * @param options - The options for the buffer resource
@@ -109,11 +115,15 @@ export class BufferResource extends EventEmitter<{
      */
     public destroy(destroyBuffer = false): void
     {
+        this.destroyed = true;
+
         if (destroyBuffer)
         {
             this.buffer.destroy();
         }
 
+        this.emit('change', this);
+
         this.buffer = null;
     }
 }

src/rendering/renderers/shared/shader/UniformGroup.ts

@@ -129,6 +129,9 @@ export class UniformGroup<UNIFORMS extends { [key: string]: UniformData } = any>
      */
     public readonly _signature: number;
 
+    // implementing the interface - UniformGroup are not destroyed
+    public readonly destroyed = false;
+
     /**
      * Create a new Uniform group
      * @param uniformStructures - The structures of the uniform group

src/rendering/renderers/shared/texture/TextureStyle.ts

@@ -121,6 +121,12 @@ export class TextureStyle extends EventEmitter<{
      */
     public _maxAnisotropy?: number = 1;
 
+    /**
+     * Has the style been destroyed?
+     * @readonly
+     */
+    public destroyed = false;
+
     /**
      * @param options - options for the style
      */
@@ -232,7 +238,10 @@ export class TextureStyle extends EventEmitter<{
     /** Destroys the style */
     public destroy()
     {
+        this.destroyed = true;
+
         this.emit('destroy', this);
+        this.emit('change', this);
 
         this.removeAllListeners();
     }

src/rendering/renderers/shared/texture/sources/TextureSource.ts

@@ -390,6 +390,7 @@ export class TextureSource<T extends Record<string, any> = any> extends EventEmi
     {
         this.destroyed = true;
         this.emit('destroy', this);
+        this.emit('change', this);
 
         if (this._style)
         {

tests/renderering/BindGroup.test.ts

@@ -3,6 +3,7 @@ import { Buffer } from '../../src/rendering/renderers/shared/buffer/Buffer';
 import { BufferResource } from '../../src/rendering/renderers/shared/buffer/BufferResource';
 import { BufferUsage } from '../../src/rendering/renderers/shared/buffer/const';
 import { UniformGroup } from '../../src/rendering/renderers/shared/shader/UniformGroup';
+import { RenderTexture } from '../../src/rendering/renderers/shared/texture/RenderTexture';
 import { TextureSource } from '../../src/rendering/renderers/shared/texture/sources/TextureSource';
 import { TextureStyle } from '../../src/rendering/renderers/shared/texture/TextureStyle';
 import { resetUids } from '../../src/utils/data/uid';
@@ -141,4 +142,43 @@ describe('BindGroup', () =>
 
         expect(bindGroup3._key).toBe('2');
     });
+
+    it('should release destroyed resources', () =>
+    {
+        const buffer = new Buffer({
+            data: new Float32Array(100),
+            usage: BufferUsage.UNIFORM | BufferUsage.COPY_DST,
+        });
+
+        const texture = RenderTexture.create({
+            width: 10,
+            height: 10,
+        });
+
+        const style = new TextureStyle();
+
+        const bufferResource = new BufferResource({
+            buffer,
+            offset: 100,
+            size: 200
+        });
+
+        const bindGroup = new BindGroup({
+            0: bufferResource,
+            1: texture.source,
+            2: style,
+        });
+
+        bufferResource.destroy();
+
+        expect(bindGroup.resources[0]).toBeNull();
+
+        texture.source.destroy();
+
+        expect(bindGroup.resources[1]).toBeNull();
+
+        style.destroy();
+
+        expect(bindGroup.resources[2]).toBeNull();
+    });
 });