THREE.JS - 如何检测设备性能/能力并相应地提供场景元素

Question

我希望能够在场景设置中实现条件，以便提供不同的网格和材质或较低多边形模型导入。这个方面很简单，但我正在寻找最佳或最有效（/最佳实践）的方法来检测系统渲染three.js场景的能力？

参考资料：这个问题的答案（如何检查WebGL（three.js）客户端性能），建议使用插件，在场景创建后检查性能，而不是之前。

此外，这里还有一个不错的方法（使用javascript检测设备CPU / GPU性能？），它涉及测量渲染循环的速度作为检测性能的手段，但这是我们能想出的最好的解决方案吗？

感谢一如既往的支持！

- Toki

Answer 1

浏览器无法提供有关其运行的硬件的大量信息，因此很难事先确定设备的能力。使用WEBGL_debug_renderer_info扩展名，您可以（可能）获取有关正在使用的图形硬件的更多详细信息，但返回的值似乎不一致，并且不能保证扩展名将可用。以下是输出示例：

ANGLE (Intel(R) HD Graphics 4600 Direct3D11 vs_5_0 ps_5_0)
ANGLE (NVIDIA GeForce GTX 770 Direct3D11 vs_5_0 ps_5_0)
Intel(R) HD Graphics 6000
AMD Radeon Pro 460 OpenGL Engine
ANGLE (Intel(R) HD Graphics 4600 Direct3D11 vs_5_0 ps_5_0)

我已经创建了一个 gist，可以提取并大致解析这些信息：这里是链接。

function extractValue(reg, str) {
    const matches = str.match(reg);
    return matches && matches[0];
}

// WebGL Context Setup
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

// Full card description and webGL layer (if present)
const layer = extractValue(/(ANGLE)/g, renderer);
const card = extractValue(/((NVIDIA|AMD|Intel)[^\d]*[^\s]+)/, renderer);

const tokens = card.split(' ');
tokens.shift();

// Split the card description up into pieces
// with brand, manufacturer, card version
const manufacturer = extractValue(/(NVIDIA|AMD|Intel)/g, card);
const cardVersion = tokens.pop();
const brand = tokens.join(' ');
const integrated = manufacturer === 'Intel';

console.log({
  card,
  manufacturer,
  cardVersion,
  brand,
  integrated,
  vendor,
  renderer
});

如果有信息可用，您可以使用该信息以及其他gl上下文信息（如最大纹理大小，可用着色器精度等）和通过platform.js获得的其他设备信息，可能能够开发出对当前平台强度的猜测。

不久前，我也在研究这个问题，但最终似乎难以在如此多的不同因素影响下做出良好的猜测。相反，我选择构建一个包，通过迭代地改进场景来提高性能，其中可能包括加载或交换模型细节级别。

希望这至少有点帮助！

- Garrett Johnson