必需的WebGL扩展检测

Question

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

问题:

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

---

更多细节:

有关详细信息,我将指出我需要的示例:

1. 在Mac OSX Maverix下的MacBook Pro中,应用程序运行正常
2. 在我的联想笔记本电脑上测试应用程序,在Windows 7下,然后是Windows 8,该应用程序无法正常工作,问题是由Bokeh2 Shader 引起的.

检查支持的WebGL扩展列表我发现,与Mac相比,联想中缺少一些扩展,因此我怎么知道哪些扩展如果丢失将破坏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着色器

否则,由app/framework /代码决定是否需要哪些扩展.我可以想到三个方面

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

}());