Jump to content

Memory problem with personal project


Recommended Posts

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:

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...