使用javascript检测设备CPU/GPU性能？

Question

(问题不是特定于three.js,但我会以它为例)

我最近一直在使用three.js开发一个Web应用程序界面,并在WebGL和Canvas渲染器(用于桌面浏览器)之间编写了一些很好的回退.

但现在问题变成了如何正确检测设备功能,问题有两个方面:

1. 浏览器功能(静态功能,如webgl/canvas):这在很大程度上是通过简单的功能检测在Web社区中解决的.
2. 设备功能:这是困难的部分,如果没有直接访问设备的硬件信息,我们需要一些方法来判断我们是否应该回退到硬件要求较低的代码.

一个值得注意的例子:Firefox移动/ Opera移动声称支持WebGL但是有缺陷或受到设备硬件的限制.

到目前为止我提出了一些解决方法:

1. 使用通用功能作为性能指标 - 例如,触摸设备通常具有不太强大的硬件.骗局:这不是面向未来的.
2. 黑名单已知错误的浏览器/设备 - UA嗅探将是不可避免的,并且它很难维护.
3. 性能测试 - 因此问题除了运行代码和测量帧率之外,还有更好的选择吗？

或者也许它不一定很难,还有其他建议吗？

Answer 1

我最终在一个项目中使用了性能测量方法,我们希望利用高规格CPU/GPU桌面上提供的画布功能,以及桌面和手机等低速设备.

基本上我们从最小的场景复杂度开始,如果renderloop花费不到33ms,我们就增加了复杂性(如果renderloop以后开始花费太长时间,我们也会降低复杂性).

我想在您的情况下,您可能需要运行快速画布和webgl性能测试,然后选择一个.花了一些时间研究这个我没有遇到一些棘手的非显而易见的技术,可以更好地解决这个问题.

Answer 2

您可以使用http://webglstats.com/来获取 WebGL 硬件支持和功能检测。