Détecter WebGL

Dans cet exemple, on voit comment détecter un contexte de rendu WebGL et afficher le résultat à l'utilisateur.

Détecter le support WebGL

Dans ce premier exemple, on vérifie si le navigateur prend en charge WebGL. Pour cela, on essaye d'obtenir le contexte de rendu WebGL à partir d'un élément canvas. Le contexte de rendu WebGL est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.

La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à WebGL. Les autres {̣{Glossary("API")}} graphiques comme le contexte de rendu 2D du canevas. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.

<p>[ On affichera ici le résultat de la détection du support WebGL ]</p>
<button>Cliquez ici pour détecter WebGLRenderingContext</button>

body {
  text-align : center;
}
button {
  display : block;
  font-size : inherit;
  margin : auto;
  padding : 0.6em;
}

// On exécute tout dans le gestionnaire d'événement
// correspondant au chargement de la fenêtre. De cette
// façon, le DOM est complètement chargé et mis en forme
// avant de le manipuler.
window.addEventListener("load", function() {
  var paragraph = document.querySelector("p"),
    button = document.querySelector("button");

  // On ajoute un gestionnaire d'événement pour 
  // le clic sur le bouton
  button.addEventListener("click", detectWebGLContext, false);
  function detectWebGLContext () {

    // On crée un élément canvas. Le canvas n'est pas
    // ajouté au document et il n'est donc jamais
    // affiché dans la fenêtre du navigateur
    var canvas = document.createElement("canvas");

    // On récupère le contexte WebGLRenderingContext 
    // depuis l'élément canvas.
    var gl = canvas.getContext("webgl")
      || canvas.getContext("experimental-webgl");

    // On affiche le résultat.
    if (gl && gl instanceof WebGLRenderingContext) {
      paragraph.innerHTML =
        "Félicitations, votre navigateur supporte WebGL.";
    } else {
      paragraph.innerHTML = "Échec du contexte WebGL. "
        + "Votre navigateur peut ne pas supporter WebGL.";
    }
  }
}, false);

Le code source de cet exemple est également disponible sur GitHub.