From 96e11a1f3e43af953c2c8ef91a613e47141dc88e Mon Sep 17 00:00:00 2001 From: Unfamiliar <74633542+UnfamiliarLegacy@users.noreply.github.com> Date: Fri, 13 Sep 2024 03:40:05 +0200 Subject: [PATCH] Fix firework memory leak and update pixi.js (#125) * Fix firework memory leak by reusing a single particle sprite * Remove console.log from debugging --- package.json | 4 +- .../furniture/FurnitureParticleSystem.ts | 61 +++++++++++++------ yarn.lock | 16 ++--- 3 files changed, 51 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 499b0ba8..c2efd8ee 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,8 @@ "dependencies": { "howler": "^2.2.4", "pako": "^2.1.0", - "pixi-filters": "^6.0.4", - "pixi.js": "^8.3.1" + "pixi-filters": "^6.0.5", + "pixi.js": "^8.4.0" }, "devDependencies": { "@eslint/js": "^9.8.0", diff --git a/packages/room/src/object/visualization/furniture/FurnitureParticleSystem.ts b/packages/room/src/object/visualization/furniture/FurnitureParticleSystem.ts index 15d0d69a..66c62ee7 100644 --- a/packages/room/src/object/visualization/furniture/FurnitureParticleSystem.ts +++ b/packages/room/src/object/visualization/furniture/FurnitureParticleSystem.ts @@ -26,6 +26,7 @@ export class FurnitureParticleSystem private _blend: number = 1; private _bgColor: number = 0xFF000000; private _emptySprite: Sprite; + private _particleSprite: Sprite; private _isDone: boolean = false; constructor(visualization: FurnitureAnimatedVisualization) @@ -37,6 +38,7 @@ export class FurnitureParticleSystem this._particleColorTransform = new AlphaFilter(); this._identityMatrix = new Matrix(); this._translationMatrix = new Matrix(); + this._particleSprite = new Sprite(); } public dispose(): void @@ -63,6 +65,12 @@ export class FurnitureParticleSystem this._emptySprite = null; } + if (this._particleSprite) + { + this._particleSprite.destroy(); + this._particleSprite = null; + } + this._blackOverlayAlphaTransform = null; this._particleColorTransform = null; this._identityMatrix = null; @@ -101,7 +109,11 @@ export class FurnitureParticleSystem { if((this._roomSprite.width <= 1) || (this._roomSprite.height <= 1)) return; - if(this._canvasTexture && ((this._canvasTexture.width !== this._roomSprite.width) || (this._canvasTexture.height !== this._roomSprite.height))) this._canvasTexture = null; + if(this._canvasTexture && ((this._canvasTexture.width !== this._roomSprite.width) || (this._canvasTexture.height !== this._roomSprite.height))) + { + this._canvasTexture.destroy(); + this._canvasTexture = null; + } this.clearCanvas(); @@ -172,43 +184,50 @@ export class FurnitureParticleSystem const ty = ((this._centerY - offsetY) + ((((particle.y + ((particle.x + particle.z) / 2)) * k) / 10) * this._scaleMultiplier)); const asset = particle.getAsset(); + this._particleSprite.texture = null; + this._particleSprite.tint = 0xFFFFFF; + this._particleSprite.width = 1; + this._particleSprite.height = 1; + this._particleSprite.x = 0; + this._particleSprite.y = 0; + this._particleSprite.filters = []; + if(asset && asset.texture) { + this._particleSprite.texture = asset.texture; + this._particleSprite.width = asset.texture.width; + this._particleSprite.height = asset.texture.height; + if(particle.fade && (particle.alphaMultiplier < 1)) { this._translationMatrix.identity(); this._translationMatrix.translate((tx + asset.offsetX), (ty + asset.offsetY)); - const sprite = new Sprite(asset.texture); - this._particleColorTransform.alpha = particle.alphaMultiplier; - sprite.filters = [this._particleColorTransform]; + this._particleSprite.filters = [this._particleColorTransform]; - TextureUtils.writeToTexture(sprite, this._canvasTexture, false, this._translationMatrix); + TextureUtils.writeToTexture(this._particleSprite, this._canvasTexture, false, this._translationMatrix); } else { const point = new Point((tx + asset.offsetX), (ty + asset.offsetY)); - const sprite = new Sprite(asset.texture); + + this._particleSprite.x = point.x; + this._particleSprite.y = point.y; - sprite.x = point.x; - sprite.y = point.y; - - TextureUtils.writeToTexture(sprite, this._canvasTexture, false); + TextureUtils.writeToTexture(this._particleSprite, this._canvasTexture, false); } } else { - const sprite = new Sprite(Texture.WHITE); + this._particleSprite.tint = 0xFFFFFF; + this._particleSprite.x = (tx - 1); + this._particleSprite.y = (ty - 1); + this._particleSprite.width = 2; + this._particleSprite.height = 2; - sprite.tint = 0xFFFFFF; - sprite.x = (tx - 1); - sprite.y = (ty - 1); - sprite.width = 2; - sprite.height = 2; - - TextureUtils.writeToTexture(sprite, this._canvasTexture, false); + TextureUtils.writeToTexture(this._particleSprite, this._canvasTexture, false); } } @@ -289,7 +308,10 @@ export class FurnitureParticleSystem if(this._currentEmitter) this._currentEmitter.copyStateFrom(particleSystem._currentEmitter, (particleSystem._size / this._size)); - this._canvasTexture = null; + if (this._canvasTexture) { + this._canvasTexture.destroy(); + this._canvasTexture = null; + } } private clearCanvas(): void @@ -297,7 +319,6 @@ export class FurnitureParticleSystem if(!this._emptySprite) { this._emptySprite = new Sprite(Texture.EMPTY); - this._emptySprite.alpha = 0; } diff --git a/yarn.lock b/yarn.lock index 389e7310..08293ef8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1099,10 +1099,10 @@ picomatch@^2.3.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== -pixi-filters@^6.0.4: - version "6.0.4" - resolved "https://registry.yarnpkg.com/pixi-filters/-/pixi-filters-6.0.4.tgz#e6a02730210ff438519d3a888a2fe1c8cdaa6c94" - integrity sha512-W9SjOTF4yo+v9t5YOBtsWhJoFLLRM6DsIk1C2YBNiQhdyX7J/5UIJtPlTMhZ7wQKoFUiyeUAaCzTEdmw/TVD6w== +pixi-filters@^6.0.5: + version "6.0.5" + resolved "https://registry.yarnpkg.com/pixi-filters/-/pixi-filters-6.0.5.tgz#89d23091dc4e6341b8aa2112ebfcb5240bfb3223" + integrity sha512-M7F+Xu4Ysp2iy7bNZxt6U4hxO+X8c3msVKOQAq/tf3sLt99XOiY54iH2Ixj5VRIesmjdLWA5CaUQ+TUfyBVe2g== dependencies: "@types/gradient-parser" "^0.1.2" @@ -1121,10 +1121,10 @@ pixi.js@^8.2.5: ismobilejs "^1.1.1" parse-svg-path "^0.1.2" -pixi.js@^8.3.1: - version "8.3.1" - resolved "https://registry.yarnpkg.com/pixi.js/-/pixi.js-8.3.1.tgz#9f3955cc78c2806b2eff2ee7840106ce71ecbb04" - integrity sha512-QjLl526+Wd2oNxZZrHY82gJamy3pl9YFUTBGvbTqHTjK9BM/8B+sx6ipvPYPd5i83gJC+cxaMjhJxmR8DMXZJg== +pixi.js@^8.4.0: + version "8.4.0" + resolved "https://registry.yarnpkg.com/pixi.js/-/pixi.js-8.4.0.tgz#a08b48bdaca6e60a1380d3adab9c7afc8149e3c3" + integrity sha512-IM0YDv7G9XATtD/sPgbEi6FoLg82+XSqejzeCWg575vEyuQGs4RrdVFSV/K/i2PeXr/sLxiHRJDOGuotBUlldA== dependencies: "@pixi/colord" "^2.9.6" "@types/css-font-loading-module" "^0.0.12"