HTML5 "WebGL context lost" using mobile browsers

tx350z

I'm working on a simple match-3 style game. The proof of concept can be seen at https://match3.homebuilt-lan.com.

I've texted it with Firefox and Edge on Windows and it works fine thought there is a 7-10 second time during boot when the screen is blank.

On my Android both Firefox and Chrome report "WebGL context lost, please reload the page." Reload produces the same result. The error occurs during the long boot period.

Is this a time out problem or maybe memory?

Any and all help is appreciated.

Megalomaniak

Using GLES 2 or 3? Any logs from the browser consoles to share?

tx350z

Thanks for the tip!

I changed to GLES2 which fixed the WebGL crash problem on mobile browsers. During initial loading of scenes there is repeated flashing and flickering display artifacts. Once displayed everything works as well as expected (this is pre-alpha code).

It is still very slow to load. I'm guessing that can be fixed by restructuring how I load resources.

It would be great if someone could try running it with Safari and let me know if it runs.

Many thanks!

TwistedTwigleg

I tried it on my iPad Air 2 (running iOS 13), and after 5-10 seconds of loading, everything seems to load. I also tested on an iPhone 6 (running iOS 12, I believe) and it seems to load okay, but it takes awhile to load. Loading on the iPhone took about a minute, with most of that time spent on the spinning icon.

I have not tested desktop Safari, but on mobile it seems to work fine.

tx350z

Thanks for the report. I guess I need to track down the load time. I'm thinking it's due to the images even though they are mostly small - 90x90 pixels. I'll look into background loading.

cybereality

It loaded fine for me on my desktop and also Android phone (Pixel 2 XL). I have a pretty fast internet connection (400Mbps) and the loading bar moved for about 4 seconds, then the spinning wheel for like 1 second, then a black screen for 2 seconds, then I saw the title screen. Seems okay to me.