3.js-如何检测设备性能/功能并相应地为场景元素提供服务

浏览器不能提供很多关于它们运行的硬件的信息,所以很难提前确定设备的能力。与 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
});

将该信息(如果可用)与其他总帐上下文信息(如 max texture size 我是说, available shader precision ,等)和其他可通过 platform.js 您可能可以猜测当前平台的功能有多强大。

不久前,我正在研究这个确切的问题,但最终似乎很难在这么多不同因素的作用下做出正确的猜测。相反,我选择构建一个包来迭代地改进场景以提高性能,这可能包括加载或交换模型的详细级别。

希望这至少有点帮助!