Fragment Shader — ce que c'est, tâches et principe de fonctionnement

Qu'est-ce que Fragment Shader ?

Fragment Shader (shader de fragments ou de pixels) est un étage programmable du pipeline graphique qui calcule la couleur finale de chaque fragment de l'image. Un fragment est un pixel potentiel qui devient un pixel visible à l'écran après avoir passé les tests de profondeur et de stencil.

Fragment Shader s'exécute après la rastérisation, lorsque les primitives 3D (triangles) ont déjà été converties en un ensemble de fragments. Le shader reçoit des attributs interpolés — coordonnées de texture, normales, couleurs qui ont été calculées dans le Vertex Shader pour les sommets du triangle et interpolées linéairement pour chaque pixel à l'intérieur du triangle.

Histoire de l'évolution de Fragment Shader

Avant l'avènement des shaders programmables (avant DirectX 8 / OpenGL 2.0), le calcul de la couleur des pixels était effectué par un pipeline fixe avec un ensemble limité d'opérations. Le Fragment Shader programmable est apparu en 2001 et a radicalement élargi les capacités graphiques : les développeurs ont obtenu un contrôle total sur la couleur de chaque pixel, permettant d'implémenter un éclairage photoréaliste, des matériaux complexes et des post-effets.

Comment fonctionne Fragment Shader ?

Fragment Shader est lancé par le GPU pour chaque fragment généré par le rastériseur. Chaque invocation de shader traite un fragment, lit ses données d'entrée, exécute le code utilisateur et écrit la valeur de sortie — la couleur du fragment au format RGBA.

Données d'entrée et de sortie

Les données d'entrée de Fragment Shader incluent des attributs interpolés du Vertex Shader (coordonnées de texture, normales, couleurs), des variables uniform (sources de lumière, matrices) et des échantillonneurs de texture. Les données de sortie sont le vecteur de couleur (gl_FragColor dans OpenGL ES 2.0 ou une variable définie par l'utilisateur dans ES 3.0), qui est écrit dans le tampon de couleur.

#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTexture;
out vec4 fragColor;

void main() {
    fragColor = texture(uTexture, vTexCoord);
}

Tâches principales de Fragment Shader

Fragment Shader est responsable de la qualité visuelle de l'image. Tous les effets que l'utilisateur voit à l'écran — couleur, ombres, reflets, transparence — sont calculés à cet étage du pipeline graphique.

Texturage

L'opération la plus fréquente est l'échantillonnage de la couleur d'une texture à l'aide de coordonnées UV interpolées. Sampler2D et la fonction texture() permettent d'obtenir la couleur d'un pixel à partir d'un atlas de textures. Le filtrage (bilinéaire, trilinéaire, anisotropique) est contrôlé via les paramètres de l'échantillonneur et affecte la netteté de l'image à différents angles de vue.

Éclairage Phong

Le modèle d'éclairage Phong est calculé dans Fragment Shader par pixel, ce qui donne des reflets plus lisses que l'éclairage par sommet (ombrage Gouraud). L'éclairage Phong comprend trois composantes : ambiante, diffuse et spéculaire.

// Fragment shader with Phong lighting
in vec3 vNormal;
in vec3 vPosition;
uniform vec3 uLightDir;
uniform vec3 uLightColor;

void main() {
    vec3 norm = normalize(vNormal);
    float diff = max(dot(norm, uLightDir), 0.0);
    fragColor = vec4(uLightColor * diff, 1.0);
}

Post-effets et blending

Fragment Shader permet d'appliquer du post-traitement : correction des couleurs via des tables de correspondance (LUT), flou (blur), effet de lueur (bloom) et tonemapping pour le rendu HDR. Tous ces effets fonctionnent au niveau du pixel et s'exécutent en temps réel.

Performance et optimisation de Fragment Shader

La performance de Fragment Shader est le principal facteur limitant les FPS dans les jeux mobiles modernes. Étant donné que le shader est invoqué pour chaque pixel, même une légère augmentation de la complexité du code peut entraîner une baisse notable du taux d'images.

Principaux problèmes de performance

• Overdraw — redessiner le même pixel en raison du chevauchement d'objets. Particulièrement critique pour les objets semi-transparents.
• Branchements conditionnels — les branchements dans Fragment Shader réduisent l'efficacité d'exécution SIMD, car le GPU doit exécuter les deux branches.
• Échantillonnages de texture — chaque échantillonnage de texture a une latence de dizaines de cycles d'horloge GPU. Minimiser le nombre d'échantillonneurs accélère le shader.

Méthodes d'optimisation de Fragment Shader

Pour les GPU mobiles (Qualcomm Adreno, ARM Mali), il est recommandé d'utiliser la mediump precision pour les variables float, de combiner les échantillonnages de texture, d'appliquer des tests early-z pour éliminer les fragments invisibles avant l'exécution du shader.

Fragment Shader vs Vertex Shader : comparaison

Les deux types de shaders sont programmables par le développeur, mais ils travaillent à différents étages du pipeline et résolvent différentes tâches. Fragment Shader est nettement plus gourmand en ressources en raison du nombre d'invocations.

Exemples de code Fragment Shader

Fragment Shader peut être simple (échantillonnage de texture) ou complexe (éclairage multicouche). Considérons deux exemples pratiques : le texturage de base et un effet de dégradé utilisant le temps.

Texturage de base en GLSL

#version 300 es
precision mediump float;
in vec2 vTexCoord;
in vec3 vColor;
uniform sampler2D uDiffuseMap;
out vec4 fragColor;

void main() {
    vec4 texColor = texture(uDiffuseMap, vTexCoord);
    fragColor = texColor * vec4(vColor, 1.0);
}

Exemple en Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct FragmentIn {
    float2 texCoord;
    float3 normal;
};

fragment float4
fragmentMain(FragmentIn in [[stage_in]],
              texture2d<float> tex [[texture(0)]]) {
    constexpr sampler s(filter = linear);
    float4 color = tex.sample(s, in.texCoord);
    return color;
}