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

问题描述

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

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
2. 要启用 WebGL，请将 webgl.force-enabled 设置为 true

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

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

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.

测试网址:

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

推荐答案

[Oct 2014] 我已经更新了 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/ 用于规范支持实现，

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

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屋！