WebGL - Aperçu du Canvas HTML5

Bonjour, futurs magiciens de la graphique web ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de WebGL et du Canvas HTML5. En tant que votre gentil voisin prof de informatique, je suis ravi de vous guider à travers cette aventure. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser pas à pas. Alors, prenez votre pinceau virtuel, et c'est parti !

WebGL - Html5 Canvas Overview

HTML5 Canvas

Qu'est-ce que le HTML5 Canvas ?

Imaginez que vous avez un canevas magique numérique sur lequel vous pouvez dessiner ce que vous voulez en utilisant du code. C'est essentiellement ce qu'est le HTML5 Canvas ! C'est un élément puissant introduit dans HTML5 qui nous permet de dessiner des graphiques, de créer des animations, et même de construire des jeux directement dans nos navigateurs web.

Créer votre premier Canvas

Commençons par créer un simple HTML5 Canvas :

<!DOCTYPE html>
<html>
<head>
<title>Mon Premier Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

Dans cet exemple, nous avons créé un élément canvas avec un id de "myCanvas", une largeur de 400 pixels et une hauteur de 200 pixels. C'est comme installer un chevalet avec un canevas vierge - maintenant, nous sommes prêts à peindre !

Dessiner sur le Canvas

Maintenant que nous avons notre canevas, dessinons quelque chose dessus. Nous allons utiliser JavaScript pour cela :

<!DOCTYPE html>
<html>
<head>
<title>Dessiner sur le Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'bleu';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

Reprenons cela :

Nous obtenons une référence à notre élément canvas en utilisant getElementById.
Nous obtenons le contexte de rendu 2D du canvas en utilisant getContext('2d').
Nous définissons la couleur de remplissage en bleu en utilisant fillStyle.
Enfin, nous dessinons un rectangle bleu en utilisant fillRect(x, y, largeur, hauteur).

Lorsque vous ouvrez cela dans votre navigateur, vous verrez apparaître un rectangle bleu sur votre canevas. Félicitations ! Vous venez de créer votre première peinture numérique !

Le Contexte de Rendu

Qu'est-ce qu'un Contexte de Rendu ?

Pensez au contexte de rendu comme à votre ensemble d'outils de peinture. Il fournit les méthodes et propriétés qui vous permettent de dessiner sur le canevas. Dans l'exemple précédent, nous avons utilisé le contexte de rendu 2D, mais il en existe d'autres également.

Contexte de Rendu 2D

Le contexte de rendu 2D est le plus couramment utilisé et offre une large gamme de fonctions de dessin 2D. Voici un tableau de quelques méthodes utiles du contexte 2D :

Méthode	Description
fillRect(x, y, largeur, hauteur)	Dessine un rectangle rempli
strokeRect(x, y, largeur, hauteur)	Dessine le contour d'un rectangle
fillText(texte, x, y)	Dessine du texte rempli sur le canevas
strokeText(texte, x, y)	Dessine le contour du texte sur le canevas
beginPath()	Commence un nouveau chemin
moveTo(x, y)	Déplace le chemin au point spécifié
lineTo(x, y)	Dessine une ligne jusqu'au point spécifié
arc(x, y, rayon, angleDeDépart, angleDeFin)	Dessine un arc ou un cercle

Utilisons certaines de ces méthodes pour créer un dessin plus complexe :

<!DOCTYPE html>
<html>
<head>
<title>Dessin Complex</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Dessiner une maison
ctx.fillStyle = 'brun';
ctx.fillRect(100, 100, 150, 100);

// Dessiner un toit
ctx.fillStyle = 'rouge';
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fill();

// Dessiner une porte
ctx.fillStyle = 'jaune';
ctx.fillRect(160, 150, 30, 50);

// Dessiner du texte
ctx.fillStyle = 'noir';
ctx.font = '20px Arial';
ctx.fillText('Ma Maison', 140, 190);
</script>
</body>
</html>

Dans cet exemple, nous avons dessiné une maison simple en utilisant diverses méthodes de contexte 2D. Nous avons utilisé fillRect pour le corps de la maison et la porte, beginPath, moveTo, et lineTo pour le toit, et fillText pour ajouter une étiquette. Jouez avec les coordonnées et les couleurs pour créer votre propre maison unique !

Contexte WebGL

Introduction à WebGL

Passons maintenant à l'excitant monde de la graphique 3D avec WebGL. WebGL (Web Graphics Library) est une API JavaScript pour le rendu de graphiques interactifs 3D et 2D dans n'importe quel navigateur compatible, sans utiliser de plugins.

Obtenir le Contexte WebGL

Pour utiliser WebGL, nous devons obtenir le contexte de rendu WebGL au lieu du contexte 2D. Voici comment :

<!DOCTYPE html>
<html>
<head>
<title>Contexte WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL non pris en charge, recours à experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Votre navigateur ne prend pas en charge WebGL');
}
</script>
</body>
</html>

Dans cet exemple, nous essayons d'obtenir le contexte WebGL. Si ce n'est pas pris en charge, nous recourons au contexte experimental-webgl. Si celui-ci n'est pas non plus disponible, nous alertons l'utilisateur que leur navigateur ne prend pas en charge WebGL.

Un Exemple Simple de WebGL

Créons un exemple simple de WebGL qui efface le canevas avec une couleur :

<!DOCTYPE html>
<html>
<head>
<title>WebGL Simple</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL non pris en charge, recours à experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Votre navigateur ne prend pas en charge WebGL');
} else {
// Définir la couleur d'effacement en rouge, opaque
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// Effacer le tampon de couleur avec la couleur spécifiée
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

Dans cet exemple, nous définissons la couleur d'effacement en rouge en utilisant gl.clearColor(rouge, vert, bleu, alpha), où chaque valeur varie de 0.0 à 1.0. Ensuite, nous effaçons le tampon de couleur avec cette couleur en utilisant gl.clear(gl.COLOR_BUFFER_BIT). Lorsque vous exécutez cela, vous devriez voir un canevas rouge.

N'oubliez pas que WebGL est bien plus complexe que le rendu de canevas 2D et implique des concepts comme les shaders, les tampons et les matrices. Mais ne vous inquiétez pas ! Nous explorerons ces éléments dans les leçons futures.

Conclusion

Félicitations ! Vous avez fait vos premiers pas dans le monde du HTML5 Canvas et de WebGL. Nous avons couvert les bases de la création d'un canevas, du dessin en 2D, et nous avons même touché au monde 3D de WebGL.

N'oubliez pas, apprendre la programmation graphique est comme apprendre à peindre - cela nécessite de la pratique et de la patience. N'ayez pas peur d'expérimenter avec les exemples de code, de modifier des valeurs et de voir ce qui se passe. Plus vous jouerez avec, mieux vous comprendrez comment tout fonctionne.

Dans notre prochaine leçon, nous plongerons plus profondément dans des techniques avancées de canevas 2D et commencerons à explorer le monde fascinant des shaders WebGL. En attendant, continuez de coder et amusez-vous à dessiner !

Credits: Image by storyset