How to handle WebGL poor performance

[botmaster]

I published a good dozen apps based on pixi, those apps do handle automatically their fps and resolution based on overall performance so they adjust themselves to the performance of the device. The system also handle just fine when the browser doesn't have any webgl available.

Now this being said, there are browsers that do have webgl but apparently a very weak version where all webgl operations are slow and fairly limited in what it can handle, it that case my apps run at very low fps and even eventually crash the browser after a few minutes. My question is, what is the best way to handle this?

I would rather detect those problems at the start and then either try a graphic2d solution or just not display the app and ask the user to choose a different browser but what should I be looking for in the webgl implementation to decide this? Should I start by timing webgl operations and take a decision if those operations are too slow? Or should I look for specific parameters in webgl that would tell me already this is gonna be too slow? What is a good clue(s) in webgl parameters that this webgl version is gonna be awful? 

Is there some additional tips with webgl pixi besides fps handling and resolution handling that could get some extra fps even in those situations?

Anyway thanks for any insights.

[Exca]

Few methods I'm aware of:

1. Create a blacklist. Whenever device with poor performance is found. Add it to list. Very time consuming solution.

2. During gameplay detect fps and tell the player that low fps was detected, do you want to reload the page with canvas solution. Store the selection in localstorage / cookie / somewhere.

3. Have an initial rendering when user comes to page.  Render something expensive for few seconds and measure fps. I have seen one solution which rendered basic quads and increased the number of renders until fps started to drop. Then compared that to baseline and changed rendering methods based on that.

4. Make sure viewports are set up so that slow devices dont render in their native resolution.

[botmaster]

Thanks for responding, I'd like to avoid 2 and 3 if possible since it takes time and might result in a weird experience for the user. For 1, I could see an automatic system where the app detects the bad rendering and log the browser and device name with a webservice so that this device/browser combination is then blocked. 4. what do you mean viewports setup?

[Exca]

Line like:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height">

Which makes sure that the viewport on browser is using proper resolution & scaling.

[botmaster]

Thx I'll double check that.