Javascript 检测WebGL支持的正确方法？

Question

提问by Derek Hunziker

I am attempting to detect WebGL support across multiple browsers and I've encountered the following scenario. The current version of Firefox appears to report positive support using the following check, even when the visitor's video card is black-listed and/or WebGL is disabled:

我正在尝试跨多个浏览器检测 WebGL 支持，但我遇到了以下情况。当前版本的 Firefox 似乎使用以下检查报告积极支持，即使访问者的视频卡被列入黑名单和/或 WebGL 被禁用：

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

I've tried instructing my users to enable WebGL using the following steps. This has worked in some cases, but not always. Obviously, this is not something I can request of the general public:

我已经尝试指导我的用户使用以下步骤启用 WebGL。这在某些情况下有效，但并非总是如此。显然，这不是我可以向公众提出的要求：

Type about:configin Firefox's address bar
To enable WebGL, set webgl.force-enabledto true

类型配置：关于在Firefox的地址栏
要启用 WebGL，请将webgl.force-enabled设置为 true

This has led me to create my own method for detecting support, which uses jQuery to inject a canvas element to detect support. This pulls on a number of techniques I found in various WebGL libraries and plugins. The trouble is, it is extremely difficult to test (any comments on whether the link below works for you are much appreciated!). To make this an objective question, I would like to know if there's a universally accepted way to detect WebGL support across all browsers.

这促使我创建了自己的检测支持的方法，该方法使用 jQuery 注入画布元素来检测支持。这利用了我在各种 WebGL 库和插件中发现的许多技术。问题是，测试极其困难（非常感谢您对以下链接是否适合您的任何评论！）。为了使这个问题成为一个客观的问题，我想知道是否有一种普遍接受的方法来检测所有浏览器对 WebGL 的支持。

TEST URL:

测试网址：

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

Answer 1

采纳答案by Andrew

[Oct 2014]I've updated modernizrs example to match their current implementation, which is a cleaned up version from http://get.webgl.org/further below.

[ 2014 年 10 月]我已经更新了 Modernizrs 示例以匹配他们当前的实现，这是来自http://get.webgl.org/进一步下面的清理版本。

Modernizrdoes,

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;

Chromiumpoints to http://get.webgl.org/for the canonical support implementation,

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 2

回答by oabarca

The excellent Three library has, in fact, a mechanism for detecting the following:

优秀的 Three 库实际上具有检测以下内容的机制：

WebGL support
File API support
Workers support

WebGL 支持
文件 API 支持
工人支持

For WebGL, particularly, here is the code that is used:

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

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

That code snippet is part of a Detectorclass which may also display the corresponding error messages to the user.

该代码片段是Detector类的一部分，该类还可以向用户显示相应的错误消息。

Answer 3

回答by Juan Arias

As seen in http://www.browserleaks.com/webgl#howto-detect-webgl

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

This is a proper javascript function to detect WebGL support, with all kind of experimental WebGL context names and with checking of special cases, such as blocking WebGL functions by NoScript or TorBrowser.
It will report one of the three WebGL capability states:
WebGL is enabled — return TRUE, or return
WebGL object, if the first argument was passed
WebGL is disabled — return FALSE, you can change it if you need>
WebGL is not implimented — return FALSE

这是一个合适的 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

回答by Karol

In addition to @Andrew answer, there is also experimental mode which can be supported. I have written following snippet of code:

除了@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; }
}

Change canvasIDvariable according to your ID.

canvasID根据您的 ID更改变量。

Tested on Chrome, Safari, Firefox, Opera and IEs (8 to 10). In case of Safari remember that it's available, but you need to enable WebGL explicitly (enable the developer menu and enable Web GL option after).

在 Chrome、Safari、Firefox、Opera 和 IE（8 到 10）上测试。在 Safari 的情况下，请记住它是可用的，但您需要明确启用 WebGL（启用开发人员菜单并在之后启用 Web GL 选项）。

Answer 5

回答by Jose Gómez

In order to detect browsers that support WebGL, but leaving out older browsers with may not support it well (as needed in WebGL detected as supported when it is actually notfor ruling out Android 4.4.2 devices), I am adding a tighter, though unrelated check:

为了检测支持 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

回答by ekerner

// 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);

* re "potential to exceed contexts or mem limit" see https://bugs.chromium.org/p/chromium/issues/detail?id=226868

* 关于“可能超出上下文或内存限制”，请参阅 https://bugs.chromium.org/p/chromium/issues/detail?id=226868

Answer 7

回答by Tomasz Mularczyk

From MDN:

来自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>

Javascript 检测WebGL支持的正确方法？

提问by Derek Hunziker

采纳答案by Andrew

回答by oabarca

回答by Juan Arias

回答by Karol

回答by Jose Gómez

回答by ekerner

回答by Tomasz Mularczyk

相关推荐

最近更新

标签

Javascript 检测WebGL支持的正确方法？

提问by Derek Hunziker

采纳答案by Andrew

回答by oabarca

回答by Juan Arias

回答by Karol

回答by Jose Gómez

回答by ekerner

回答by Tomasz Mularczyk

相关推荐

带有前导零的 Javascript parseInt()

Javascript 异步构造函数

Javascript 如何在浏览器上检查真正的触摸支持

Javascript 在 d3.js 中将标签放置在节点的中心

相关推荐

最近更新

标签