WebGL - Modes de Dessin

Bonjour, futurs mage de WebGL ! ? Aujourd'hui, nous allons plonger dans le monde passionnant des modes de dessin dans WebGL. En tant que votre enseignant en informatique du coin, je suis là pour vous guider dans ce voyage, même si vous n'avez jamais écrit une ligne de code auparavant. Alors, prenez votre pinceau virtuel, et créons des œuvres numériques !

Le paramètre mode

Avant de commencer à dessiner, parlons de l'étoile de notre spectacle : le paramètre mode. Pensez-y comme une baguette magique qui indique à WebGL comment relier les points (ou dans notre cas, les sommets) pour créer des formes et des motifs différents.

Dans WebGL, lorsque nous appelons les fonctions gl.drawArrays() ou gl.drawElements(), nous devons spécifier un paramètre mode. Ce paramètre est comme donner des instructions à un puzzle de relier les points - il indique à WebGL comment joindre les points que nous avons définis.

Voici un tableau des différents modes de dessin disponibles dans WebGL :

Mode	Description
gl.POINTS	Dessine un point pour chaque sommet
gl.LINES	Dessine une ligne entre chaque paire de sommets
gl.LINE_STRIP	Dessine une ligne continue reliant les sommets
gl.LINE_LOOP	Similaire à LINE_STRIP, mais ferme la forme
gl.TRIANGLES	Dessine un triangle pour chaque groupe de trois sommets
gl.TRIANGLE_STRIP	Dessine un groupe connecté de triangles
gl.TRIANGLE_FAN	Dessine une forme en éventail de triangles connectés

Ne vous inquiétez pas si cela semble confus maintenant. Nous explorerons chacun d'eux avec des exemples au fur et à mesure !

Exemple - Dessiner Trois Lignes Parallèles

Commençons par un exemple simple : dessiner trois lignes parallèles. Cela nous aidera à comprendre comment fonctionne le paramètre mode en pratique.

// Premièrement, configurons notre contexte WebGL
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// Maintenant, définissons notre shader de sommet
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

// Et notre shader de fragment
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Couleur rouge
}
`;

// Créons et compilons les shaders (ne vous inquiétez pas, nous expliquerons cela en détail dans les leçons futures)
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);

// Créons un programme et liasons les shaders
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Définissons les positions de nos lignes
const positions = new Float32Array([
-0.8, -0.8,  // Début de la ligne 1
-0.8,  0.8,  // Fin de la ligne 1
-0.3, -0.8,  // Début de la ligne 2
-0.3,  0.8,  // Fin de la ligne 2
0.2, -0.8,  // Début de la ligne 3
0.2,  0.8   // Fin de la ligne 3
]);

// Créons un tampon et mettons les positions dedans
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// Indiquons à WebGL comment lire le tampon et l'attribuer à `a_position`
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Nettoçons le canevas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Dessinons les lignes
gl.drawArrays(gl.LINES, 0, 6);

Voici une explication détaillée :

1. Nous configurons notre contexte WebGL et définissons nos shaders. Ne vous inquiétez pas trop de cela maintenant ; nous couvrirons les shaders en profondeur dans les leçons futures.

2. Nous créons un programme et liasons nos shaders. C'est comme préparer notre pinceau numérique.

3. Nous définissons les positions de nos lignes. Chaque ligne est définie par deux points (son début et sa fin), et chaque point est défini par deux coordonnées (x et y). Ainsi, nous avons 6 points au total pour nos 3 lignes.

4. Nous créons un tampon et mettons nos positions dedans. Pensez-y comme charger notre peinture sur le pinceau.

5. Nous indiquons à WebGL comment lire ce tampon et l'associer à l'attribut a_position dans notre shader de sommet.

6. Enfin, nous appelons gl.drawArrays(gl.LINES, 0, 6). C'est là que la magie happens !

• gl.LINES est notre mode. Il indique à WebGL de dessiner des lignes entre paires de sommets.
• 0 est l'index de départ dans notre tableau de positions.
• 6 est le nombre de sommets à considérer (souvenez-vous, nous avons 6 points pour nos 3 lignes).

Exécutez ce code, et hop ! Vous devriez voir trois lignes rouges parallèles sur un fond noir. Félicitations, vous avez刚刚 créé votre premier dessin WebGL ! ?

Modes de Dessin

Maintenant que nous avons vu gl.LINES en action, explorons quelques autres modes de dessin. Nous utiliserons le même setup que précédemment, mais changeons nos positions et le mode de dessin.

gl.POINTS

Commençons par le mode le plus simple : gl.POINTS. Ce mode dessine un point pour chaque sommet.

// ... (code de configuration précédent)

const positions = new Float32Array([
-0.5, 0.5,
0.0, 0.0,
0.5, -0.5
]);

// ... (code de configuration du tampon)

gl.drawArrays(gl.POINTS, 0, 3);

Cela dessinera trois points rouges sur votre canevas. Simple, n'est-ce pas ?

gl.LINE_STRIP

Maintenant, essayons gl.LINE_STRIP. Ce mode dessine une ligne continue reliant chaque sommet au suivant.

// ... (code de configuration précédent)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (code de configuration du tampon)

gl.drawArrays(gl.LINE_STRIP, 0, 3);

Vous devriez voir une ligne en forme de V reliant les trois points.

gl.LINE_LOOP

gl.LINE_LOOP est similaire à LINE_STRIP, mais il ferme la forme en reliant le dernier sommet au premier.

// ... (code de configuration précédent)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (code de configuration du tampon)

gl.drawArrays(gl.LINE_LOOP, 0, 3);

Cela dessinera un contour de triangle.

gl.TRIANGLES

Passons maintenant aux formes remplies avec gl.TRIANGLES. Ce mode dessine un triangle pour chaque groupe de trois sommets.

// ... (code de configuration précédent)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]);

// ... (code de configuration du tampon)

gl.drawArrays(gl.TRIANGLES, 0, 3);

Vous devriez voir un triangle rouge plein.

gl.TRIANGLE_STRIP

gl.TRIANGLE_STRIP est un peu plus complexe. Il dessine un groupe connecté de triangles, où chaque triangle partage deux sommets avec le précédent.

// ... (code de configuration précédent)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5
]);

// ... (code de configuration du tampon)

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Cela dessinera deux triangles connectés formant un rectangle.

gl.TRIANGLE_FAN

Enfin, regardons gl.TRIANGLE_FAN. Ce mode dessine une forme en éventail, où tous les triangles partagent le premier sommet comme point commun.

// ... (code de configuration précédent)

const positions = new Float32Array([
0.0, 0.0,    // Point central
0.5, 0.0,    // Point 1
0.35, 0.35,  // Point 2
0.0, 0.5,    // Point 3
-0.35, 0.35  // Point 4
]);

// ... (code de configuration du tampon)

gl.drawArrays(gl.TRIANGLE_FAN, 0, 5);

Cela dessinera une forme qui ressemble à un quart de cercle.

Et voilà ! Nous avons exploré tous les modes de dessin dans WebGL. Souvenez-vous, la clé pour maîtriser ces modes est la pratique. Essayez de combiner différents modes, changez les couleurs, et jouez avec les positions des sommets. Avant de vous en rendre compte, vous serez capable de créer des scènes WebGL complexes avec facilité !

Dans notre prochaine leçon, nous plongerons plus profondément dans les shaders et apprendrons comment ajouter un peu de peps à nos dessins avec des couleurs et des textures. Jusque là, bon codage, futurs artistes WebGL ! ??‍??‍?

Credits: Image by storyset