WebGL permet d'utiliser l'API basée sur OpenGL ES 2.0 pour créer un environnement 3D dans l'élément canvas
Cet article va vous donner les bases pour utiliser WebGL. Des notions de mathématiques liés à la 3D sont requises pour bien appréhender les pages suivantes. Cet article ne prétend pas vous apprendre OpenGL en lui même.
Preparer le code de la page internet
La première chose dont vous avez besoin pour créer un environnement 3D est d'un canvas. Le code HTML ci-dessous prépare l'élement canvas et utilise l'évenement onload qui va servir à intialiser le contexte WebGL.
Le texte fournit dans l'élément canvas ne sera affiché que pour les personnes utilisant des navigateurs ne supportant pas cet élément.
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Votre navigateur ne semble pas supporter l'élément HTML5 <code><canvas></code>.
</canvas>
</body>
Préparer le contexte WebGL
La fonction start(), dans le code JavaScript, est appelée quand la page est chargée. Son but est de créer le contexte WebGL et de commencer à dessiner du contenu.
function start() {
var canvas = document.getElementById("glcanvas");
initWebGL(canvas); // Initialise le contexte WebGL
// Continue seulement si le WebGL est disponible et est en train de fonctionner
if (gl) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Met la couleur d'effacement au noir et complétement opaque
gl.enable(gl.DEPTH_TEST); // Active le test de profondeur
gl.depthFunc(gl.LEQUAL); // Les objets proches cachent les objets lointains
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Efface les couleurs et le buffer de profondeur.
}
}
La première chose que nous faisons est d'obtenir une référence vers le canvas que l'on met dans une variable nommée canvas. Évidemment si vous n'avez pas besoin de cette référence continuellement au cours de votre programme, vous pouvez évitez d'enregistrer cette valeur globalement et juste la sauvegarder comme variable locale ou comme attribut d'un objet.
Une fois que l'on a le canvas, on appelle la fonction initWebGL(), cette fonction est définie dans le paragraphe suivant, son but est d'initialiser le contexte WebGL.
Si le contexte est initialisé et fonctionne correctement, la variable gl est une référence vers le contexte WebGL. Alors on met la couleur d'effacement au noir et on efface le contexte suivant cette couleur. Après cela, on active le test de profondeur et on définit que les objets les plus proches vont cacher les objets les plus lointains.
Le code de base est fini. Nous regarderons dans les pages suivantes comment commencer à "dessiner".
Créer le contexte WebGL
La fonction initWebGL() utilisée dans le paragraphe ci-dessus est la suivante :
function initWebGL(canvas) {
// Initialise la variable gloable gl à null
gl = null;
try {
// Essaye de récupérer le contexte standard. En cas d'échec, il teste l'appel experimental
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// Si le contexte GL n'est pas récupéré, on l'indique à l'utilisateur.
if (!gl) {
alert("Impossible d'initialiser le WebGL. Il est possible que votre navigateur ne supporte pas cette fonctionnalité.");
}
}
Pour obtenir le contexte WebGL du canvas, nous tentons de récupérer le contexte standard. En cas d'échec, on essaye de récupérer le contexte nommé "experimental-webgl". Si cela échoue aussi, alors on affiche un message d'erreur indiquant à l'utilisateur qu'il ne peut pas utiliser WebGL.
A la fin de la fonction, la variable gl est soit null (ce qui veut dire que le contexte WebGL est indisponible), soit il contient une référence au contexte WebGL dans laquelle nous allons pouvoir commencer à dessiner.
Désormais, vous avez assez de code pour initialiser avec succès le contexte WebGL, vous devriez obtenir une grande boîte noire qui n'attend de votre part que du contenu à afficher.
Essayer cet exemple en cliquant ici si vous utilisez un navigateur compatible avec WebGL.