App memory crash on IOS

[royibernthal]

I have an Ionic 3 + Angular 4 App, which uses PIXI for loading and displaying images in 1 screen.

I'm guessing Ionic and Angular use app a nice amount of memory by themselves (although they should be extremely optimized for mobile).

I'm using images that total 126KB as normal app assets, then I'm starting to upload to GPU content-related images.

After uploading to GPU around 2MB of content-related images, the app crashes. It's definitely because of that, it happens every time at the 15th image I'm trying to display or prepare (upload to GPU without displaying).

I'm testing on iPhone5s, which according to this list should crash at around 646MB memory usage:

https://stackoverflow.com/questions/5887248/ios-app-maximum-memory-budget/15200855

Naturally there are many things to take into consideration when trying to understand memory usage, the images could be the last straw the broke the camel's back, but it still doesn't make much sense to me, the app is very light - it doesn't use many resources and doesn't do any crazy calculations.

When I run the same app on Android I'm uploading to the GPU 28 content-related images and it works smoothly.

 

Did anybody ever experience a similar issue? Any idea why this is happening?

[alex_h]

What are the dimensions of the images you are loading? When you say 126KB I guess thats the size on disk? It's the uncompressed size in memory that matters once you load them.

[alex_h]

Also once webGL makes textures from the images their width and height will get rounded up to the nearest power of 2, requiring even more memory

[royibernthal]

Each content-related image width x height is between 1500x2000 to 3000x3000 and weights 50-200kb.

The other normal app assets are between 50x50 to 200x200, 5-15kb.

 

How can I see uncompressed size after loaded in app?

How much can an uncompressed size get to? How do gallery apps handle this issue when displaying big images smoothly one after the other with no delay?

[alex_h]

Here's some reference material:

http://www.learn-cocos2d.com/2013/01/memory-calculating-size-textures-audio-buffers-classes-collections/

Quote

A texture is an in-memory representation of an image made up of individual pixels. Each pixel uses a certain amount of memory to represent its color. A texture’s memory size is therefore simply the product of width * height * sizeof(color).

Before I go any further, I like to stress it again: the size of an image file is much smaller than the size of the texture generated from the image. Don’t use image file sizes to make memory usage estimations.

Most common are 32-Bit and 16-Bit textures which use 4 and 2 Bytes respectively per pixel. A 4096×4096 image with 32-Bit color depth therefore uses 64 MB memory. Let that sink in for a moment …

At 16-Bit it only uses half of that, though without color dithering (TexturePacker does this for you) this might not look too good depending on the image.

Also the vram section of this:

https://gamedev.stackexchange.com/questions/48304/which-image-format-is-more-memory-efficient-png-jpeg-or-gif

[royibernthal]

That's significantly more memory than I dared to imagine... Thanks for the reading materials.

I have a question then, perhaps with your experience you'll be able to come up with a solution -

 

I need the user to be able to navigate between batches of 100 2048x1536 images at a time, with no lag in between.

If I upload to the GPU one texture at a time (which is already done automatically by PIXI) and destroy it after it is displayed, it solves the memory problem, but then there'll be a minor decoding lag when uploading each image to the GPU, which noticeably hurts the gameplay.

Do you have any idea how I can avoid lag between images without using massive amounts of memory? Is there a way perhaps to upload images to the GPU on a separate thread so it doesn't affect the main thread?

A user can navigate to the next image within 0.3 seconds from showing the previous image, during which I have to upload the next image to the GPU, which visibly lags unless I upload it to the GPU beforehand.

[alex_h]

18 hours ago, royibernthal said:

I need the user to be able to navigate between batches of 100 2048x1536 images at a time, with no lag in between.

That doesn't seem like a realistically achievable requirement to me.  To some extent this will depend on what your baseline device requirements are but you can probably only safely load about 10 or so large images at once. Navigating sets of 100 will definitely mean some loading and unloading. Unless there is some way you can anticipate in advance which ones are going to be required and preload them, while also unloading some others, then unfortunately lag is going to be unavoidable.

[royibernthal]

I feared as much, I guess I'll have to rethink the whole gameplay. Thank you

[Andy Williams]

Which phone are you using? I like iPhones. Easy, fast and with an excellent camera. I am a student and of course, sometimes I have difficulties in the learning process. But I use various online applications for iOS. This is an excellent tool for accessing educational resources (video, articles, chats) and services ( like this one). This helps to more confidently manage own education outside of the college.  

[TammySmith]

I also use iPhone