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

Question

（这个问题不是针对three.js的，但我会用它作为例子）

我最近一直在使用three.js开发一个Web应用程序界面，并在WebGL和Canvas渲染器（用于桌面浏览器）之间编写了一些不错的回退。

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

1. 浏览器功能（静态功能，如webgl / canvas）：这在很大程度上是通过简单的功能检测在网络社区中解决的。
2. 设备功能：这是一个难点，如果不直接访问设备的硬件信息，我们需要一些方法来判断是否应该回退到硬件要求较低的代码。

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

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

如果您使用three.js，您可以使用detector.js来查明是否启用了webgl。也远离canvasrenderer将有所帮助。使用webglrenderer或softwarerender。因为它们允许更多顶点。 softwarerender相当新，需要一些工作但可以使用。