renderCanvas/drawImage performance threshold

[ForgeableSum]

I've noticed that I can only draw so many times to the canvas before the browser completely chokes. It feels like a threshhold, like you draw a certain number of bitmapDataObjects and then you can't draw anymore without the browser hanging. Here's what's happening according to the js profiler:

 

 

About 50% of memory is used on PIXI.Display.ObjectContainer._renderCanvas - that's when it chokes. Is this just a limitation of how much pixi can render at one time? 

[wayfinder]

That's CPU time, not memory. You're just drawing a ton of images every frame and pushing pixels takes its time. When calculating a single frame takes more than 16.666... ms, things start getting choppy (ie no more 60 fps)

[rich]

It's a limitation of your GPU, not Pixi btw. On a top of the range GeForce like the Titan X you could push out several million draw calls (as long as the textures are in memory) without breaking a sweat. The lower spec the card, the lower the draw limit falls. It's not quite as black and white as this, as other things factor too (CPU load, browser, other crap running in memory at the same time, etc) but essentially the faster the PC, the more it draws.

[AshleyScirra]

Actually based on our work on Construct 2's engine, if you're using the canvas2d renderer with a large number of small sprites, drawImage will tend to bottleneck on the CPU before the GPU. Every single drawImage call requires a relatively expensive transition from the JS engine back in to native code, and then when it returns a transition back from native code to the JS engine again. For maximum performance you need to use a WebGL renderer, which with a well-written batching engine can submit hundreds or even thousands of drawImage-equivalents in just a handful of calls, minimising the JS-to-native CPU bottleneck.

 

I don't know much about Phaser or PIXI, but for this reason they should render with WebGL by default. Why are you still using canvas2d?

[rich]

They do render with WebGL by default, and do handle the batching carefully. My comment above is based solely on this.

[ForgeableSum]

It's a limitation of your GPU, not Pixi btw. On a top of the range GeForce like the Titan X you could push out several million draw calls (as long as the textures are in memory) without breaking a sweat. The lower spec the card, the lower the draw limit falls. It's not quite as black and white as this, as other things factor too (CPU load, browser, other crap running in memory at the same time, etc) but essentially the faster the PC, the more it draws.

 

 

I hear you about it being a limit of the GPU - that would make sense given the performance problems only start happening after you draw A LOT of crap to the canvas. That said, it seems I need to turn back to webgl as my game needs to do more than what 2d can offer. 

 

Actually based on our work on Construct 2's engine, if you're using the canvas2d renderer with a large number of small sprites, drawImage will tend to bottleneck on the CPU before the GPU. Every single drawImage call requires a relatively expensive transition from the JS engine back in to native code, and then when it returns a transition back from native code to the JS engine again. For maximum performance you need to use a WebGL renderer, which with a well-written batching engine can submit hundreds or even thousands of drawImage-equivalents in just a handful of calls, minimising the JS-to-native CPU bottleneck.

 

I don't know much about Phaser or PIXI, but for this reason they should render with WebGL by default. Why are you still using canvas2d?

 

 

When webgl does work, it works spectacularly, but when it doesn't, it's miserably slow. It seems that the bottlenecks are completely different for webgl vs 2d. 

 

I'm on an imac circa 2009 (GeForce 9400 256 MB) and webgl doesn't seem to work. In webgl mode, my game is running at 5-10 FPS. Zero problems with 2d (60 FPS). This didn't happen when I tested on windows but it's been a while since I've tested on windows, so I suppose it's possible there could be something wrong with my game logic (doubt it because it is after all, working fine in 2d). Here's what's sucking up the most juice in webgl:

Mind, this is with absolutely nothing happening in the game (an empty map with some PNGs tiled in a 2000 x 2000 area). 

 

I wonder if my GPU is simply not compatible with webgl? Is there anything I can do to fix this or am I forced to use 2d?

[drhayes]

When you say an empty map... is it *really* empty or is drawing a bunch of transparent pixels? Those count. ( ;

[AshleyScirra]

I assumed you were using the canvas2d renderer. I'm not sure why drawImage would turn up in a profile for a WebGL renderer? It's a canvas2d function.

[ForgeableSum]

I assumed you were using the canvas2d renderer. I'm not sure why drawImage would turn up in a profile for a WebGL renderer? It's a canvas2d function.

Oops, I must have uploaded the wrong profile. Here is the top performance sucking functions in the webgl profile:

 

 

Absolutely horrible performance.