WebGL - Rotation: Bringing Your Graphics to Life

Bonjour, futurs développeurs WebGL ! Aujourd'hui, nous allons plonger dans un des aspects les plus passionnants de la graphique informatique : la rotation. En tant que votre gentil voisin professeur de science informatique, je suis là pour vous guider à travers le monde magique des triangles tournants et des formes tourbillonnantes. Alors, mettez vos lunettes 3D imaginaires et c'est parti !

Comprendre la Rotation dans WebGL

Avant de sauter dans le code, penchons-nous un instant sur ce qu'est la rotation dans le contexte de WebGL. Imaginez que vous tenez un avion en papier. Quand vous le tournez, vous changez son orientation dans l'espace. Dans WebGL, nous faisons la même chose, mais avec une précision mathématique !

La rotation dans WebGL consiste à changer la position des sommets (les points qui composent nos formes) autour d'un axe central. Cela peut être l'axe X, Y ou Z, ou même une combinaison d'entre eux.

La Magie des Matrices

Maintenant, je sais ce que vous pensez : "Matrices ? Ce n'est pas quelque chose des films 'The Matrix' ?" Eh bien, pas tout à fait, mais elles sont tout aussi cool ! Dans WebGL, nous utilisons des matrices pour effectuer des rotations efficacement. Ne vous inquiétez pas si cela semble compliqué - nous allons le décomposer étape par étape.

Exemple - Faire tourner un Triangle

Commençons par un exemple simple : faire tourner un triangle. Nous allons commencer avec un triangle de base et puis le faire pivoter comme une ballerine géométrique !

Étape 1 : Configurer Notre Environnement WebGL

Premièrement, nous devons configurer notre contexte WebGL. Voici une structure HTML de base :

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// Notre code WebGL ira ici
</script>

Étape 2 : Initialiser WebGL

Maintenant, initialisons WebGL :

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL non supporté');
return;
}

Ce code récupère notre élément canvas et essaie d'obtenir un contexte WebGL. Si WebGL n'est pas supporté, nous verrons un message d'erreur.

Étape 3 : Créer Nos Shaders

Les shaders sont des programmes spéciaux qui s'exécutent sur le GPU. Nous avons besoin de deux types : les shaders de sommet et les shaders de fragment. Voici un ensemble simple :

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
`;

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

Le shader de sommet applique notre matrice de rotation, tandis que le shader de fragment colore notre triangle en rouge.

Étape 4 : Compiler et Lier les Shaders

Ensuite, nous devons compiler et lier nos shaders :

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

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

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

Ce code crée notre programme shader, que nous utiliserons pour rendre notre triangle tournant.

Étape 5 : Créer Notre Triangle

Maintenant, définissons notre triangle :

const positions = [
0, 0.5,
-0.5, -0.5,
0.5, -0.5
];

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

Cela crée un triangle simple centré à l'origine.

Étape 6 : La Magie de la Rotation

Voici où la véritable magie se produit. Nous allons créer une fonction pour générer notre matrice de rotation :

function createRotationMatrix(angleInRadians) {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
}

Cette fonction prend un angle en radians et retourne une matrice de rotation 3x3.

Étape 7 : Rendre Notre Triangle Tournant

Enfin, mettons tout ensemble et faisons pivoter notre triangle :

let angleInRadians = 0;

function render() {
angleInRadians += 0.01;

gl.clearColor(0, 0, 0, 1);
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);

const matrixLocation = gl.getUniformLocation(program, "u_matrix");
const matrix = createRotationMatrix(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);

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

requestAnimationFrame(render);
}

render();

Cette fonction fait plusieurs choses :

1. Augmente notre angle de rotation
2. Efface le canevas
3. Configure notre programme shader et les attributs
4. Crée et applique notre matrice de rotation
5. Dessine le triangle
6. Demande la prochaine image d'animation

Et voilà ! Nous avons un triangle tournant !

Conclusion

Félicitations ! Vous venez de créer votre première forme tournante dans WebGL. Souvenez-vous, c'est juste le début. Avec ces principes de base, vous pouvez créer des scènes 3D complexes avec plusieurs objets tournants.

En conclusion, je suis rappelé d'une élève qui a dit un jour : "J'ai pensé que la graphique informatique consistait seulement en logiciels fancy, mais maintenant je vois que c'est plus comme être un marionnettiste numérique !" Et elle avait raison - avec WebGL, vous tirez les ficelles de votre propre spectacle de marionnettes numériques.

Continuez à pratiquer, à expérimenter, et surtout, continuez à vous amuser avec WebGL. Avant de vous en rendre compte, vous créerez des visualisations 3D époustouflantes qui feront dire même aux développeurs les plus chevronnés : "Waouh !"

Méthode	Description
createShader(gl, type, source)	Crée et compile un shader
createRotationMatrix(angleInRadians)	Génère une matrice de rotation 2D
render()	Rend le triangle tournant
gl.clearColor(r, g, b, a)	Définit la couleur pour effacer le canevas
gl.clear(gl.COLOR_BUFFER_BIT)	Efface le canevas
gl.useProgram(program)	Définit le programme shader actuel
gl.getAttribLocation(program, name)	Obtient l'emplacement d'un attribut
gl.enableVertexAttribArray(location)	Active une array d'attribut
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)	lie un buffer
gl.vertexAttribPointer(location, size, type, normalized, stride, offset)	Spécifie la disposition des données de sommet
gl.getUniformLocation(program, name)	Obtient l'emplacement d'une variable uniforme
gl.uniformMatrix3fv(location, transpose, value)	Définit une valeur de matrice uniforme
gl.drawArrays(mode, first, count)	Rend des primitives à partir des données de l'array
requestAnimationFrame(callback)	Demande la prochaine image d'animation

Bonne programmation, et puissent vos triangles toujours tourner dans la bonne direction !

Credits: Image by storyset