WebGL - Dessiner des Points
Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du WebGL, en nous concentrant sur le dessin de points. En tant que votre professeur d'informatique de quartier, je vais vous guider à travers cette aventure étape par étape. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - nous allons commencer par les bases et progresser pas à pas. Alors, prenez vos crayons virtuels, et plongeons dedans !
Qu'est-ce que WebGL ?
Avant de commencer à dessiner des points, comprenons ce qu'est WebGL. WebGL (Web Graphics Library) est une API JavaScript puissante qui nous permet de créer des graphiques 2D et 3D dans les navigateurs web. C'est comme avoir un pinceau magique qui peut dessiner directement sur votre page web !
Étapes Nécessaires
Pour dessiner des points en utilisant WebGL, nous devons suivre une série d'étapes. Pensez-y comme une recette pour créer une œuvre d'art numérique. Voici un tableau résumant ces étapes :
| Étape | Description |
|---|---|
| 1 | Obtenir l'élément canvas |
| 2 | Obtenir le contexte de rendu WebGL |
| 3 | Définir la géométrie (sommets) |
| 4 | Créer un shader de sommet |
| 5 | Créer un shader de fragment |
| 6 | Créer un programme de shader |
| 7 | Charger les données dans le GPU |
| 8 | Définir la fenêtre de visualisation |
| 9 | Effacer le canvas |
| 10 | Dessiner les points |
Maintenant, analysons chaque étape et voyons comment elles se combinent pour créer notre chef-d'œuvre !
Exemple - Dessiner Trois Points en utilisant WebGL
Passons à un exemple où nous allons dessiner trois points colorés sur notre canvas. Je vais expliquer chaque partie du code en détail, afin que vous compreniez exactement ce qui se passe.
Étape 1 : Configurer le HTML
Tout d'abord, nous devons créer un fichier HTML avec un élément canvas :
<!DOCTYPE html>
<html>
<head>
<title>mes Premiers Points WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Votre navigateur ne supporte pas l'élément canvas.
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>Cela crée un canvas qui sera notre tableau de dessin. Le fichier JavaScript que nous allons créer ensuite accomplira tous les tours !
Étape 2 : Créer le Fichier JavaScript
Maintenant, créons un fichier nommé webgl-points.js et commençons à coder notre application WebGL :
// Étape 1 : Obtenir l'élément canvas
const canvas = document.getElementById('myCanvas');
// Étape 2 : Obtenir le contexte de rendu WebGL
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL non supporté');
throw new Error('WebGL non supporté');
}
// Étape 3 : Définir la géométrie (sommet)
const vertices = new Float32Array([
0.0, 0.5, // Point 1
-0.5, -0.5, // Point 2
0.5, -0.5 // Point 3
]);
// Étape 4 : Créer un shader de sommet
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Étape 5 : Créer un shader de fragment
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Étape 6 : Créer un programme de shader
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Étape 7 : Charger les données dans le GPU
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Étape 8 : Définir la fenêtre de visualisation
gl.viewport(0, 0, canvas.width, canvas.height);
// Étape 9 : Effacer le canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Étape 10 : Dessiner les points
gl.drawArrays(gl.POINTS, 0, 3);Maintenant, analysons ce code et comprenons ce que fait chaque partie :
Comprendre le Code
Étapes 1 et 2 : Préparer WebGL
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');Ici, nous obtenons notre élément canvas et obtenons le contexte de rendu WebGL. C'est comme préparer notre pinceau et notre palette !
Étape 3 : Définir la Géométrie
const vertices = new Float32Array([
0.0, 0.5, // Point 1
-0.5, -0.5, // Point 2
0.5, -0.5 // Point 3
]);Nous définissons trois points dans l'espace 2D. Les coordonnées varient de -1 à 1 dans les directions x et y. Imaginez notre canvas divisé en quatre quadrants, avec (0,0) au centre.
Étapes 4 et 5 : Créer des Shaders
Les shaders sont des programmes spéciaux qui s'exécutent sur le GPU. Nous en avons deux types :
- Shader de Sommet : Détermine la position de nos points.
- Shader de Fragment : Détermine la couleur de nos points.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;Le shader de sommet définit la position et la taille de nos points. Le shader de fragment définit la couleur en rouge (1.0, 0.0, 0.0 en RVB).
Étapes 6 et 7 : Créer le Programme et Charger les Données
Ces étapes consistent à créer un programme de shader et à charger nos données dans la mémoire du GPU.
Étapes 8 et 9 : Préparer la Vue
Nous définissons la fenêtre de visualisation pour correspondre à la taille de notre canvas et effaçons le canvas en noir.
Étape 10 : Dessiner les Points
gl.drawArrays(gl.POINTS, 0, 3);Enfin, nous dessinons nos trois points !
Conclusion
Félicitations ! Vous avez刚刚 created votre première application WebGL qui dessine des points. C'est juste le début de votre voyage dans le monde fascinant de la graphique informatique. En continuant à explorer, vous serez capable de créer des formes plus complexes, ajouter des animations, et même plonger dans la graphique 3D.
N'oubliez pas, apprendre WebGL est comme apprendre à peindre - cela prend de la pratique et de la patience. Ne soyez pas découragé si les choses ne fonctionnent pas parfaitement la première fois. Continuez à expérimenter, et bientôt vous serez capable de créer des chefs-d'œuvre numériques !
Dans notre prochaine leçon, nous allons explorer comment ajouter différentes couleurs à nos points et créer des formes plus complexes. Jusqu'alors, bon codage !
Credits: Image by storyset