Image textures dumped from GPU and decoded again

[kevinv]

I have an app where I am creating a kaleidoscope effect with 6 segments of rotating images. Each image is relatively large in size (4000px square). There are two layers in the app which fade in an out to change the image shown slowly whilst each segment rotates.

I ran into an issue where the rotation stops due to the next image being decoded. To solve this, I preloaded the images by quickly running through each image in a loop. I now about the textureManager and prepare plugin that allows me to upload to the GPU.

The issue I now have is that when I increase the number of images in my sequence, the pausing returns.

I've profiled the app in Chrome and see that after a while, the images start to be decoded again which is why I'm seeing the pause. I also notice that GPU memory use increases but then suddenly drops when the pausing starts as though everything in the GPU has been removed.

I don't understand why if the textures are preloaded into the GPU why memory usage would continue to rise as each image shown. Am I just running out of memory which causes the memory usage to drop considerably?

 

[ivan.popelyshev]

> I don't understand why if the textures are preloaded into the GPU why memory usage would continue to rise as each image shown. 

because Chrome GPU Process (can be seen in shift+escape) is a weird thing. So, reuploading textures bevcause they werent used for some time may lead to this shit on computers with low mem.

Best workaround: turn pixi texture gc off. "renderer.textureGC.mode" or something like that? constants are in PIXI.GC_MODES

[ivan.popelyshev]

> each image is relatively large in size

you can low memory usage by using compressed textures. If your target is PC , DXT5 is enough. For mobiles you'll have to deal with zoo of formats , and that all is different topic

basically compressed texture - x4 less video memory.

[kevinv]

Turning texture gc off seems to have helped but I will look at DXT5 too.

As I said in my original post I loop through the textures initially to add them to the GPU. I have tried using both the prepare.add method and the textureManager.updateTexture methods but when I remove my preloading, the pausing returns as the images are decoded the first time.

I add my images using the loader.add method initially then loop them as shown below to add them to the GPU.

for (let i = 0; i < textures.length; i++) {       
  app.renderer.textureManager.updateTexture(PIXI.loader.resources[textures[i]].texture.baseTexture);
}

I also tried

for (let i = 0; i < textures.length; i++) {
  app.renderer.plugins.prepare.add(PIXI.loader.resources[textures[i]].texture.baseTexture, ()=> {
     console.log('added to gpu');
  })
}

I later reference them using

texture = PIXI.loader.resources[textures[textureIndex]].texture;

Am I doing something incorrectly and not referencing the texture uploaded using either of the first two methods? If possible I'd like to remove the manual preload that I do.