javascript - Modernizr:测试 WebGL 与 WebGL 扩展

Question

我在我的网页上使用了 THREE.js 场景和图形对象。我知道，至少 THREE.js 使用了 WebGL。

我想利用 Modernizr 检查当前浏览器与 WebGL 的兼容性，如果浏览器不兼容，则向用户提示一条消息.

选择 browser features 时要进行 Modernizr 测试，我看到两个与我的目标相关的特性

WebGL:在浏览器中检测 WebGL。

WebGl 扩展:检测 WebGL 中对 OpenGL 扩展的支持。如果支持 WebGL 扩展 API，则为 true，然后将支持的扩展公开为子属性，例如:

因此，为了让 THREE.js 正常工作，我是否需要测试 WebGL Extensions 和 WebGL 或者 只是WebGL？

Answer 1

这取决于您是否使用需要扩展的功能。 Three.js 本身不需要任何扩展。如果您使用 WEBGL_depth_texture 扩展，某些东西(例如阴影)可能会运行得更快。

如果您不知道您个人需要哪些扩展，请考虑插入一些代码来隐藏它们并查看您的应用是否仍在运行

例子:

// disable all extensions

WebGLRenderingContext.prototype.getExtension = function() {
  return null;
}
WebGLRenderingContext.prototype.getSupportedExtensions = function() {
  return [];
}

// now init three.js

如果你想允许特定的扩展，你可以这样做

var allowedExtensions = [
  "webgl_depth_texture",
  "oes_texture_float",
];

WebGLRenderingContext.prototype.getExtension = function(origFn) {
  return function(name) {
    if (allowedExtensions.indexOf(name.ToLowerCase()) >= 0) {
      return origFn.call(this, name);
    }
    return null;
  };
}(WebGLRenderingContext.prototype.getExtension);

WebGLRenderingContext.prototype.getSupportedExtensions = function(origFn) {
  return function() {
    return origFn.call(this).filter(function(name) {
      return allowedExtensions.indexOf(n) >= 0;
    });
  };
}(WebGLRenderingContext.prototype.getSupportedExtensions);