Required WebGL extensions detection

Question

I am working on a WebGL (using ThreeJs) application that, obviously, shows 3D models, and we are using some effects (shaders), looking to make a test to know whether the user can run the app or not, I find a way to retrieve a list of the supported plugins in the used browser.

The Question:

the problem that I am facing is rather to know what are the required plugins for my application, is there a way to automatically detect them?

---

More details:

for further details I would specify an example of what I need:

1. In my MacBook Pro under Mac OSX Maverix, the application is working fine
2. Testing the application on my Lenovo Laptop, under Windows 7, then Windows 8, the application is not working, and the problem is cause by the Bokeh2 Shader.

Examining the list of supported WebGL extensions I've found that there are some extension that are missing in Lenovo compared to Mac, so how can I tell which are the required extension that if missing will break the WebGL app.

This is a list of the extension I have in both, mac and lenovo.

In my 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

In my Lenovo:

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

The missing ones in Lenovo:

OES_texture_float_linear

WEBKIT_WEBGL_depth_texture

WEBGL_draw_buffers

Answer 1

You can check for an extension by asking for it

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

For three.js you can use

var gl = renderer.getContext();

To get the WebGLRenderingContext

In your case if the extension does not exist consider not using the bokeh2 shader

Otherwise, it's up to the app/framework/code to tell you which extensions are needed. I can think of 3 ways off the top of my head

1. The ideal way would be for the app to specific in the docs as in Bokek2 needs extensions X, Y, and Z.

2. The next best way would be to just look through the code and see what it's doing.

3. One other way would be to override getExtension and then (1) print out which extensions are being checked for and (2) return null for certain extensions and see when the code fails.

I'd really suggest #2 above but for #3 you could do this

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

}());