首页 文章

THREE.JS - 如何检测设备性能/功能并服务场景元素

提问于
浏览 次
0

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

供参考：关于这个问题的答案（How to check client perfomance for webgl(three.js)）建议插件，如所述，在场景创建之后而不是之前检查性能 .

此外，这里有一个很好的方法（Using javascript to detect device CPU/GPU performance?），它涉及测量渲染循环的速度，作为检测性能的一种方法，但这是我们能想出的最佳解决方案吗？

一如既往地谢谢！

three.js

1 回答

  • 0

    浏览器不能继续运行，因此难以确定设备的提前能力 . 使用 WEBGL_debug_renderer_info 扩展，您可以（可能）了解有关所使用的图形硬件的更多详细信息，但返回的值似乎不一致且there's no guarantee that the extension will be available . 这是输出的一个例子：

    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)

    我创建了this 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上下文信息（如max texture size，available shader precision等）以及通过platform.js提供的其他设备信息，您可能会猜测当前平台的强大程度 .

    不久前我正在研究这个确切的问题，但最终似乎很难用很多不同的因素来发挥作用 . 相反，我选择构建一个包，迭代地改进修改场景以提高性能，包括加载或交换模型级别的细节 .

    希望有助于至少一点！

    回复于

相关问题