Using javascript to detect device CPU/GPU performance?

Question

(The question is not specific to three.js but I will use it as an example)

I have been using three.js to develop a web app interface lately and written some nice fallback between WebGL and Canvas renderer (for desktop browsers).

But now the problem becomes how to properly detect device capability, there are 2 aspects to the problem:

1. browser features (static features like webgl/canvas): this is largely solved within web community using simple feature detect.
2. device capability: this is the hard part, without direct access to device's hardware information, we need some ways of telling whether we should fallback to less hardware-demanding code.

A notable example: Firefox mobile/Opera mobile claims support of WebGL but are buggy or limited by device hardware.

A few workarounds I come up with so far:

1. Use a common feature as performance indicator - touch device, for example, has less powerful hardware in general. The con: it's not future-proof.
2. Blacklist known buggy browser/device - UA sniffing will be unavoidable, and it can be hard to maintain.
3. Performance test - hence the question, besides running the code and measure framerate, are there better options?

Or maybe it doesn't have to be this hard, are there other suggestions?

Answer 1

I've ended up using a performance measurement approach on a project where we wanted to utilise canvas features that are available on high spec CPU/GPU desktops, as well as lower speed devices such as tables and phones.

Basically we start at a minimum scene complexity, and if the renderloop takes less than 33ms we add complexity (we also reduce complexity if the renderloop starts taking too long at a later time).

I suppose in your case you might have to run a quick canvas and webgl performance test and then choose one. Having spent some time researching this I've not come across some tricky non-obvious technique that solves this better.

Answer 2

You can use http://webglstats.com/ for WebGL hardware support and feature detection.