Web GL crash - Context lost

[clz.g...@gmail.com]

Hey, guys.

So I'm developing a game that is about 20MB aprox. The game runs smoothly on PC browsers.
However, the game keeps crashing on a lot of mobile devices due to WebGL contest loss.

This happens in the middle of a loading screen (in which I have to load 14MB of assets).

This is the console output:
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

When that happens, the game canvas becomes completely black, but audio is still playing the background music, so the game hasn't freezed.

Any ideas on this?

[Mark Knol]

How many images of which size are you trying to load? 

Maybe you can split the load into separate assetpacks and only load what you need at that moment?

I can imaging you cannot load unlimited amount images in memory, and with images you also run out of available memory quite fast in a browser.

[clz.g...@gmail.com]

Hey, Mark. Thanks for your answer. Your flame guide/wiki is awesome, by the way. It really helped me a lot.

I managed to reduce the assetpack size to 8MB. However, the crash is still happening, even now that I'm only loading what I need.

There must be 200 images approximately, but that's because I have 2 animation libraries with 120 images approx. No image is larger than 1024x1024.

[Mark Knol]

Hey thanks for the kind words!

About your game; you know that every transparent image takes (1024 * 1024 * 32 bits =) 4 MB, so 120x4 = 480mb! 

You are loading 125 million pixels at once in a browser and expect it will work? That is too much. I always try to keep the amount of sprites around 10 (!), and use lower-scaled assets for older devices. This is a nice flump feature you might wanna use.

Even if the device has 0.5 gig GPU memory the browsers might limit the amount of memory you can access. Most likely your browser is running out of memory which is why I think it loses context.

[clz.g...@gmail.com]

Oh, I see. But one of the main features of the game relies on those complex animations. If reducing the amount of sprites is not viable, is there another workaround?

I tried to disable webgl but even though it works, the framerate drops considerably.

[Mark Knol]

Is it one big animation you are displaying? I cannot imaging you need all of the spritesheets at the same time? I would just split it up in separate assetpacks, and dispose when you don't need display it, maybe with a loader inbetween.

Dropping WebGL means everything will be loaded in RAM, so then you have the same problem with CPU too. 

It's not a webgl or canvas issue, its a general memory issue, you are loading too much for a browser game. 

[clz.g...@gmail.com]

That sounds pretty clever, Mark.
I'll test it out and come back with the results.

Thanks for your help, man!