Bug: [v8] BpuBufferSystem.onBufferDestroy contains null gpuBuffer when destroying via react hook about pixijs

[TomSlezakowski]

Hello! I just ran into the same issue! I tried the above patch but the issue persists. It only seems to happen for me when using hot-reload. (next.js + latest pixi)

From a little digging, it seems like the order of execution means duplicate uid's are passed in to the _destroyBuffer function. Changing _destroyBuffer to if (gpuBuffer) gpuBuffer.destroy(); was enough to get things working again for me.

Here's a log of destroy() with the respective buffer & uid.

GPUBuffer {size: 192, usage: 40, mapState: 'unmapped', label: 'attribute-batch-buffer'} - UID: 8
GPUBuffer {size: 24, usage: 24, mapState: 'unmapped', label: 'index-batch-buffer'} - UID: 9
GPUBuffer {size: 262140, usage: 76, mapState: 'unmapped', label: ''} - UID: 6
GPUBuffer {size: 262140, usage: 72, mapState: 'unmapped', label: ''} - UID: 7
null - UID: 9
null - UID: 8

Hope that helps, and congrats on V8! 🚀

[GoodBoyDigital]

this ones a little tricky to reproduce! is there a minimal example you could share pls?
in the mean time i did tweak how things are destroyed - but not 100% sure it will fix it as have been unable to repro.
thanks @levi

[levi]

@GoodBoyDigital I'll try your patch. Getting a sample repo together might take sometime on my end. Happy to screen share my project on discord if that is a helpful alternative path.

[GoodBoyDigital]

Yes! this is super useful. hope you are well mate!

[Durss]

I also get this issue.
I have a very minimalist Vue3 app that doesn't much but instanciate a World.ts class that then does everything with PIXI.
When my view is unmounted i destroy things this way (maybe not appropriate):

app.stage.removeAllListeners();
app.renderer.removeAllListeners();
app.destroy({removeView:true}, {children:true});

I also tried this much simpler way that fails the exact same way:

app.destroy();

As long as I don't add more children than the ones added during first render, I can hot reload with no issue.
But as soon as a new child is added anywhere, the destroy() call breaks with the following stack:

chunk-6KKKYF7S.js?v=7732f24d:410 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'destroy')
    at GpuBufferSystem._destroyBuffer (chunk-6KKKYF7S.js?v=7732f24d:410:15)
    at chunk-6KKKYF7S.js?v=7732f24d:404:51
    at Array.forEach (<anonymous>)
    at GpuBufferSystem.destroy (chunk-6KKKYF7S.js?v=7732f24d:404:26)
    at SystemRunner.emit (chunk-S3Q6LN3I.js?v=7732f24d:172:21)
    at WebGPURenderer.destroy (chunk-S3Q6LN3I.js?v=7732f24d:461:26)
    at _Application2.destroy (pixi__js.js?v=086abf1e:6472:19)

The "_destroyBuffer" method is the following on GpuBufferSystem class;

  _destroyBuffer(buffer) {
    const gpuBuffer = this._gpuBuffers[buffer.uid];
    gpuBuffer.destroy(); //<== it fails here
    buffer.off("update", this.updateBuffer, this);
    buffer.off("change", this.onBufferChange, this);
    buffer.off("destroy", this.onBufferDestroy, this);
    this._gpuBuffers[buffer.uid] = null;
  }

tested with Pixi.js 8.0.5

[Durss]

Seems fixed with 8.1.0 !

Thank you :)