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.