WebGL - Géométrie : Un Guide Pour Débutants

Salut à toi, futurs maîtres de WebGL ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde de la géométrie WebGL. En tant que quelqu'un qui enseigne la graphique informatique depuis plus d'une décennie, je peux vous dire que comprendre la géométrie dans WebGL, c'est comme apprendre à peindre avec du code. C'est difficile, mais tellement gratifiant ! Alors, mettons nos manches et plongeons dedans !

Définir la Géométrie Nécessaire

Avant de commencer à créer des graphiques 3D impressionnants, nous devons comprendre ce que signifie la géométrie dans WebGL. En substance, la géométrie est l'ossature de tout ce que nous voyons à l'écran. Elle est composée de points, de lignes et de formes qui forment la structure de nos objets 3D.

Imaginez que vous construisez une maison avec des briques LEGO. Chaque brique représente un point dans l'espace 3D, et lorsque vous connectez ces points, vous créez des arêtes et des faces. C'est exactement ce que nous faisons dans WebGL, mais avec du code而不是用塑料积木！

Commençons par un exemple simple - créer un triangle :

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

Ici, nous avons défini trois points dans l'espace 3D. Chaque point est représenté par trois nombres (x, y, z). Cet tableau de nombres est ce que nous utiliserons pour dire à WebGL où dessiner notre triangle.

Objets de Buffer

Maintenant que nous avons notre géométrie définie, nous avons besoin d'un moyen d'envoyer ces données au GPU. C'est là que les objets de buffer entrent en jeu. Pensez aux objets de buffer comme des contenants spéciaux qui gardent nos données de géométrie et les rendent facilement accessibles au GPU.

Créer un Buffer

Créer un buffer est notre première étape dans la préparation de notre géométrie pour le GPU. Voici comment nous le faisons :

const buffer = gl.createBuffer();

Cette ligne crée un objet de buffer vide. C'est comme avoir une boîte vide prête à être remplie avec nos briques LEGO.

Lier le Buffer

Après avoir créé le buffer, nous devons dire à WebGL que c'est le buffer avec lequel nous voulons travailler. Nous faisons cela en liant le buffer :

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

C'est comme拾起我们的LEGO盒子并说：“嘿，WebGL，我现在要在盒子里放一些积木！”

Passer les Données dans le Buffer

Maintenant vient la partie passionnante - remplir notre buffer avec nos données de géométrie :

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Décomposons cela :

• gl.bufferData() est la méthode que nous utilisons pour remplir le buffer.
• gl.ARRAY_BUFFER indique à WebGL que nous travaillons avec notre buffer lié actuellement.
• new Float32Array(triangleVertices) convertit notre tableau JavaScript en un tableau typé (plus sur cela dans un moment).
• gl.STATIC_DRAW est un indice à WebGL sur la manière dont nous prévoyons d'utiliser ces données.

Tableaux Typés

Vous vous demandez peut-être pourquoi nous avons utilisé Float32Array dans l'étape précédente. Eh bien, WebGL est très exigeant concernant ses types de données. Il préfère travailler avec des tableaux typés pour l'efficacité. Les tableaux typés assurent que chaque morceau de données a une taille et un type cohérents.

Voici un tableau des tableaux typés couramment utilisés dans WebGL :

Tableau Typé	Description	Cas d'Utilisation
Float32Array	Nombres à virgule flottante de 32 bits	Positions des sommets, coordonnées de textures
Int8Array	Entiers signés de 8 bits	Petits nombres entiers
Uint8Array	Entiers non signés de 8 bits	Composants de couleur
Int16Array	Entiers signés de 16 bits	Nombres entiers plus grands
Uint16Array	Entiers non signés de 16 bits	Indices des sommets
Int32Array	Entiers signés de 32 bits	Très grands nombres entiers
Uint32Array	Entiers non signés de 32 bits	Très grands nombres entiers positifs

Dans notre cas, nous avons utilisé Float32Array car nos positions de sommets sont des nombres à virgule flottante.

Déslier les Buffers

Après avoir terminé de travailler avec un buffer, il est bon de pratique de le déslier :

gl.bindBuffer(gl.ARRAY_BUFFER, null);

C'est comme remettre la boîte LEGO sur l'étagère. Cela empêche les modifications accidentelles de notre buffer et garde notre état WebGL propre.

Et voilà, les amis ! Nous avons réussi à définir notre géométrie, créer un buffer, remplir celui-ci avec des données et appris sur les tableaux typés. Cela constitue la base de la création de n'importe quel objet 3D dans WebGL.

N'oubliez pas, apprendre WebGL est un voyage. Ne vous inquiétez pas si certains concepts semblent difficiles au départ. Avec de la pratique, vous serez bientôt capable de créer des graphiques 3D incroyables ! Dans mes années d'enseignement, j'ai vu des centaines d'étudiants passer de débutants confus à des maîtres de WebGL. Vous êtes bien sur le chemin pour rejoindre leurs rangs !

Dans notre prochaine leçon, nous explorerons comment utiliser ces buffers pour vraiment dessiner notre géométrie à l'écran. Préparez-vous à voir votre premier triangle WebGL prendre vie ! Jusque-là, bon codage, et n'oubliez pas de faire des pauses et d'étirer vos doigts de codage !

Credits: Image by storyset