Hi, I'm trying to make a card game, and after some tests I found out that too many images on top of each other kills the FPS. I tried to load 500 +-50Kb jpgs and when side by side, performance is bad (+- 30FPS), but stacked, it is worst (+- 5FPS)

I tried this in regular HTML, canvas, and flash, with same results.

I wonder if anyone can tell me if this is normal and explain why. Also, if there is any clever way to deal with this. If needed, I can put the examples online but this may take a while

Thanks

I tried to load 500 +-50Kb jpgs and when side by side, performance is bad (+- 30FPS), but stacked, it is worst (+- 5FPS)

Yep, that's too many images. Each jpg that is rendered is unpacked in memory. What is their size? Application like that easily requres hundreds of megabytes of RAM. Native OGL/DX optimized applications likely need to optimize a few things to keep it smooth.

If needed, I can put the examples online but this may take a while[/quote]

What is the resolution of a single image and how many exactly are there?
How many individual cards are rendered at most?

Threre are 500 images. The size of each is 366x520. Each image have 50kb more or less. The total size is 18MB.

Flash uses +- 100MB RAM, Firefox and Chrome uses a lot! (+- 700MB)

The weird part for me was the stacked version. If they are side by side there is no problem.

Also, I'm using a huge canvas (10.000 width/height) with scrolling and zooming support. The images are also draggable/rotatable through jquery-ui. But I tried disabling all of this and they make no difference in performance.

The basic idea I have for optimization is to identify huge stacks (maybe 50+ cards) and unload/load images based on that. I'd keep a cache of course. But I really would like to know if there isn't some other optimization I can do first. Like in canvas, maybe disable drawing of covered cards.

Threre are 500 images. The size of each is 366x520. Each image have 50kb more or less. The total size is 18MB.

Images need to be unpacked - they are not stored as packed jpg in memory.

366*520*4 = 743kB * 500 = 363MB

That is just for images. For a web app, that is insane. It will also break many netbooks or low-end machines, it's impossible for mobile.

At minimum, there are GPUs which only have 128/256MB of memory (majority of all devices). So on each redraw, they need to send most/all texture data, so even hardware acceleration doesn't help. That has huge impact on performance.

Also, I'm using a huge canvas (10.000 width/height) with scrolling and zooming support. The images are also draggable/rotatable through jquery-ui. But I tried disabling all of this and they make no difference in performance.[/quote]

Large canvas sizes like this go well beyond usual texture/surface sizes, so are unlikely to be optimized in drivers, even in ideal cases. It's tricky since it depends on obscure and unknown decisions, but going beyond 2048x2048 is usually not recommended, even that may be too much.

The basic idea I have for optimization is to identify huge stacks (maybe 50+ cards) and unload/load images based on that. I'd keep a cache of course. But I really would like to know if there isn't some other optimization I can do first. Like in canvas, maybe disable drawing of covered cards.[/quote]

There is nothing generic. I'm surprised it even works that well. Such unusual sizes are likely to break in completely unexpected places.

However, seeing that brute force approach works so well, there's a sea of algorithmic optimizations that can be done. But you'll need to be more specific for any useful advice.



Obviously, being a web app, having it hosted somewhere would go a long way.

Also, think about the sizes - 18MB per user will bankrupt you and mean most users won't be able to load it or won't wait several minutes till it loads. 4MB is about the upper limit.

Thank you for your answers. I should have mentioned that this isn't a typical web app. It is not meant to be played online, although it can. I have a few ideas on how to minimize impact on my bandwidth, like a user would come up with his own cards and maybe do a P2P with other users. It is a generic system for table games, it can be anything from 1 to hundreds of images. If it is a small enough game, regular online hosting may be used.

Also, it’s not really for commercial use. Mobile versions may come up with more optimized images. I know how to make then crazy small (2kb small), but I'm talking about the high res version.

If you want to have an idea of what I'm talking about, take a look at this.

http://bolaslenses.catuhe.com/
http://css.dzone.com/articles/magic-gathering-javascript-ant

The creator have a 2008 graphics board (although not any one, it’s a NVIDIA Quadro or something) and he can run at 30FPS. Here (GeForce 8800 GTS 512) it runs at 5FPS

BTW, I’m not making magic, but this site inspired me. Again, the stacking issue puzzled me, but as it has been suggested in this other forum I'm posting this question, layering can be a bitch! An as suggested by my friend, I should look into z-culling maybe.

http://www.webdeveloper.com/forum/showthread.php?t=256184