WebGL - Échelle : Un guide pour les débutants

Bonjour, futurs développeurs WebGL ! Aujourd'hui, nous allons plonger dans le monde fascinant de l'échelle en WebGL. Ne vous inquiétez pas si vous êtes nouveaux en programmation - je vais vous guider à travers chaque étape avec le même soin et la même patience que j'utilise dans ma classe depuis des années. Commençons cette aventure passionnante ensemble !

WebGL - Scaling

Qu'est-ce que l'échelle en WebGL ?

Avant de nous lancer dans le code, comprens ce que signifie l'échelle dans le contexte de la graphique informatique. Imaginez que vous avez une figurine de jouet favorite. L'échelle, c'est comme avoir une baguette magique qui peut rendre cette figurine plus grande ou plus petite tout en conservant sa forme. En WebGL, nous pouvons faire cette magie avec nos objets 3D !

L'importance de l'échelle

L'échelle est essentielle pour créer des scènes 3D réalistes et dynamiques. Elle nous permet de :

Ajuster la taille des objets pour s'adapter à notre scène
Créer des animations où les objets grossissent ou rétrécissent
Maintenir des proportions correctes dans des modèles complexes

Étapes nécessaires pour l'échelle en WebGL

Pour élargir les objets en WebGL, nous devons suivre une série d'étapes. Breaktons-les :

Étape	Description
1. Créer une matrice d'échelle	Nous commençons par créer une matrice spéciale qui indique à WebGL comment élargir notre objet
2. Multiplier avec la matrice de modèle	Nous combinons notre matrice d'échelle avec la matrice de modèle existante de l'objet
3. Passer au shader	Nous envoyons cette nouvelle matrice à notre programme de shader
4. Appliquer dans le shader de vertex	Le shader utilise cette matrice pour ajuster la position de chaque sommet

Ne vous inquiétez pas si ces étapes semblent complexes - nous explorerons chacune d'elles en détail avec notre exemple !

Exemple - Élargir un triangle

Mettons nos connaissances en pratique en élargissant un simple triangle. Nous allons commencer avec une configuration de base WebGL puis ajouter la fonctionnalité d'échelle.

Étape 1 : Configuration du contexte WebGL

Tout d'abord, nous devons configurer notre contexte WebGL. Voici comment nous le faisons :

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

if (!gl) {
console.error('WebGL non pris en charge');
return;
}

Ce code trouve notre élément de canevas et crée un contexte WebGL. C'est comme préparer notre toile et nos pinceaux avant de commencer notre œuvre d'art !

Étape 2 : Définir le shader de vertex

Maintenant, créons notre shader de vertex. C'est là que se produit la magie de l'échelle :

const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;

void main() {
vec3 position = u_matrix * vec3(a_position, 1);
gl_Position = vec4(position.xy, 0, 1);
}
`;

Ce shader prend chaque position de sommet et la multiplie par notre matrice (qui inclura notre échelle). C'est comme donner des instructions à chaque point de notre triangle sur la façon de se déplacer.

Étape 3 : Définir le shader de fragment

Le shader de fragment détermine la couleur de notre triangle :

const fragmentShaderSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1, 0, 0, 1);  // Couleur rouge
}
`;

Nous gardons las choses simples ici - notre triangle sera rouge. N'hésitez pas à expérimenter avec différentes couleurs !

Étape 4 : Créer et lier le programme de shader

Maintenant, compilons et lions 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 processus est comme assembler les pièces d'une machine - chaque shader est un composant, et nous les mettons ensemble pour créer notre programme.

Étape 5 : Créer les données du triangle

Définissons notre triangle :

const positions = new Float32Array([
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, positions, gl.STATIC_DRAW);

Ces coordonnées définissent un simple triangle. Pensez-y comme plotting des points sur un graphique pour dessiner notre forme.

Étape 6 : Implémenter l'échelle

Maintenant pour la partie passionnante - élargir notre triangle ! Nous allons utiliser une fonction pour créer notre matrice d'échelle :

function createScaleMatrix(scaleX, scaleY) {
return new Float32Array([
scaleX, 0, 0,
0, scaleY, 0,
0, 0, 1
]);
}

// Exemple : Élargir le triangle au double de sa taille
const scaleMatrix = createScaleMatrix(2, 2);

Cette matrice est comme un ensemble d'instructions indiquant à WebGL combien étirer ou réduire notre triangle dans chaque direction.

Étape 7 : Rendu du triangle élargi

Enfin, mettons tout ensemble et rendons notre triangle élargi :

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 matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);

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

Ce code applique notre matrice d'échelle et dessine le triangle. C'est comme finally révéler notre œuvre d'art après toute la préparation !

Conclusion

Félicitations ! Vous venez d'élargir votre premier triangle WebGL. Souvenez-vous, l'échelle n'est qu'une des nombreuses transformations que vous pouvez appliquer en WebGL. Comme vous continuez votre parcours, vous découvrirez comment combiner l'échelle avec la rotation, la translation, et plus encore pour créer des scènes 3D complexes et dynamiques.

La pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différents valeurs d'échelle et formes. Qui sait ? Le prochain grand jeu vidéo ou application web 3D pourrait commencer right here, avec votre triangle élargi !

Bonne programmation, et puissent vos objets WebGL toujours s'élargir vers de nouveaux sommets !

Credits: Image by storyset