WebGL - Basics: A Friendly Introduction for Beginners
Bonjour là-bas, futurs magiciens de WebGL ! Je suis ravi de devenir votre guide sur ce voyage passionnant dans le monde de WebGL. En tant que quelqu'un qui enseigne la graphique informatique depuis des années, j'attends avec impatience de partager la magie de WebGL avec vous. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nousallons commencer från scratch et construire nos connaissances étape par étape. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et plongeons dedans !
Qu'est-ce que WebGL ?
Avant de plonger dans les détails, comprenons ce qu'est WebGL. WebGL (Web Graphics Library) est une puissante API JavaScript qui nous permet de créer des graphiques 3D époustouflants directement dans nos navigateurs web. C'est comme avoir un mini-studio de cinéma à vos doigts !
Pensez à WebGL comme un pont entre votre navigateur web et le matériel graphique de votre ordinateur. Il nous permet d'utiliser la puissance de votre GPU (Graphics Processing Unit) pour rendre des scènes 3D complexes avec une performance fluide. Cool, non ?
WebGL - Système de Coordonnées
Maintenant, parlons du système de coordonnées WebGL. Imaginez que vous vous trovatez au milieu d'un énorme cube 3D invisible. C'est essentiellement ce qu'est le système de coordonnées WebGL !
Le Système de Coordonnées Cartésiennes
WebGL utilise un système de coordonnées cartésiennes 3D. C'est similaire au système 2D que vous avez peut-être appris en mathématiques, mais avec une dimension supplémentaire :
- Axe X : Horizontal (gauche à droite)
- Axe Y : Vertical (dessous vers le haut)
- Axe Z : Profondeur (derrière vers l'avant)
Voici un exemple simple pour vous aider à le visualiser :
// Définir un sommet (point dans l'espace 3D)
var vertex = [
0.5, // Coordonnée X
0.7, // Coordonnée Y
0.0 // Coordonnée Z
];Dans cet exemple, nous définissons un point qui est légèrement à droite (0.5) et en haut (0.7) du centre, et directement à la surface de l'écran (0.0).
L'Espace de Coupe
Une particularité de WebGL est qu'il utilise une plage de coordonnées spéciale appelée "espace de coupe". Toutes les coordonnées doivent se situer entre -1.0 et 1.0 sur chaque axe. Tout ce qui dépasse cette plage est "coupé" (non dessiné).
// Un point dans le coin supérieur droit de l'espace de coupe
var cornerPoint = [1.0, 1.0, 0.0];
// Un point qui sera coupé (non visible)
var clippedPoint = [1.5, 0.5, 0.0];Graphiques WebGL
Maintenant que nous comprenons le système de coordonnées, parlons de la façon dont WebGL dessine réellement les choses.
Primitives
WebGL dessine tout en utilisant des formes simples appelées primitives. Les trois principaux types sont :
- Points
- Lignes
- Triangles
Voici un tableau résumant ces primitives :
| Primitive | Description | Cas d'Utilisation |
|---|---|---|
| Points | Pixels individuels | Effets de particules, étoiles |
| Lignes | Lignes droites entre les points | Wireframes, graphiques |
| Triangles | Formes à trois points | La plupart des modèles 3D, terrains |
Voyons comment nous pourrions définir un triangle simple :
var triangleVertices = [
0.0, 0.5, 0.0, // Point supérieur
-0.5, -0.5, 0.0, // Point inférieur gauche
0.5, -0.5, 0.0 // Point inférieur droit
];Ce code définit les trois points d'un triangle. Chaque point est représenté par trois nombres (x, y, z).
Buffers
Pour vraiment obtenir notre triangle à l'écran, nous devons utiliser quelque chose appelé un buffer. Pensez à un buffer comme un conteneur qui garde nos données de sommet et les envoie au GPU.
Voici comment nous pourrions créer et remplir un buffer :
// Créer un buffer
var buffer = gl.createBuffer();
// Lier le buffer (le rendre actif)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// Remplir le buffer avec nos données de triangle
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);Ne vous inquiétez pas si cela paraît un peu confus pour le moment. Nous allons le décomposer plus en détail à mesure que nous progressons !
Programmes de Shaders
Maintenant, nous en arrivons à la partie vraiment passionnante : les shaders ! Les shaders sont des programmes spéciaux qui s'exécutent sur votre GPU. Ils sont comme de petites usines qui traitent chaque sommet et pixel de votre scène 3D.
Types de Shaders
Il existe deux principaux types de shaders dans WebGL :
- Shaders de Sommet : Traiter chaque sommet (point) dans votre scène 3D
- Shaders de Fragment : Déterminent la couleur de chaque pixel
Voici un exemple simple de chaque type :
// Shader de Sommet
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
// Shader de Fragment
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Couleur rouge vive
}Le shader de sommet prend chaque point (sommet) et décide où il doit être à l'écran. Le shader de fragment colore ensuite tous les pixels entre ces points.
Compilation et Liaison des Shaders
Pour utiliser nos shaders, nous devons les compiler et les lier dans un programme :
// Créer un programme de shader
var program = gl.createProgram();
// Attacher et compiler les shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Lier le programme
gl.linkProgram(program);Ce processus est comme compiler et lier un programme régulier, mais il se produit sur le GPU !
Variables de l'OpenGL ES SL
Enfin, parlons de quelques variables spéciales utilisées dans le Language de Shader OpenGL ES (le langage dans lequel nos shaders sont écrits).
Attributs
Les attributs sont des variables d'entrée utilisées dans les shaders de sommet. Ils contiennent généralement des données sur chaque sommet, comme la position ou la couleur.
attribute vec4 a_position;Uniformes
Les uniformes sont des variables globales qui restent les mêmes pour tous les sommets et fragments. Ils sont parfaits pour des choses comme les matrices de transformation ou les informations d'éclairage.
uniform mat4 u_modelViewMatrix;Varyings
Les varyings sont des variables qui passent des données du shader de sommet au shader de fragment. Ils sont interpolés entre les sommets.
varying vec4 v_color;Voici un tableau résumant ces types de variables :
| Type de Variable | Utilisé Dans | Objectif |
|---|---|---|
| Attribut | Shader de Sommet | Données par sommet |
| Uniforme | Les deux | Données globales |
| Varying | Les deux | Données passées du shader de sommet au shader de fragment |
Et voilà ! Nous avons couvert les bases de WebGL, des coordonnées aux shaders. Souvenez-vous, apprendre WebGL est comme apprendre à peindre - cela prend de la pratique et de la patience. Ne soyez pas découragé si cela ne vous vient pas tout de suite. Continuez à expérimenter, et bientôt vous serez capable de créer des graphiques 3D époustouflants dans votre navigateur !
Bonne programmation, futurs maîtres de WebGL !
Credits: Image by storyset