Vertex Shader : qu'est-ce que c'est, tâches et principe de fonctionnement

Qu'est-ce que Vertex Shader ?

Vertex Shader est une étape programmable du pipeline graphique qui traite chaque sommet d'un modèle 3D individuellement. Un sommet (vertex) est un point dans l'espace tridimensionnel contenant des attributs : coordonnées xyz, normales, couleur et coordonnées de texture UV.

Contrairement au pipeline à fonction fixe (fixed-function pipeline) où les transformations étaient effectuées selon un algorithme rigide, Vertex Shader donne au développeur un contrôle total sur la transformation des sommets. Cela permet d'implémenter l'animation procédurale, la déformation de modèles, le skinning squelettique et toutes transformations mathématiques côté GPU.

Position de Vertex Shader dans le pipeline graphique

Le pipeline graphique OpenGL ES comprend une séquence d'étapes depuis les données d'entrée jusqu'à l'image finale. Vertex Shader se situe après l'étape d'assemblage des sommets et avant l'étape de rastérisation. Chaque sommet envoyé depuis le CPU via un tampon de sommets traverse le Vertex Shader exactement une fois, et le résultat est transmis à l'étape suivante pour l'assemblage des primitives.

Comment fonctionne Vertex Shader ?

Vertex Shader reçoit les attributs des sommets depuis le tampon de sommets (VBO) via des pointeurs d'attributs de sommet configurés dans le code CPU. Le développeur écrit le code du shader en GLSL (OpenGL Shading Language) ou un langage équivalent, que le pilote GPU compile en instructions machine pour la puce spécifique.

Flux de traitement des sommets

Pour chaque sommet, le Vertex Shader effectue séquentiellement trois opérations : lecture des attributs d'entrée — application des transformations définies par le développeur — écriture des résultats dans des variables de sortie. La sortie minimale requise est la position du sommet dans l'espace de clipping (gl_Position). Toutes les autres données de sortie (couleur, normales, coordonnées de texture) sont interpolées et transmises à l'étape suivante — le Fragment Shader.

#version 300 es
in vec3 aPosition;
in vec2 aTexCoord;
uniform mat4 uMVP;
out vec2 vTexCoord;

void main() {
    gl_Position = uMVP * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}

Tâches principales de Vertex Shader

Vertex Shader résout un large éventail de tâches du pipeline graphique liées à la transformation de géométrie. Chaque tâche est implémentée via des opérations mathématiques sur des vecteurs et des matrices, exécutées en parallèle pour des milliers de sommets simultanément.

Transformation des coordonnées via MVP

La tâche de base et la plus courante consiste à multiplier les coordonnées des sommets par les matrices model, view et projection (MVP). La matrice MVP transforme un sommet de l'espace local du modèle vers l'espace de clipping (clip space), qui est ensuite normalisé et converti en coordonnées d'écran dans les étapes automatiques du pipeline.

Animation squelettique (Skinning)

Pour les personnages animés, le Vertex Shader implémente l'animation squelettique (skinning). Chaque sommet est lié à plusieurs os avec des poids spécifiques. Vertex blending — une somme pondérée des transformations des os liés — permet de déformer la peau du personnage en douceur lorsque le squelette bouge.

Déformation procédurale de géométrie

Le Vertex Shader peut modifier la géométrie en fonction du temps ou d'autres paramètres uniform sans intervention du CPU. Wave deformation, déplacement par bruit de Perlin et effets d'ondulation sur l'eau — tous ces effets sont implémentés dans le shader de sommets sans recharger la géométrie depuis la RAM.

Vertex Shader vs Fragment Shader : différences

Bien que les deux types de shaders soient des étapes programmables du pipeline graphique, Vertex Shader et Fragment Shader résolvent des tâches fondamentalement différentes et opèrent à différentes étapes du traitement d'image.

La différence clé est la fréquence d'appel. Vertex Shader est appelé une fois par sommet, tandis que Fragment Shader est appelé pour chaque fragment (pixel). Dans une scène haute résolution, le nombre d'appels de Fragment Shader dépasse le nombre d'appels de Vertex Shader de milliers de fois, rendant l'optimisation des shaders de pixels encore plus critique.

Performances et optimisation de Vertex Shader

Les performances de Vertex Shader sont cruciales pour les applications en temps réel, en particulier dans le développement mobile avec une consommation d'énergie limitée. Les principaux facteurs de performance sont le nombre de sommets, la complexité du code du shader et la bande passante mémoire du GPU.

Facteurs affectant les performances

• Nombre de sommets — le nombre de sommets envoyés au GPU par image. Les modèles avec des millions de polygones créent une charge élevée sur le shader de sommets.
• Complexité du shader — le nombre d'instructions dans le shader. Les boucles imbriquées et les branches conditionnelles (divergence) réduisent les performances parallèles des unités SIMD.
• Bande passante — la vitesse de lecture des données des sommets depuis la mémoire vidéo. Le format des attributs (float32, float16, entier normalisé) affecte directement le débit.

Méthodes d'optimisation des shaders de sommets

Pour réduire la charge sur le Vertex Shader, les approches suivantes sont utilisées. Level of Detail (LOD) — passage à des versions simplifiées de modèles lorsque la caméra s'éloigne de l'objet. Instancing — dessin répété de la même géométrie avec différentes matrices de transformation en un seul appel de dessin (draw call).

// Vertex Shader avec prise en charge de l'instancing
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

void main() {
    vec4 worldPos = aInstanceMatrix * vec4(aPosition, 1.0);
    gl_Position = uViewProjection * worldPos;
}

Exemples de code Vertex Shader

Vertex Shader sur différentes API graphiques a une logique similaire, mais une syntaxe et des conventions de nommage différentes. Examinons l'implémentation d'un shader de sommets de base en GLSL pour OpenGL ES 3.0 et en Metal Shading Language pour iOS et macOS.

Exemple en GLSL pour OpenGL ES 3.0

#version 300 es
in vec4 position;
in vec3 normal;
in vec2 texcoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

out vec3 vNormal;
out vec2 vTexCoord;
out vec3 vPosition;

void main() {
    vec4 mvPosition = modelViewMatrix * position;
    vPosition = mvPosition.xyz;
    vNormal = normalMatrix * normal;
    vTexCoord = texcoord;
    gl_Position = projectionMatrix * mvPosition;
}

Exemple en Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float3 position [[attribute(0)]];
    float3 normal   [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float3 worldNormal;
};

vertex VertexOut
vertexMain(VertexIn in [[stage_in]],
           constant float4x4& mvp [[buffer(1)]]) {
    VertexOut out;
    out.position = mvp * float4(in.position, 1.0);
    out.worldNormal = in.normal;
    return out;
}