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.

html

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

css

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.