javascript - 所需的 WebGL 扩展检测

Question

我正在开发一个 WebGL(使用 ThreeJs )应用程序，显然，它显示 3D 模型，我们正在使用一些效果(着色器)，希望进行测试以了解用户是否可以运行该应用程序，我找到了一种方法来检索所用浏览器中支持的插件列表。

问题:

我面临的问题是想知道我的应用程序需要哪些插件，有没有办法自动检测它们？

---

更多详情:

有关更多详细信息，我将指定一个我需要的示例:

1. 在 Mac OSX Maverix 下的我的 MacBook Pro 中，应用程序运行良好
2. 在我的 Lenovo 笔记本电脑上测试应用程序，先是 Windows 7，然后是 Windows 8，应用程序无法运行，问题是由 Bokeh2 引起的着色器。

检查受支持的 WebGL 扩展列表后，我发现与 Mac 相比，Lenovo 缺少一些扩展，因此我如何判断哪些是必需的扩展，如果缺少会破坏 WebGL 应用程序。

这是我在 mac 和 lenovo 中都有的扩展列表。

在我的 Mac 中:

ANGLE_instanced_arrays

WEBKIT_EXT_texture_filter_anisotropic

OES_element_index_uint

OES_standard_derivatives

OES_texture_float

OES_texture_float_linear

OES_texture_half_float

OES_texture_half_float_linear

OES_vertex_array_object

WEBKIT_WEBGL_compressed_texture_s3tc

WEBKIT_WEBGL_depth_texture

WEBGL_draw_buffers

WEBGL_lose_context

WEBGL_debug_renderer_info

在我的联想中:

ANGLE_instanced_arrays

WEBKIT_EXT_texture_filter_anisotropic

OES_element_index_uint

OES_standard_derivatives

OES_texture_float

OES_texture_half_float

OES_texture_half_float_linear

OES_vertex_array_object

WEBKIT_WEBGL_compressed_texture_s3tc

WEBGL_lose_context

WEBGL_debug_renderer_info

联想缺失的那些:

OES_texture_float_linear

WEBKIT_WEBGL_depth_texture

WEBGL_draw_buffers

Answer 1

您可以通过询问来检查扩展

var ext = gl.getExtension("OES_texture_float_linear");
If (!ext) {
  alert("extension does not exist");
}

对于three.js你可以使用

var gl = renderer.getContext();

获取WebGLRenderingContext

在您的情况下，如果扩展名不存在，请考虑不使用 bokeh2 着色器

否则，由应用程序/框架/代码告诉您需要哪些扩展。我可以想到 3 种方法

1. 理想的方式是让应用在文档中具体化，因为 Bokek2 需要扩展 X、Y 和 Z。

2. 下一个最佳方法是查看代码并查看它在做什么。

3. 另一种方法是覆盖 getExtension，然后 (1) 打印出正在检查哪些扩展，以及 (2) 为某些扩展返回 null并查看代码何时失败。

我真的建议上面的 #2 但对于 #3 你可以这样做

(function() {

  var originalGetExtensionFunction = WebGLRenderingContext.prototype.getExtension;

  // start with this array empty. Once you know which extensions
  // the app is requesting you can then selectively add them here
  // to figure out which ones are required.
  var extensionToReject = [
    "OES_texture_float",
    "OES_texture_float_linear",
  ];

  WebGLRenderingContext.prototype.getExtension = function() {
    var name = arguments[0];
    console.log("app requested extension: " + name); 
    if (extensionToReject.indexOf(name) >= 0) {
      console.log("rejected extension: " + name);
      return null;
    } 
    var ext = originalGetExtensionFunction.apply(this, arguments);
    console.log("extension " + name + " " + (ext ? "found" : "not found"));
    return ext;
  };

}());