How can I make a game with three qualities?

Questions
1

How can I make a game with three qualities? And how do I know what quality is suitable for the user’s device?

For example, I want to have three qualities, low, medium, high quality
When the user logs in, he can play the game in the appropriate quality according to the device he has, and if he wants to, he can change the quality

Is it necessary for all assets to be in three qualities or can the system itself do this with one asset?

2

I’m willing to be corrected, but I don’t think the web browser can give you decent information about what kind of device the users on. You can get the device (iOS, android, PC) and make some assumptions around that but it would be more towards if it’s mobile or not mobile.

Something I was investigating, but didn’t go too deep into as I think web browsers now do report back if they off low power or high power mode. You could use that to detect if the devices on low power mode and scale everything down because low power mode normally throttles FPS.

3

You can optionally use BABYLON.SceneOptimizer which will optimize the scene according to the performance of the user’s computer in order to always keep correct FPS

Doc:

You can also use Auto-LOD on your meshes regardless of the performance of the user PC which will help the SceneOptimizer

Doc:

2 Likes
4

To detect user’s device and some of its capabilities one may use detect-gpu - npm

It will depend on your use case; if you will use LOD you may want even more qualities depending on the viewing distance.
But for most cases, if your model geometry is fine (cannot be simplified more without visual artefacts), you need mainly to downscale textures for low-end devices (considering that all other scene optimizations are already done).