WebGL - Dessiner un Quadrilatère
Bonjour, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du WebGL, où nous allons apprendre à dessiner un quadrilatère (ou "quad" pour faire court). Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider à chaque étape avec la patience d'un enseignant chevronné qui a aidé des centaines d'étudiants comme vous.
Qu'est-ce que WebGL ?
Avant de plonger dans le dessin des quads, penchons-nous un instant sur ce qu'est WebGL. WebGL (Web Graphics Library) est une API JavaScript puissante qui nous permet de créer des graphiques 2D et 3D époustouflants dans les navigateurs web. C'est comme avoir un pinceau magique qui peut donner vie à votre imagination sur une page web !
Étapes pour Dessiner un Quadrilatère
Maintenant, décomposons le processus de dessiner un quad en étapes gérables. Pensez-y comme construire une maison - nous allons commencer par les fondations et monter progressivement.
Étape 1 : Configurer le Canvas HTML
Tout d'abord, nous avons besoin d'un canevas sur lequel dessiner. En HTML, nous utilisons l'élément <canvas>. C'est comme préparer un chevalet pour la peinture.
<canvas id="myCanvas" width="600" height="400">
Votre navigateur ne supporte pas la balise HTML5 canvas.
</canvas>Étape 2 : Initialiser le Contexte WebGL
Ensuite, nous devons obtenir notre contexte WebGL. C'est comme拾起我们的神奇WebGL画笔。
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL non supporté, recours à experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Votre navigateur ne supporte pas WebGL');
}Étape 3 : Créer le Shader de Vertex
Maintenant, nous allons créer un shader de vertex. Cela indique à WebGL où dessiner les coins de notre quad.
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);Étape 4 : Créer le Shader de Fragment
Le shader de fragment détermine la couleur de notre quad. Faisons-le d'un bleu joyeux !
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);Étape 5 : Créer et Lier le Programme
Maintenant, nous allons créer un programme et lier nos shaders à celui-ci. C'est comme assembler notre pinceau et notre peinture.
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);Étape 6 : Créer un Tampon et Charger les Données du Vertex
Il est temps de définir les coins de notre quad !
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);Étape 7 : Connecter le Tampon de Position à l'Attribut
Nous devons indiquer à WebGL comment lire nos données de position.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);Étape 8 : Dessiner le Quadrilatère
Enfin, le moment que nous attendions - dessinons notre quad !
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);Exemple - Dessiner un Quadrilatère
Maintenant, mettons tout ensemble dans un exemple complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Quad</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Votre navigateur ne supporte pas la balise HTML5 canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('Votre navigateur ne supporte pas WebGL');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>Et voilà ! Votre propre quad WebGL. Lorsque vous ouvrez ce fichier HTML dans un navigateur, vous devriez voir un quadrilatère bleu sur le canevas.
Conclusion
Félicitations pour avoir dessiné votre premier quadrilatère WebGL ! Nous avons couvert beaucoup de terrain aujourd'hui, de la configuration du canevas à la création des shaders et enfin le dessin de notre forme. Souvenez-vous, apprendre WebGL est comme apprendre à peindre - cela nécessite de la pratique et de la patience. Ne soyez pas découragé si cela ne fonctionne pas immédiatement. Continuez à expérimenter, et bientôt vous serez capable de créer des graphiques 3D époustouflants sur le web !
Dans notre prochaîne leçon, nous explorerons comment ajouter de l'interactivité à nos créations WebGL. Jusque-là, bon codage !
Credits: Image by storyset