检测WebGL支持的正确方法？

Question

我试图检测跨多个浏览器的WebGL支持,我遇到了以下情况.即使访问者的视频卡被黑名单和/或WebGL被禁用,当前版本的Firefox似乎也会使用以下检查报告正面支持:

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

我已尝试使用以下步骤指示我的用户启用WebGL.这在某些情况下有效,但并非总是如此.显然,这不是我可以向公众要求的东西:

1. 在Firefox的地址栏中键入about:config
2. 要启用WebGL,请将webgl.force-enabled设置为true

这使我创建了自己的检测支持方法,它使用jQuery注入canvas元素来检测支持.这引出了我在各种WebGL库和插件中发现的许多技术.麻烦的是,测试非常困难(对以下链接是否适合您的任何评论都非常感谢!).为了使这成为一个客观的问题,我想知道是否有一种普遍接受的方法来检测所有浏览器的WebGL支持.

测试网址:

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

Answer 1

事实上,优秀的三库具有检测以下内容的机制:

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

该代码段是Detector类的一部分,它还可能向用户显示相应的错误消息.

Answer 2

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

Chromium指向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 3

如http://www.browserleaks.com/webgl#howto-detect-webgl中所示

这是一个适当的javascript函数,用于检测WebGL支持,包含所有类型的实验WebGL上下文名称以及特殊情况的检查,例如通过NoScript或TorBrowser阻止WebGL函数.

它将报告三种WebGL功能状态之一:

• WebGL已启用 - 返回TRUE或返回
• WebGL对象,如果传递了第一个参数
• WebGL被禁用 - 返回FALSE,如果需要,可以更改它>
• WebGL没有得到重视 - 返回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选项).