Vertex shaders & pixel shaders
Comment ta carte graphique transforme des maths en images

Article progressif pour élèves à partir de ~10 ans jusqu’aux grands ados (et adultes curieux).
On commence très simple, puis on va de plus en plus loin.

👦 10–12 ans : lire surtout la partie 1 👩‍🎓 Collège : parties 1 à 5 🧑‍💻 Lycée / au-delà : tout l’article

1. Version « ultra simple » (à partir de ~10 ans) Deux équipes dans la carte graphique : ceux qui placent, ceux qui colorient.

Imagine qu’on fabrique un dessin animé :

Étape 1 : quelqu’un dessine les formes : personnages, maisons, arbres…
Étape 2 : quelqu’un repasse et fait le coloriage : ciel bleu, herbe verte, vêtements...

Dans ta carte graphique, c’est pareil :

Le vertex shader, c’est l’équipe qui place les points (les coins des objets). Il décide où se trouvent les choses.
Le pixel shader (ou fragment shader), c’est l’équipe coloriste : pour chaque petit point de l’écran (pixel), il choisit la couleur.

🧠 À retenir (version enfant) :
« Le vertex shader place les objets, le pixel shader les colorie. »

2. C’est quoi, un « shader » ? Un mini-programme qui tourne sur la carte graphique (GPU)

Un shader, c’est un petit programme (comme un script) qui tourne directement sur la carte graphique, et non sur le processeur principal. Il est écrit dans des langages spéciaux (GLSL, HLSL, etc.).

Le but de toute cette histoire est de transformer :

données 3D (points, triangles, textures)
⬇
en une image 2D sur ton écran.

Les deux shaders les plus importants sont :

Vertex shader : il s’occupe des sommets (les points qui définissent les formes).
Pixel / fragment shader : il s’occupe des pixels (petits carrés de l’écran) et de leur couleur.

💡 Pipeline graphique :
C’est le nom de la « chaîne de fabrication » de l’image : les données 3D passent par plusieurs étapes (dont ces shaders) avant d’arriver sur l’écran.

3. Le voyage d’un triangle à l’intérieur de la carte graphique Du modèle 3D au pixel affiché

Imaginons que tu envoies un simple triangle à la carte graphique.

Tu donnes 3 points (sommets) : leur position 3D, éventuellement une couleur, des coordonnées de texture, etc.
Le vertex shader reçoit chaque sommet un par un et applique des maths (rotations, zoom, déplacement…) pour savoir où le placer sur l’écran.
Le rasterizer remplit le triangle avec des petits carrés : il décide quels pixels de l’écran appartiennent à ce triangle.
Le pixel shader est appelé pour chaque pixel, et décide de la couleur finale.

🔍 Idée clé :
Le vertex shader travaille sur les sommets.
Le pixel shader travaille sur les pixels.

4. Le vertex shader : le « géomètre » de la scène Il place les points dans l’espace

4.1. Ce qu’il reçoit en entrée

Pour chaque sommet, il peut recevoir :

sa position en 3D (par exemple (x, y, z)),
sa couleur de base,
ses coordonnées de texture (pour savoir où lire dans une image),
sa normale (direction perpendiculaire à la surface, utile pour la lumière).

Il reçoit aussi des valeurs qui restent identiques pour tous les sommets, appelées uniformes (matrices, temps, etc.).

4.2. Ce qu’il doit produire

Le vertex shader doit obligatoirement produire la position finale du sommet (dans un espace spécial appelé « clip space ») dans une variable spéciale (gl_Position en GLSL). Il peut aussi préparer des valeurs à transmettre au pixel shader (couleur, coordonnées de texture…).

4.3. Exemple minimal de vertex shader (GLSL)

// Position du sommet (entrée)
attribute vec3 aPosition;

// Couleur du sommet (entrée)
attribute vec3 aColor;

// Matrice de transformation (monde + caméra + projection)
uniform mat4 uMVP;

// Variable envoyée au pixel shader
varying vec3 vColor;

void main() {
    // 1) On transforme la position du sommet
    gl_Position = uMVP * vec4(aPosition, 1.0);

    // 2) On transmet la couleur au pixel shader
    vColor = aColor;
}

Traduction simple :

aPosition : position de départ du sommet.
uMVP : « super transformation » (rotation, zoom, projection…).
gl_Position : position finale sur l’écran.
vColor : couleur qu’on passera au pixel shader.

4.4. Exemples d’effets typiques en vertex shader

Faire « flotter » un drapeau (déplacer les sommets avec une fonction sinus).
Faire grossir/rétrécir un objet (changer sa matrice de transformation).
Animation de personnages (skinning) : déplacer les sommets selon un squelette.
Terrain en relief : déplacer les sommets en fonction d’une carte de hauteur.

🐢 Version Scratch :
On peut imaginer un vertex shader comme un script qui, pour chaque « point » d’un sprite, met à jour ses variables x, y avant de l’afficher.

5. Le pixel (fragment) shader : le « coloriste » Il décide de la couleur de chaque pixel

5.1. Pixel ou fragment ?

On parle souvent de pixel shader (surtout avec DirectX) et de fragment shader (en OpenGL/WebGL). Pour cet article, on les considère comme la même chose.

5.2. Ce qu’il reçoit

Les valeurs envoyées par le vertex shader, mais interpolées (mélangées) entre les sommets.
Des textures (images) à échantillonner.
Des uniformes : couleurs de lumière, position de la caméra, temps, etc.

5.3. Ce qu’il doit produire

Il doit renvoyer la couleur finale du pixel, souvent un vecteur (rouge, vert, bleu, alpha).

5.4. Exemple très simple de pixel shader

// Valeur interpolée reçue du vertex shader
varying vec3 vColor;

void main() {
    // On applique directement la couleur reçue
    gl_FragColor = vec4(vColor, 1.0);
}

Résultat : le triangle reçoit un dégradé de couleur (les couleurs des sommets sont « mélangées » pixel par pixel).

5.5. Exemple avec texture

// Coordonnées de texture (reçues du vertex shader)
varying vec2 vUV;

// Texture 2D
uniform sampler2D uTexture;

void main() {
    // On lit la couleur de la texture
    vec4 texColor = texture2D(uTexture, vUV);

    // On utilise cette couleur comme couleur finale
    gl_FragColor = texColor;
}

Ici, chaque pixel va « piocher » sa couleur dans l’image (la texture) grâce aux coordonnées vUV.

5.6. Effets typiques de pixel shader

Lumière par pixel (ombres plus fines, reflets plus précis).
Effets de brouillard, de glow, de lumière colorée.
Post-traitement : noir et blanc, flou, effet BD, simulation d’écran rétro…
Toon shading (« cell shading ») pour un rendu dessin animé.

🎨 Version Scratch :
Le pixel shader, c’est comme un script qui décide pour chaque petite case de ton dessin : « de quelle couleur je dois être ? »

6. Vertex + pixel shaders : comment ils collaborent Deux rôles différents, un même but

Mesh (sommets) → Vertex shader → Interpolation → Pixel shader → Image finale

6.1. Les « varyings » : le courrier entre les deux

Les variables déclarées en varying (ou in/out dans les versions modernes) servent de pont entre vertex et pixel shader.

Le vertex shader calcule par exemple une normale vNormal pour chaque sommet.
La carte graphique interpole vNormal pour tous les pixels du triangle.
Le pixel shader récupère cette normale et calcule une lumière très précise.

6.2. Exemple : un drapeau animé

Vertex shader : fait onduler les sommets du drapeau (fonction sinus du temps).
Pixel shader : lit la texture du drapeau et calcule la lumière dessus.

Résultat : la forme qui bouge vient du vertex shader, l’aspect (couleurs, ombres, texture) vient du pixel shader.

7. Performance : pourquoi séparer les rôles ? Il y a beaucoup plus de pixels que de sommets

En général :

Un modèle 3D a quelques milliers de sommets.
Un écran Full HD a environ 2 millions de pixels.

Donc :

Le vertex shader est appelé moins souvent (une fois par sommet).
Le pixel shader est appelé énormément de fois (une fois par pixel ou fragment).

⚙️ Conséquence :
Si un calcul est très lourd, il vaut mieux le faire dans le vertex shader quand c’est possible, puis envoyer le résultat au pixel shader. Ça peut rendre le jeu plus fluide.

8. Mini-exercices d’exploration Pour ateliers collège / lycée

Exercice A – « Je change seulement la couleur » (pixel shader)

But : montrer que le pixel shader peut modifier l’apparence sans toucher à la géométrie.

Commencer avec un rectangle déjà affiché.
Modifier uniquement le pixel shader pour :
- mettre tout en rouge,
- puis créer un dégradé vertical,
- puis faire changer la couleur avec le temps (ex. sinus du temps).

Exercice B – « Je bouge seulement les sommets » (vertex shader)

But : voir que le vertex shader change la forme/position sans toucher aux couleurs.

Partir d’un triangle affiché au centre.
Dans le vertex shader, ajouter un décalage en X en fonction du temps.
Observer que le triangle se déplace alors que le pixel shader est identique.

Exercice C – « Duo vertex + pixel »

But : montrer la complémentarité.

Vertex shader : onduler un plan comme une surface d’eau.
Pixel shader : colorier en bleu/vert + accentuer les crêtes des vagues.

9. Résumé pour les élèves Une phrase claire pour chacun

Vertex shader : s’occupe de la forme et de la position (géométrie).
Pixel/fragment shader : s’occupe de la couleur et de l’apparence (lumière, textures…).
Ils communiquent via des variables « varying » (ou in/out).
Le pixel shader est appelé beaucoup plus de fois → on y met plutôt les calculs simples et locaux.
En les combinant bien, on peut créer des rendus très réalistes ou très stylisés.

✅ Super résumé :
« Le vertex shader décide où se trouve chaque point de l’objet.
Le pixel shader décide de quelle couleur sera chaque point de l’image. »

10. Petit QCM de fin Pour vérifier si tout est bien clair

Le rôle principal d’un vertex shader, c’est :
- A. De jouer de la musique pendant le jeu.
- B. De décider de la couleur de chaque pixel.
- C. De transformer la position des sommets dans l’espace 3D/2D.
- D. D’afficher les menus.
Le rôle principal d’un pixel (fragment) shader, c’est :
- A. De charger les modèles 3D depuis le disque dur.
- B. De calculer la couleur finale de chaque fragment/pixel.
- C. De relier ta manette à l’ordinateur.
- D. De calculer les trajectoires des projectiles.
Quel est le lien entre vertex et pixel shader ?
- A. Ils ne communiquent jamais.
- B. Le pixel shader reçoit des valeurs interpolées entre les sommets traités par le vertex shader.
- C. Le vertex shader copie simplement le résultat du pixel shader.
- D. Ils tournent uniquement sur le processeur (CPU).
Pourquoi met-on parfois certains calculs dans le vertex shader plutôt que dans le pixel shader ?
- A. Parce que le vertex shader est plus « à la mode ».
- B. Parce qu’il est appelé moins souvent (moins de sommets que de pixels), donc c’est plus performant.
- C. Parce que le pixel shader ne peut pas faire de maths.
- D. Parce que le vertex shader ne peut pas accéder aux textures.
Laquelle de ces phrases décrit le mieux leur complémentarité ?
- A. Le vertex shader dessine les menus, le pixel shader dessine la souris.
- B. Le vertex shader gère la physique, le pixel shader gère le son.
- C. Le vertex shader gère la forme et la position, le pixel shader gère la couleur et l’apparence.
- D. Le vertex shader remplace totalement le pixel shader.

Corrigé : 1 → C, 2 → B, 3 → B, 4 → B, 5 → C.

Rechercher dans ce blog

Code informatique