正确的方法来检测WebGL支持？ [英] Proper way to detect WebGL support?

问题描述

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

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:

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

我试着指示我的用户使用以下步骤启用WebGL。这在某些情况下有效，但并不总是如此。显然，这不是我可以请求的公众：

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:

1. 在Firefox的地址中键入 about：config bar


2. 要启用WebGL，请将启用了webgl.force的设置为true

1. Type about:config in Firefox’s address bar
2. To enable WebGL, set webgl.force-enabled to true

$ b b

这导致我创建自己的检测支持的方法，它使用jQuery注入一个canvas元素来检测支持。这牵扯了我在各种WebGL库和插件中发现的一些技术。麻烦的是，它是非常难以测试（任何关于以下链接是否为您感谢的评论）。为了使这是一个客观的问题，我想知道是否有一个普遍接受的方法来检测所有浏览器的WebGL支持。

TEST URL ：

TEST URL:

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

推荐答案

[ 2014年10月] 我更新了modernizrs示例以匹配当前实施，这是从http://get.webgl.org/ 。

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

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

这篇关于正确的方法来检测WebGL支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！