2

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

问题：

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

更多细节：

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

  1. 在 Mac OSX Maverix 下的 MacBook Pro 中，该应用程序运行良好
  2. 在我的联想笔记本电脑上测试应用程序，在 Windows 7 和 Windows 8 下，应用程序无法运行，问题是由Bokeh2 Shader 引起的。

检查支持的 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

4

1 回答 1

5

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

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

}());
于 2014-03-04T05:00:47.860 回答