How To Test Device Performance to Select Low/Mid/High Resolution Models


I would like my application to import one of the low/mid/high poly models in terms of the detected device. Detecting ‘isMobile’ is not sufficient since the capabilities differ from one device to the other. Comparing screen sizes is not a good option as well.

Using multiple models was a better option than the SceneOptimizer since we can obtain better visuals. The problem is how could we test before we load a model.

I will be very glad to hear some ideas :slight_smile: Thank you!

Hey @Caner! This is a really fun question.

Unfortunately the answer isn’t quite as fun. In short, there is no way to query the “power” available to you at any given time.

That means you have to get a little clever with workarounds.

Through Babylon you have access to 2 different categories of information that you could potentially leverage for a workaround.

  1. Browser capabilities (less effective). EngineCapabilities | Babylon.js Documentation
    Babylon allows you to query the browser for different capabilities. This could give you SOME indication of performance capabilities, but VERY indirectly. For example, if the user is using your experience on a browser that does not support many WebGL 2 features, you could make a logical guess that they likely are on a browser that only supports WebGL 1. If that’s the case, there’s a high likelihood that their browser won’t be able to take advantage of some of the Babylon performance optimizations made with WebGL2 functionality. A further though leap would then lead you to the idea that that particular device might not be as performant as a counterpart using WebGL2. HOWEVER…as of this moment, even the latest fanciest iPhone with the best graphics available will not have a browser that supports WebGL2…so it’s an INCREDIBLY poor indicator of performance. But it’s an option to explore.

  2. Incremental Performance monitoring. (better, but still not perfect). Let’s say you have 3 different LoDs (levels of detail) of your assets. By default, you COULD load the medium LoD. Immediately after loading, query the framerate of the scene. If it’s super fast, then you could upgrade to the high resolution assets. Or if the framerate is struggling you could downgrade to the lowest quality assets. The point of this approach is actually more about doing something, then testing the performance, and the acting accordingly. Framerate is just one example of how you could do this. Essentially you’d write a custom initialization scene optimizer for your unique scenario.

Sorry there’s not a better option for you. If you think about it though at the highest possible level, querying the amount of “power” available on a machine could actually be a pretty big issue with privacy. So it makes sense that browsers don’t allow that type of direct access to understanding specific hardware on a person’s machine.

Anyways…I hope this is helpful in some small way.

1 Like

One feature you may want to check: The Scene Optimizer | Babylon.js Documentation (

This could be interesting: GitHub - TimvanScherpenzeel/detect-gpu: Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.

This is awesome! I will try it very soon. Thank you very much!

Sidenote only: You Guys are just so enjoyable. I would have likely answered something like ‘OMG’:wink:

1 Like