正确的方法来检测WebGL的支持？(Proper way to detect WebGL suppo

我试图发现在多个浏览器WebGL的支持，我遇到以下情形。 Firefox的当前版本的出现使用下面的检查报告利好支撑，即使访问者的显卡是列入黑名单的和/或WebGL是禁用的：

if (window.WebGLRenderingContext) {
    // This is true in Firefox under certain circumstances,
    // even when WebGL is disabled...
}

我试着指导我的用户使用以下步骤启用的WebGL。 这在某些情况下工作，但并非总是如此。 显然，这不是我可以请广大市民：

1. 在Firefox的地址栏中配置：键入有关
2. 要启用的WebGL，设置webgl.force启用为真

这导致我创造我自己的用于检测的支持方法，它使用jQuery来注入canvas元素检测的支持。 这拉动了一些技术我在各种WebGL的库和插件中。 麻烦的是，它是测试非常困难的（下面的链接是否为你的作品是大加赞赏任何意见！）。 为了使这个客观的问题， 我想知道是否有检测在所有浏览器支持WebGL的一个普遍接受的方式 。

测试网址：

http://jsfiddle.net/Jn49q/5/

Answer 1:

[2014年10月]我已经更新modernizrs例如，以满足他们当前的实现 ，这是从清理版本http://get.webgl.org/下文。

Modernizr的呢，

var canvas;
var ctx;
var exts;

try {
  canvas = createElement('canvas');
  ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  exts = ctx.getSupportedExtensions();
}
catch (e) {
  return;
}

if (ctx !== undefined) {
  Modernizr.webglextensions = new Boolean(true);
}

for (var i = -1, len = exts.length; ++i < len; ){
  Modernizr.webglextensions[exts[i]] = true;
}

canvas = undefined;

铬分http://get.webgl.org/为规范支持实施，

try { gl = canvas.getContext("webgl"); }
catch (x) { gl = null; }

if (gl == null) {
    try { gl = canvas.getContext("experimental-webgl"); experimental = true; }
    catch (x) { gl = null; }
}

Answer 2:

优异的三个库有，实际上，用于检测以下的机制：

1. WebGL的支持
2. 文件API支持
3. 工人支持

对于WebGL的，特别是，这里是所使用的代码：

function webgl_support () { 
   try {
    var canvas = document.createElement('canvas'); 
    return !!window.WebGLRenderingContext &&
      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
   } catch(e) {
     return false;
   }
 };

该代码段是一个的一部分检测器类其也可以显示对应的错误消息给用户。

Answer 3:

曾经出现在http://www.browserleaks.com/webgl#howto-detect-webgl

这是一个正确的JavaScript函数来检测WebGL的支持，各类实验WebGL的上下文名称，并用特殊的情况下，如通过NoScript的或TorBrowser阻挡的WebGL功能检查。

它会报告三种WebGL的能力状态之一：

• WebGL是启用 - 返回TRUE或返回
• WebGL的对象，如果第一个参数传递
• WebGL是禁用 - 返回FALSE，你可以改变它，如果你需要>
• WebGL是不是implimented - 返回FALSE

function webgl_detect(return_context)
{
    if (!!window.WebGLRenderingContext) {
        var canvas = document.createElement("canvas"),
             names = ["webgl2", "webgl", "experimental-webgl", "moz-webgl", "webkit-3d"],
           context = false;

        for(var i=0;i< names.length;i++) {
            try {
                context = canvas.getContext(names[i]);
                if (context && typeof context.getParameter == "function") {
                    // WebGL is enabled
                    if (return_context) {
                        // return WebGL object if the function's argument is present
                        return {name:names[i], gl:context};
                    }
                    // else, return just true
                    return true;
                }
            } catch(e) {}
        }

        // WebGL is supported, but disabled
        return false;
    }

    // WebGL not supported
    return false;
}

Answer 4:

除了@Andrew答案，也有可以支持新的模式。 我已经写了下面的代码片段：

var canvasID = 'webgl',
    canvas = document.getElementById(canvasID),
    gl,
    glExperimental = false;

function hasWebGL() {

    try { gl = canvas.getContext("webgl"); }
    catch (x) { gl = null; }

    if (gl === null) {
        try { gl = canvas.getContext("experimental-webgl"); glExperimental = true; }
        catch (x) { gl = null; }
    }

    if(gl) { return true; }
    else if ("WebGLRenderingContext" in window) { return true; } // not a best way, as you're not 100% sure, so you can change it to false
    else { return false; }
}

更改canvasID根据您的ID变量。

测试在Chrome，Safari，Firefox，Opera和的IE（8至10）。 在Safari浏览器的情况下，请记住，它是可用的，但你需要启用WebGL的明确（支持开发菜单后启用Web GL选项）。

Answer 5:

为了检测支持WebGL的浏览器，但离开了旧的浏览器有可能不支持它以及（如需要的WebGL检测为支持时，它实际上不是用于排除的是Android 4.4.2设备），我增加了更严格的，虽然无关的检查：

function hasWebGL() {
    var supported;

    try {
        var canvas = document.createElement('canvas');
        supported = !! window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
    } catch(e) { supported = false; }

    try {
        // let is by no means required, but will help us rule out some old browsers/devices with potentially buggy implementations: http://caniuse.com/#feat=let
        eval('let foo = 123;');
    } catch (e) { supported = false; }

    if (supported === false) {
        console.log("WebGL is not supported");
    }

    canvas = undefined;

    return supported;
},

Answer 6:

// this code will detect WebGL version until WebGL Version maxVersionTest 
var
maxVersionTest = 5,
canvas = document.createElement('canvas'),
webglVersion = (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')) ? 1 : null,
canvas = null; // free context

// range: if maxVersionTest = 5 makes [5, 4, 3, 2]
Array.apply(null, Array(maxVersionTest - 1))
.map(function (_, idx) {return idx + 2;})
.reverse()
.some(function(version){
    // cant reuse canvas, potential to exceed contexts or mem limit *
    if (document.createElement('canvas').getContext('webgl'+version))
        return !!(webglVersion = version);
});

console.log(webglVersion);

*重“势超过上下文或MEM限制”看到https://bugs.chromium.org/p/chromium/issues/detail?id=226868

Answer 7:

从MDN ：

 // Run everything inside window load event handler, to make sure // DOM is fully loaded and styled before trying to manipulate it. window.addEventListener("load", function() { var paragraph = document.querySelector("p"), button = document.querySelector("button"); // Adding click event handler to button. button.addEventListener("click", detectWebGLContext, false); function detectWebGLContext () { // Create canvas element. The canvas is not added to the // document itself, so it is never displayed in the // browser window. var canvas = document.createElement("canvas"); // Get WebGLRenderingContext from canvas element. var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); // Report the result. if (gl && gl instanceof WebGLRenderingContext) { paragraph.innerHTML = "Congratulations! Your browser supports WebGL."; } else { paragraph.innerHTML = "Failed to get WebGL context. " + "Your browser or device may not support WebGL."; } } }, false); 

 body { text-align : center; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } 

 <p>[ Here would go the result of WebGL feature detection ]</p> <button>Press here to detect WebGLRenderingContext</button> 

文章来源: Proper way to detect WebGL support?