使用JavaScript检测设备的CPU / GPU性能？ [英] Using javascript to detect device CPU/GPU performance?

问题描述

（该问题并非特定于three.js，但我将以它为例）

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

我一直在使用three.js开发Web应用程序界面

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. 浏览器功能（如webgl / canvas之类的静态功能）：这在Web社区内使用简单的功能检测。


2. 设备功能：这是很难的部分，如果不能直接访问设备的硬件信息，我们需要一些方法来告诉我们是否应该回退到

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.

一个值得注意的例子：Firefox mobile / Opera mobile声称支持WebGL，但是越野车或受设备硬件限制。

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. 使用通用功能作为性能指标-例如，触摸设备的硬件功能通常较差。缺点：这不是面向未来的。


2. 黑名单中已知的错误浏览器/设备-UA嗅探是不可避免的，而且很难维护。
li>

3. 性能测试-因此，除了运行代码和衡量帧速率外，还有一个更好的选择吗？

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?

推荐答案

我最终在一个项目中使用了性能评估方法，在该项目中，我们希望利用在高规格CPU / GPU台式机以及低速设备（例如桌子和电话）上可用的画布功能。

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.

基本上，我们从最小的场景复杂度开始，如果renderloop所花费的时间少于33ms，我们会增加复杂度（如果renderloop在以后开始花费的时间太长，我们也会降低复杂度时间）。

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).

我想在您的情况下，您可能需要运行快速的canvas和webgl性能测试，然后选择一个。花了一些时间对此进行了研究，但我还没有遇到过能够解决此问题的棘手的非显而易见的技术。

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.

这篇关于使用JavaScript检测设备的CPU / GPU性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！