3D et shaders

3D & Shaders : découvrir le vertex shader 🎮✨

Comment la carte graphique dessine-t-elle un carré, un cube, un monde entier ?
Avec des shaders, de petits programmes qui tournent directement sur le GPU.
Niveau : 12 → 18 ans (curieux de maths / 3D) Ressource prof : pipeline graphique, coordonnées, animations

1) Qu’est-ce qu’un shader ?

Un shader est un mini-programme exécuté par la carte graphique (GPU). Il sert à transformer des données brutes (positions, couleurs, normales…) en pixels affichés à l’écran.

Les deux plus importants :

• Vertex shader : s’occupe des sommets (points) des formes 3D/2D.
• Fragment shader : s’occupe de la couleur de chaque pixel.

Dans cette activité, on se concentre surtout sur le vertex shader : on va lui demander de dessiner, modifier et animer un rectangle.

2) Terrain de jeu : Vertex Shader Art

Pour expérimenter facilement, on va utiliser un site où l’on peut écrire des vertex shaders directement dans le navigateur :

• 🌐 Site principal : https://www.vertexshaderart.com
• 🎨 Exemple spécifique (démo) : https://www.vertexshaderart.com/art/jjpd8XtJ5nJAcmyLh

💡 Mode d’emploi rapide :

• Ouvre le lien de l’exemple dans un nouvel onglet.
• Tu verras à gauche/à droite le code du shader, et au centre le rendu.
• Modifie quelques nombres dans le code → le rendu change instantanément.

3) Vertex shader : idée de base

Le job du vertex shader est de dire où se trouvent les sommets sur l’écran. Un exemple simplifié de vertex shader (style WebGL) pourrait ressembler à ceci :

// Exemple pédagogique de vertex shader (GLSL simplifié)
#version 300 es
precision highp float;

// Position d'un sommet (envoyée par JavaScript)
in vec2 aPosition;

// Uniforme pour faire bouger les choses avec le temps
uniform float uTime;

void main() {
    // Position de base (x, y)
    vec2 pos = aPosition;

    // Exemple : légère oscillation verticale (juste pour montrer)
    pos.y += 0.05 * sin(uTime + pos.x * 10.0);

    // gl_Position = position finale du sommet en coordonnées écran (-1..1)
    gl_Position = vec4(pos, 0.0, 1.0);
}

Sur vertexshaderart.com, la structure du code peut être un peu différente, mais l’idée reste la même : tu écris du GLSL (un langage de shaders) qui calcule une position et souvent une couleur.

4) Activité 1 – Dessiner et comprendre un carré

Objectif : regarder un vertex shader qui dessine un rectangle/carré et comprendre la logique.

1. Ouvre l’exemple : vertex shader art – exemple .
2. Repère les parties du code qui :
   • définissent la position (souvent via une variable pos ou directement gl_Position),
   • définissent la couleur (variables col, color, vec3 ou vec4).
3. Note quelque part les lignes que tu penses devoir modifier pour changer :
   • la taille du rectangle,
   • sa position,
   • sa couleur.

Mini-challenge : Ajoute des commentaires dans le code du shader (avec //) pour expliquer ce que tu comprends ligne par ligne.

5) Série d’exercices (à partir du code de base)

🔹 Exercice 1 – Changer la couleur du rectangle

Sur la base du code de l’exemple, modifie la partie qui calcule la couleur. Souvent on trouve quelque chose du genre :

vec3 color = vec3(1.0, 0.5, 0.2); // rouge-orangé

ou bien :

gl_FragColor = vec4(r, g, b, 1.0);

Essaye :

• Un rectangle bleu : (0.2, 0.4, 1.0)
• Un rectangle vert fluo : (0.2, 1.0, 0.4)
• Un rectangle dont la couleur dépend du temps, par exemple :

  float r = 0.5 + 0.5 * sin(uTime);
  float g = 0.5 + 0.5 * sin(uTime + 2.0);
  float b = 0.5 + 0.5 * sin(uTime + 4.0);
  vec3 color = vec3(r, g, b);

🔹 Exercice 2 – Doubler la largeur du rectangle

Dans le code, la largeur dépend généralement des coordonnées x utilisées pour construire le rectangle. Par exemple, si on a un truc du genre :

// position de base (x, y)
vec2 pos = vec2(x, y);

ou une transformation comme :

pos.x *= 0.5;  // réduit la largeur

Pour doubler la largeur, tu peux :

• multiplier l’axe X par 2 : pos.x *= 2.0;
• ou élargir la plage des coordonnées x utilisées pour le rectangle.

Challenge : rends le rectangle plus large en fonction du temps, par exemple pos.x *= (1.0 + 0.5 * sin(uTime));

🔹 Exercice 3 – Faire se déplacer le rectangle de droite à gauche

Pour animer le rectangle, on décale sa position en fonction d’un temps uTime :

// Décalage horizontal : le rectangle se déplace vers la gauche
pos.x -= uTime * 0.3;  // 0.3 = vitesse

Quelques idées :

• Changer la vitesse (0.1, 0.5, 1.0…) et voir l’effet.
• Le faire bouger en diagonale : modifier pos.y aussi.

🔹 Exercice 4 – Faire réapparaître le rectangle à gauche

Quand le rectangle sort de l’écran à droite ou à gauche, on veut qu’il “boucle“ comme dans un jeu vidéo. En coordonnées normalisées, l’écran va en général de -1 à +1 sur X.

Idée de pseudo-code dans le shader :

// Si le rectangle est trop à droite, on le ramène à gauche
if (pos.x > 1.2) {
    pos.x -= 2.4;  // 2.4 > 2 * 1.0 pour être sûr de revenir
}

// Idem si tu veux gérer la sortie à gauche :
if (pos.x < -1.2) {
    pos.x += 2.4;
}

Challenge bonus : fais une colonne de rectangles qui descendent et réapparaissent en haut de l’écran (type “pluie de rectangles”).

6) QCM rapide – As-tu compris les shaders ?

Un mini-quiz pour vérifier les idées clés.

1. Le rôle principal d’un vertex shader est :
   a) Choisir la musique du jeu.
   b) Calculer la position des sommets sur l’écran.
   c) Créer les menus du jeu.
2. Pour faire bouger un rectangle de droite à gauche depuis un shader, on peut :
   a) Soustraire une valeur dépendant du temps à la coordonnée x.
   b) Changer seulement la couleur.
   c) Éteindre l’écran.
3. Quand on “limite” les coordonnées à l’intervalle [-1, 1] en X et Y, on travaille :
   a) En coordonnées normalisées (NDC).
   b) En mètres.
   c) En kilomètres.

7) Pour aller plus loin

• Ajouter un deuxième rectangle d’une autre couleur.
• Faire tourner le rectangle (rotation) autour de son centre.
• Utiliser sin() et cos() pour créer des effets “respirants” ou des vagues.
• Transformer le rectangle en “barre” qui répond à une valeur (par exemple le volume d’un son).

Les shaders sont la porte d’entrée vers le jeu vidéo 3D, les démos graphiques et même certains effets de films. Commencer par un simple rectangle, c’est déjà mettre un pied dans le futur. 🚀