必需的WebGL扩展检测

Question

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

问题是：

我面临的问题是要知道我的应用程序所需的插件是什么，有什么方法可以自动检测它们吗？

更多详细信息：

关于进一步的细节，我将指定一个我需要什么的例子：

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

通过查看支持的WebGL扩展列表，我发现与Mac相比，联想缺少了一些扩展，所以我如何判断如果缺少了哪个扩展就会破坏WebGL应用程序。

这是我在mac和联想的分机列表。

在我的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着色器

否则，就由应用程序/框架/代码来告诉您需要哪些扩展。我能想出三种方法

1. 理想的方法是在文档中指定应用程序，就像Bokek2需要扩展X、Y和Z一样。
2. 下一个最好的方法是只查看代码，看看它在做什么。
3. 另一种方法是重写getExtension，然后(1)打印出正在检查的扩展，(2)返回某些扩展的null，并查看代码何时失败。

我真的建议上面的第二条，但是对于第三条，你可以这样做

(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;
  };

}());