Very slow CanvasRenderer performance for just 3 sprites

[willemmulder]

I'm trying to draw 3 'tetris blocks' on the screen, but as you can see, the performance is quite bad. I get around 3 frames per second on my machine.

I created a codepen example to demonstrate the effect.

What I do is create one Base texture (i.e. a tilemap) and then create 3 sprites from that base texture, and adding it to the stage. That should be fast, right?

Is there anything obvious that I'm missing?

Thanks!

[ivan.popelyshev]

I agree that its very slow that I cant even debug what is happening. 

I had a case at "gameofbombs.com" when region textures made from single big canvas were very slow for canvas2d context, even without pixi.

I suggest to not use canvas2d-generated texture to draw on other canvas2d. I can look at the code more closely later.

SUMMARY: I hate canvas2d problems.

[willemmulder]

Hi Ivan,

Thanks for looking into this!

So you suggest using e.g. an actual tilemap (from an image) instead of creating the tilemap from a canvas2d?

[ivan.popelyshev]

> So you suggest using e.g. an actual tilemap (from an image) instead of creating the tilemap from a canvas2d?

I also suggest not to use pixi.JS for canvas-only app. It doesnt have any optimizations there.

[willemmulder]

4 minutes ago, ivan.popelyshev said:

> So you suggest using e.g. an actual tilemap (from an image) instead of creating the tilemap from a canvas2d?

I also suggest not to use pixi.JS for canvas-only app. It doesnt have any optimizations there.

I'm actually building an Android app using Cordova, and I hope that most devices will support WebGL. That's where Pixi shines.

However for those that don't support WebGL the Android app should still work using the CanvasRenderer. That includes the Android emulator on my local machine. That's why I'm testing on CanvasRenderer for now.

[themoonrat]

It ground to a crawl for me too, and I was able to get a profile on it, and the delay is all in the GPU

At the bottom you have a canvas that is 10000x10000

This is way too big

The maximum texture size I'd recommend is 4096x4096... but in my games I often play it safe with 2048x2048 for the canvas renderer because of the time it can take to upload large textures to the gpu

 

[willemmulder]

15 minutes ago, themoonrat said:

The maximum texture size I'd recommend is 4096x4096

That did the trick! Making the texture 4096x4096 makes everything smooth again. Thanks so much!

Out of interest: why would a texture that's only approximately 4x larger make the game so incredibly slow? And why would such a large texture not be a problem for the WebGL renderer?

[themoonrat]

I'd take a guess that pixi, via the WebGL renderer, is uploading that texture to the GPU once (it's something the lib has control over)

I'd then take a guess that the canvas renderer is uploading that texture to the GPU every frame. 

But just because WebGL _could_ do it, doesn't mean you should. Take a look at https://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE - 99.9% of gpus devices out there support 4096x4096 texture size, yet only 29.9% support the next size up, 8192x8192. It probably works on your pc because you have a discrete GPU in it. 

[ivan.popelyshev]

If you want to make a tilemap, I recommend to search through this forum. Every week there's tilemap thread where I explain everything all over again.

[willemmulder]

5 minutes ago, ivan.popelyshev said:

If you want to make a tilemap, I recommend to search through this forum. Every week there's tilemap thread where I explain everything all over again.

What kind of information around tilemaps are you referring to? I think I know how to do it, but if not I'll definitely check the forums for any best practices!

 

1 hour ago, themoonrat said:

I'd take a guess that pixi, via the WebGL renderer, is uploading that texture to the GPU once (it's something the lib has control over)

I'd then take a guess that the canvas renderer is uploading that texture to the GPU every frame. 

But just because WebGL _could_ do it, doesn't mean you should. Take a look at https://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE - 99.9% of gpus devices out there support 4096x4096 texture size, yet only 29.9% support the next size up, 8192x8192. It probably works on your pc because you have a discrete GPU in it. 

Thanks so much!

[ivan.popelyshev]

Also browse the https://github.com/pixijs/pixi.js/issues