我希望能够在场景设置中实现条件,以提供不同的网格和 Material 或较低的多边形模型导入。这方面很简单,但我正在寻找检测渲染three.js场景的系统能力的最佳或最有效(/最佳实践)方法?
供引用:关于这个问题的答案 (How to check client perfomance for webgl(three.js)) 建议使用插件,如所述在场景创建之后而不是之前检查性能。
此外,这里有一个很好的方法( Using javascript to detect device CPU/GPU performance? ),它涉及测量渲染循环的速度作为检测性能的一种手段,但这是我们能提出的最佳解决方案吗?
一如既往的感谢!
最佳答案
浏览器无法提供有关它们运行的硬件的大量信息,因此很难提前确定设备的功能。与 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 获得的设备信息您或许可以猜测当前平台的强大程度。
不久前我正在研究这个确切的问题,但最终似乎很难对这么多不同的因素做出正确的猜测。相反,我选择构建一个包来迭代改进修改场景以提高性能,这可能包括加载或交换模型的细节级别。
希望至少有一点帮助!
关于THREE.JS - 如何检测设备性能/能力并相应地提供场景元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53586108/