Sprite texture change Lag on Mobile

[royibernthal]

I have a very small pixi app, which I embed in Ionic 3 and run on mobile (android).

It loads a long list of images via PIXI.Loader, and once they are all loaded it starts changing them - every time a new image is tweened into the screen, and the previous image is tweened out of the screen.

There are 2 Sprite components on screen at all times which I'm reusing every time I tween the images in and out. (by changing coordinates and texture)

The problem is, every time I change the texture of the sprite that comes in, there's a lag on the phone for a few moments, as if it takes some time to render.

In the beginning I created this little functionality by css tweening images in the DOM, which lagged more, but I was very surprised to see that it lags when using WebGL / Canvas.

My goal is for each texture change to be very smooth with no lag at all.

Do you have any idea how I can achieve that? Other than optimizing the images themselves.

[themoonrat]

You want to use the prepare plugin in pixi

renderer.plugins.prepare.upload()

You can pass through a sprite, texture, base texture etc. and it will upload any base textures to the gpu, so when it comes to be used there is no minor decoding lag

[royibernthal]

Sounds perfect

I imagine it refers to WebGLPrepare?

http://pixijs.download/release/docs/PIXI.prepare.WebGLPrepare.html

What happens when PIXI falls to canvas?

 

 

I tested it on mobile and it still lags. The prepare callback is definitely called and the textures exist.

load(images: string[], onComplete?: any): void {
	images.forEach(image => PIXI.loader.add(image, image));

	PIXI.loader.load((loader, resources) => this.prepare(loader, resources, onComplete));
}

private prepare = (loader, resources, onComplete?: any): void => {
	for (var key in resources) {
		this.app.renderer.plugins.prepare.add(resources[key].texture);
	}
	
	this.app.renderer.plugins.prepare.upload(onComplete);
}

After a texture was displayed once it is displayed smoothly the next time since it's already uploaded to the GPU, but the prepare code didn't make a difference.

What am I doing wrong or what things can I check?

[royibernthal]

@themoonrat What do you think?

[Taz]

Here's a couple more things to try:

1. Try passing the base texture instead of the texture:

this.app.renderer.plugins.prepare.add(resources[key].texture.baseTexture);

2. Try using texture manager instead of prepare:

app.renderer.textureManager.updateTexture(resources[key].texture.baseTexture);

 

[royibernthal]

@Jinz Thanks I'll try these.

Is there any way to check which textures have been actually uploaded to the GPU? e.g. a notification when a texture has been ACTUALLY uploaded to GPU.

It'll speed up the debugging considerably since it'd allow me to test on my computer rather than consistently export to mobile and check for lags, which takes time.

 

When using textureManager.updateTexture, is the location param optional?

http://pixijs.download/dev/docs/PIXI.TextureManager.html

[Taz]

2 hours ago, royibernthal said:

@Jinz Thanks I'll try these.

When using textureManager.updateTexture, is the location param optional?

http://pixijs.download/dev/docs/PIXI.TextureManager.html

I've always called it without the location param. That's how it was shown to me. It uploads the base texture to the GPU.

For my use case, and others that I've seen here on forum, it doesn't work to pass the texture, only works when pass the base texture. But maybe there are use cases for passing the texture, IDK.

[Taz]

2 hours ago, royibernthal said:

Is there any way to check which textures have been actually uploaded to the GPU? e.g. a notification when a texture has been ACTUALLY uploaded to GPU.

It'll speed up the debugging considerably since it'd allow me to test on my computer rather than consistently export to mobile and check for lags, which takes time.

 

I think like this:

resources[key].texture.baseTexture.key = key;
resources[key].texture.baseTexture.update = function() {
  console.log(this.key + " uploaded to GPU");
}

EDIT: Actually I think it's the update event that you want, I think the loaded event is for when a source image finishes downloading for instance, and the update event I think is for when the base texture is uploaded to the GPU. I changed the above code from loaded to update. I'm not sure, but there's only 4 events for the base texture, so prob one of those two: http://pixijs.download/release/docs/PIXI.BaseTexture.html#event:update

[royibernthal]

@Jinz loaded event is what you said, I didn't get to check the update event because adding the base texture to prepare solved the issue for me so there was no need anymore

Is there any way to track the progress of prepare and not just the complete?