Memory problem with personal project

[Mcpll]

Hi everyone, 
I'm new here in the forum and this is my first post.
In my agency we have developed a small project using pixi.js and vue.js



this is the address:
hawa.monofonts.com



The project basically analyzes the emotion of a phrase and combines color and font images.

My problem is that at present, after 3 or 4 iterations, everything slows down, I can not figure out how to fix the problem, 

I think it is related to the videos that are displayed or how to change color within the central bubble.

I tried to analyze everything through chrome profiling but I can not understand it very well.

The colors in the bubble are changed using tweenmax and creating a runtime of a set of canvas from which I then create a texture 
and insert it into the object subjected to pixi.

For videos just once loaded I create textures then check the video item at the right time.


Any suggestion is well accepted
Thank you all

[ivan.popelyshev]

I havent looked at the site yet, but in general, you have to understand how pixi GC for textures works. It can either be ON or OFF. Its enabled by default `renderer.textureGC.mode = PIXI.GC_MODES.AUTO` , Please read up the source files of https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/TextureGarbageCollector.js and TextureManager in the same folder.

As for videos, you have to understand that every tick it re-uploads the texture and you have to be aware how its using shared ticker for updates. https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/VideoBaseTexture.js

Its possible that I'll have time to look at your site and determine the problem, but better if you do R&D. Pixi is not a blackbox (good) its not fully covered by docs (bad) but devs made sure sources can be read just fine (good again).

[Mcpll]

Hi Ivan, thanks for the reply, 

 

to be honest I did not understand very well what you mean about the video can you explain me better? I would be grateful if you could take a look at the site, because there are some days I'm working on it and I can not really figure out which way to take. Thank you

[ivan.popelyshev]

I'm too tired to explain all that  Please wait for someone else's answer or try to read source code of parts that I highlighted.
 

Anything that is ticking is added to ticker and if its not removed due to stop() or destroy() it will leak, because PIXI does not have "STAGE" elements, while flash and cocos have them. To understand what's really going on there, look in sources. If you dont want to spend time on it, just make sure you destroy videos, animatedSprites or whatever is ticking that you dont need anymore. also sometimes its `destroy(true)` to destroy base texture too, please consult the docs about that.