Comment détecter correctement le support WebGL ?

Question

Je tente de détecter la prise en charge de WebGL sur plusieurs navigateurs et j'ai rencontré le scénario suivant. La version actuelle de Firefox semble signaler une prise en charge positive en utilisant la vérification suivante, même lorsque la carte vidéo du visiteur est sur liste noire et/ou que WebGL est désactivé :

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

J'ai essayé de demander à mes utilisateurs d'activer WebGL en suivant les étapes suivantes. Cela a fonctionné dans certains cas, mais pas toujours. Évidemment, ce n'est pas quelque chose que je peux demander au grand public :

1. Type about:config dans la barre d'adresse de Firefox
2. Pour activer WebGL, définissez webgl.force-enabled à vrai

Cela m'a conduit à créer ma propre méthode de détection du support, qui utilise jQuery pour injecter un élément de toile afin de détecter le support. Cette méthode s'inspire d'un certain nombre de techniques que j'ai trouvées dans diverses bibliothèques et plugins WebGL. Le problème est qu'il est extrêmement difficile de la tester (tout commentaire sur le fonctionnement du lien ci-dessous sera apprécié !) Pour en faire une question objective, J'aimerais savoir s'il existe une méthode universellement acceptée pour détecter le support de WebGL sur tous les navigateurs. .

URL DU TEST :

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

Answer 1

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

Answer 2

De 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>