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

Question

（这个问题并不特定于three.js，但我会以它为例）

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

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

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

一个值得注意的例子：Firefox 移动/Opera 移动声称支持 WebGL，但存在错误或受设备硬件限制。

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

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

或者也许它不必这么难，还有其他建议吗？

Answer 1

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

基本上我们从最小的场景复杂度开始，如果渲染循环花费少于 33 毫秒，我们会增加复杂度（如果渲染循环在稍后时间开始花费太长时间，我们也会降低复杂度）。

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

Answer 2

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

Answer 3

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