WebGL - Application d'exemple : Un guide pour les débutants

Salut à toi, futur magicien de WebGL ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde de WebGL. En tant qu'enseignant en informatique avec des années d'expérience, j'ai vu des centaines d'étudiants s'illuminer lorsqu'ils créent leurs premiers graphiques 3D sur le web. Aujourd'hui, nous allons entreprendre cette même aventure ensemble. Alors, bouclez votre ceinture et plongeon dans l'aventure !

WebGL - Sample Application

Qu'est-ce que WebGL ?

Avant de commencer à coder, comprenons ce qu'est WebGL. WebGL (Web Graphics Library) est une API JavaScript qui nous permet de rendre des graphiques interactifs 3D et 2D dans les navigateurs web sans utiliser de plugins. C'est comme donner à vos pages web des superpuissances pour créer des visuels époustouflants !

Structure d'une application WebGL

Une application WebGL se compose généralement de plusieurs composants clés. Décortiquons-les :

1. Canvas HTML

Le canvas est notre tableau de dessin. C'est là que tous les prodiges se passent !

<canvas id="myCanvas" width="640" height="480">
Votre navigateur ne supporte pas la balise HTML5 canvas.
</canvas>

Cela crée un canvas de 640x480 pixels sur votre page web. Pensez-y comme un chevalet d'artiste, prêt pour votre chef-d'œuvre !

2. Code JavaScript

C'est là que nous écrivons nos commandes WebGL. C'est comme donner des instructions à notre artiste virtuel.

3. Shader de sommet et shader de fragment

Ce sont des programmes spéciaux qui s'exécutent sur le GPU. Ils sont comme les pinceaux et les palettes de couleurs pour nos graphiques 3D.

4. Buffers

Les buffers stockent les données pour nos objets 3D. Imaginez-les comme les matières premières pour nos sculptures 3D.

Maintenant que nous connaissons les ingrédients, mettons la main à la pâte pour créer une délicieuse application WebGL !

Application d'exemple

Créons une simple application WebGL qui dessine un triangle coloré. Nous allons détailler chaque étape.

Étape 1 : Configurer le HTML

Tout d'abord, nous devons créer un fichier HTML avec un élément canvas :

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
Votre navigateur ne supporte pas la balise HTML5 canvas.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

Cela crée notre canvas et lie un fichier JavaScript que nous allons créer ensuite.

Étape 2 : Initialiser WebGL

Maintenant, créons notre fichier webgl-demo.js et configurons WebGL :

function main() {
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

if (!gl) {
alert("WebGL n'est pas supporté par votre navigateur !");
return;
}

// WebGL est prêt à être utilisé !
}

window.onload = main;

Cette fonction récupère notre canvas, initialise WebGL, et vérifie s'il est supporté. C'est comme vérifier si nous avons tous nos matériaux d'art avant de commencer.

Étape 3 : Créer des shaders

Maintenant, créons nos shaders de sommet et de fragment :

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Une erreur s'est produite lors de la compilation des shaders : ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

Ces shaders définissent comment notre triangle sera positionné et coloré. Le shader de sommet positionne notre triangle, tandis que le shader de fragment lui donne une jolie couleur rose.

Étape 4 : Créer un programme

Maintenant, lions nos shaders dans un programme :

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Impossible d\'initialiser le programme de shaders : ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

C'est comme assembler nos outils d'art et se préparer à peindre !

Étape 5 : Créer un buffer

Maintenant, créons un buffer pour stocker les sommets de notre triangle :

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Cela définit la forme de notre triangle. C'est comme esquisser la forme de base avant de commencer à peindre.

Étape 6 : Rendre le triangle

Enfin, dessinons notre triangle :

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

C'est là que la magie opère ! Nous effaçons le canvas, configurons notre programme et notre buffer, et finalement dessinons notre triangle.

Conclusion

Félicitations ! Vous venez de créer votre première application WebGL. Vous avez fait votre premier pas dans un plus grand monde de graphiques 3D sur le web. Souvenez-vous, comme toute forme d'art, maîtriser WebGL nécessite de la pratique et de la patience. Mais avec chaque ligne de code, vous peignez un web plus vibrant et interactif. Continuez à explorer, continuez à créer, et surtout, amusez-vous bien !

Voici un tableau récapitulatif des principales méthodes que nous avons utilisées :

Méthode	Description
`getContext("webgl")`	Initialise WebGL
`createShader()`	Crée un shader
`shaderSource()`	Définit le code source du shader
`compileShader()`	Compile un shader
`createProgram()`	Crée un programme
`attachShader()`	Attache un shader à un programme
`linkProgram()`	Lie un programme
`createBuffer()`	Crée un buffer
`bindBuffer()`	Lie un buffer
`bufferData()`	Remplit un buffer avec des données
`viewport()`	Définit la zone d'affichage
`clearColor()`	Définit la couleur d'effacement
`clear()`	Efface le canvas
`useProgram()`	Utilise un programme
`getAttribLocation()`	Récupère l'emplacement d'un attribut
`enableVertexAttribArray()`	Active un tableau d'attributs
`vertexAttribPointer()`	Spécifie la disposition des données de sommet
`drawArrays()`	Rend des primitives

Gardez ce tableau à portée de main pendant que vous continuez votre voyage dans WebGL. Bon codage !

Credits: Image by storyset

Tutoriel précédent:

WebGL - Pipeline Graphique

Tutoriel suivant:

WebGL - Contexte