Technologies Créatives. Shaders GLSL : le langage caché derrière les visuels génératifs

Shaders GLSL: le langage caché derrière les visuels génératifs

Le GLSL sert précisément à cela: décrire les opérations qui déterminent la couleur finale de chaque point affiché à l’écran.

Cette architecture change la logique de production. Au lieu de construire une scène objet par objet, l’artiste définit une fonction visuelle. Elle reçoit des coordonnées, applique des opérations mathématiques, puis renvoie une couleur sous la forme d’un vecteur vec4. Le résultat peut être une surface abstraite, un volume simulé, une matière animée ou une composition réactive à des données externes.

Pour les artistes numériques, les shaders GLSL constituent donc moins un langage supplémentaire qu’un accès direct au pipeline de rendu. Leur intérêt se mesure sur trois axes: calcul parallèle, contrôle précis du pixel et capacité à produire des images procédurales sans dépendre d’un maillage complexe.

La puissance du calcul parallèle: au-delà de la logique sérielle

Les bibliothèques 2D classiques exécutent généralement une suite d’instructions qui dessinent, transforment et composent des éléments. Le programme traite une opération, puis la suivante. Cette logique est efficace pour de nombreux usages, mais elle devient moins adaptée lorsque chaque pixel doit suivre une règle mathématique différente.

Le processeur graphique fonctionne selon une autre architecture. Il peut exécuter le même programme sur un grand nombre de pixels en parallèle. Un fragment shader GLSL est ainsi appliqué à chaque fragment produit par le pipeline graphique. Pour une image de grande résolution, la même logique est évaluée sur une quantité considérable de coordonnées, avec une parallélisation conçue pour ce type de calcul.

La différence est structurelle:

Cette distinction explique pourquoi le GLSL est utilisé dans des installations interactives, des environnements immersifs et des œuvres génératives. L’artiste ne dessine pas nécessairement chaque élément. Il décrit une relation entre les coordonnées de l’écran, le temps, des paramètres de contrôle et une fonction de couleur.

Le gain n’est pas seulement une question de vitesse. Le modèle mental change. Une forme n’est plus obligatoirement un objet stocké en mémoire. Elle peut être la conséquence d’une équation. Une texture n’est plus uniquement un fichier importé. Elle peut être recalculée à chaque image. Un mouvement n’est plus une suite d’images préparées à l’avance. Il peut résulter d’une fonction continue du temps.

Pourquoi cette architecture intéresse l’art génératif

Dans une œuvre générative, le nombre de paramètres peut rapidement dépasser ce qu’un dessin manuel permet de contrôler efficacement. Une fonction peut intégrer:

• les coordonnées normalisées de l’écran;
• la position du pointeur ou d’un capteur;
• une valeur temporelle;
• des fonctions trigonométriques;
• des distances à des formes géométriques;
• une texture ou une donnée audio;
• des règles de mélange entre plusieurs couches.

Le GPU applique alors la même structure de calcul à l’ensemble de l’image. Le résultat est directement exploitable pour une animation en temps réel, à condition que le coût de chaque calcul reste compatible avec la fréquence d’affichage visée.

Le seuil de référence couramment utilisé est de 60 images par seconde. À cette fréquence, une nouvelle image doit être produite environ toutes les 16,7 millisecondes. Ce délai inclut l’exécution du shader, mais aussi les autres étapes du rendu, la gestion de l’application et l’affichage. Le shader ne dispose donc pas de 16,7 millisecondes entièrement à lui seul.

Un shader efficace ne calcule pas moins parce qu’il est simplifié graphiquement. Il calcule moins parce que sa structure est adaptée au parallélisme du processeur graphique.

Anatomie d’un fragment shader: du vecteur vec4 aux coordonnées UV

Un fragment shader reçoit des informations associées au fragment qu’il doit produire. Dans sa forme la plus simple, il utilise les coordonnées du point traité pour déterminer une couleur. La sortie est généralement un vecteur vec4 composé de quatre valeurs: rouge, vert, bleu et alpha.

La structure conceptuelle peut être résumée ainsi:

1. récupérer les coordonnées du fragment;

2. les transformer dans un espace utile;

3. appliquer une ou plusieurs fonctions;

4. convertir le résultat en valeurs de couleur;

5. retourner un vec4.

Les coordonnées dites UV sont souvent représentées par un vec2. Elles décrivent la position du pixel dans un espace bidimensionnel. Dans de nombreux contextes, la valeur u correspond à l’axe horizontal et v à l’axe vertical. Les coordonnées peuvent être normalisées entre zéro et un, ce qui permet de raisonner sur la composition indépendamment de la résolution physique.

Un point situé au centre de l’écran peut ainsi être représenté par une transformation autour de vec2(0.5). Cette opération est élémentaire, mais elle conditionne une grande partie des effets visuels. Sans centrage, les distances et les rotations sont calculées par rapport à un coin de l’image. Avec centrage, les fonctions radiales, les cercles et les déformations deviennent plus prévisibles.

Les types de données qui structurent le calcul

Le GLSL utilise des scalaires comme float et int, ainsi que des vecteurs vec2, vec3 et vec4. Ces types ne sont pas de simples conteneurs pratiques. Ils correspondent à la manière dont les opérations sont exécutées et regroupées dans le pipeline graphique.

Un vec2 sert par exemple à stocker une position ou des coordonnées UV. Un vec3 peut représenter une couleur RGB, une position tridimensionnelle ou un vecteur directionnel. Un vec4 ajoute une quatrième composante, souvent utilisée pour l’alpha ou pour représenter une position homogène.

Le GLSL permet aussi le swizzling, c’est-à-dire la sélection ou la réorganisation de composantes à l’aide de suffixes comme .xyzw ou .rgba. Une expression appliquée à un vecteur peut ainsi extraire ses deux premières composantes, réordonner ses canaux ou dupliquer une valeur. Cette notation réduit le volume syntaxique et correspond bien aux opérations sur les données graphiques.

Les fonctions de base jouent un rôle déterminant:

• length(uv) calcule la longueur d’un vecteur et sert notamment à mesurer une distance au centre;
• step() produit un masque abrupt selon un seuil;
• smoothstep() crée une transition progressive entre deux seuils;
• sin() et cos() permettent de produire des variations périodiques;
• mix() interpole entre deux valeurs ou deux couleurs;
• dot() calcule un produit scalaire utile pour les directions, les projections et certains effets d’éclairage.

La création visuelle avec GLSL consiste souvent à combiner ces opérations. Une forme circulaire peut être obtenue à partir de la distance au centre. Un masque peut isoler une zone de l’écran. Une interpolation peut mélanger deux couleurs en fonction de cette distance. Une fonction temporelle peut ensuite déplacer ou déformer le résultat.

Le rôle du temps et des paramètres externes

Un shader statique produit une image fixe. Pour obtenir une animation, le programme doit recevoir une valeur temporelle. Cette donnée est généralement transmise depuis l’application qui héberge le shader. Le shader peut alors recalculer la position d’une forme, la fréquence d’une oscillation ou l’intensité d’une distorsion à chaque image.

La même logique s’applique aux interactions. Un pointeur, une valeur audio, une température ou un capteur de mouvement peuvent être convertis en paramètres numériques. Le shader reste identique; seules ses entrées changent. Cette séparation facilite la réutilisation du programme dans différents dispositifs.

Pour une installation, cette modularité est utile. La couche visuelle peut être développée indépendamment du système de captation. Les entrées peuvent évoluer sans nécessiter une réécriture complète du rendu. En revanche, cette souplesse déplace le risque vers l’intégration: formats, fréquence de mise à jour, synchronisation et gestion des valeurs hors limites doivent être traités par l’environnement d’exécution.

Raymarching et fonctions de distance: sculpter sans maillage 3D

Le GLSL permet de produire des images 2D directement à partir des coordonnées de l’écran. Il peut également simuler des volumes et des scènes tridimensionnelles sans recourir à un maillage 3D traditionnel. La technique la plus caractéristique est le raymarching, souvent combiné à des fonctions de distance signées, ou SDF.

Une SDF décrit la distance entre un point de l’espace et la surface d’une forme. Selon le signe de la valeur, le point peut se trouver à l’intérieur ou à l’extérieur de l’objet. Une sphère, un tore ou un pavé peuvent ainsi être représentés par une fonction mathématique plutôt que par une liste de sommets et de faces.

Le raymarching utilise cette information pour avancer le long d’un rayon projeté depuis la caméra. À chaque étape, le shader évalue la distance minimale estimée jusqu’à une surface. Il peut alors avancer d’une quantité correspondante, au lieu de progresser avec un pas fixe. Lorsque la distance devient suffisamment faible, le rayon est considéré comme ayant atteint l’objet.

Cette méthode offre une grande flexibilité:

• les formes géométriques peuvent être combinées par union, intersection ou soustraction;
• les surfaces peuvent être déformées par des fonctions périodiques;
• les volumes peuvent être répétés dans l’espace;
• des transitions peuvent être ajoutées entre plusieurs objets;
• les matériaux peuvent être calculés à partir de la position et de la normale estimée.

Le coût est une augmentation rapide du nombre de calculs. Chaque pixel peut nécessiter plusieurs évaluations de distance. Chaque évaluation peut elle-même appeler une fonction complexe ou parcourir plusieurs objets. À haute résolution, la charge augmente directement avec le nombre de fragments traités.

Combiner des formes sans construire une scène complète

Une SDF de sphère peut servir de base à un système beaucoup plus complexe. On peut la déplacer, la répéter, la déformer ou la fusionner avec une autre fonction. La représentation reste compacte, mais la complexité opérationnelle augmente avec le nombre de transformations.

Les opérateurs de combinaison doivent être choisis en fonction du résultat recherché:

• l’union conserve la forme la plus proche;
• l’intersection conserve la zone commune;
• la soustraction retire une forme d’une autre;
• une union progressive crée une transition moins dure entre deux volumes.

Le détail technique a une conséquence esthétique directe. Une combinaison brutale produit une limite nette. Une transition progressive produit une matière continue. Dans les œuvres génératives, cette différence peut être animée par un paramètre temporel ou par une donnée externe.

Le calcul de la lumière peut ensuite exploiter la distance estimée. Une normale de surface est approximée à partir de plusieurs évaluations proches du point courant. Cette normale permet de calculer un éclairage directionnel, des ombres ou une variation de contraste. Chaque ajout augmente toutefois le nombre d’appels et donc la pression sur le temps de rendu.

Le raymarching n’est pas une solution universelle

Le raymarching est pertinent lorsque la forme elle-même est une fonction et que le contrôle procédural constitue le cœur de l’œuvre. Il est moins adapté lorsque la scène comporte de nombreux objets détaillés, des textures lourdes ou des interactions physiques complexes. Dans ce cas, un pipeline 3D plus traditionnel peut offrir une meilleure répartition du travail.

La décision dépend du système complet:

• résolution de sortie;
• nombre de rayons ou d’étapes par pixel;
• complexité des SDF;
• présence d’ombres et de réflexions;
• fréquence d’affichage;
• matériel disponible;
• nécessité de maintenir une interaction stable.

Pour une installation publique, la moyenne des performances ne suffit pas. Les baisses ponctuelles produisent une friction visible: l’animation ralentit, le geste devient moins précis et l’œuvre semble ne plus répondre. Le budget de calcul doit donc être évalué sur les cas les plus coûteux, pas seulement sur une image simple.

Shadertoy et l’écosystème du code créatif moderne

Shadertoy occupe une place centrale dans la communauté des artistes et développeurs qui travaillent avec les fragment shaders. La plateforme permet d’écrire, d’exécuter et de partager des shaders directement dans le navigateur, via WebGL. Elle réduit le coût d’entrée technique: pas besoin de configurer immédiatement un moteur 3D complet, une chaîne de compilation ou une application d’installation.

Cette accessibilité ne transforme pas le GLSL en outil simpliste. Elle offre plutôt un environnement de prototypage rapide. Un artiste peut tester une fonction de distance, observer l’effet d’une transformation ou comparer deux stratégies de composition avec un cycle d’itération court.

La plateforme est également utile pour étudier la structure des œuvres existantes. Le code permet d’identifier:

• la normalisation des coordonnées;
• la gestion de l’aspect de l’image;
• les fonctions de distance employées;
• les constantes qui contrôlent la qualité;
• la logique d’animation;
• les opérations les plus coûteuses.

Pour débuter en GLSL dans le design interactif, cette lecture est plus efficace qu’une accumulation de tutoriels isolés. Il faut observer le flux complet: entrée des coordonnées, transformations, fonctions intermédiaires, calcul de la couleur et sortie finale.

Une méthode d’apprentissage qui limite la friction

La progression la plus opérationnelle consiste à isoler les problèmes. Commencer par un shader qui renvoie directement les coordonnées UV permet de vérifier l’espace de travail. Ajouter ensuite une distance au centre montre comment construire un cercle. Une fonction de seuil produit un masque. Une interpolation introduit la couleur. Le temps transforme enfin la forme fixe en animation.

Cette séquence permet de repérer les erreurs à leur source. Si le rendu est inversé, le problème vient probablement des coordonnées. Si la forme est elliptique, l’aspect de l’écran n’est pas corrigé. Si l’animation saute, le paramètre temporel ou la fréquence d’actualisation doit être examiné.

Une base technique solide repose sur quelques réflexes:

1. afficher les coordonnées sous forme de couleur pour contrôler leur orientation;

2. visualiser les distances avant de les convertir en masques;

3. limiter le nombre de transformations simultanées;

4. conserver des paramètres explicites pour la taille, la vitesse et l’intensité;

5. mesurer l’effet de chaque nouvelle opération sur le temps de rendu;

6. séparer les fonctions géométriques des fonctions de composition.

Cette méthode évite un problème fréquent du code créatif: empiler des effets jusqu’à obtenir une image séduisante, sans savoir quelle partie du programme produit la charge principale. Le résultat peut fonctionner sur une machine de développement et perdre toute stabilité une fois intégré à un écran plus grand ou à un dispositif interactif.

Optimisation des shaders pour les installations: tenir le cap des 60 images par seconde

L’optimisation d’un shader GLSL ne consiste pas à réduire arbitrairement le nombre de lignes. Une fonction courte peut contenir des opérations coûteuses, tandis qu’une structure plus longue peut rester efficace si elle correspond bien au modèle d’exécution du processeur graphique.

Le premier indicateur est le nombre d’opérations réalisées par fragment. Dans un shader 2D, la charge totale dépend notamment de la résolution. Doubler la largeur et la hauteur d’une image ne double pas le nombre de pixels: il le multiplie par quatre. Une composition qui reste fluide en basse résolution peut donc dépasser rapidement son budget en sortie haute définition.

Le deuxième indicateur est le nombre d’itérations. Les boucles utilisées dans le raymarching, le flou ou les répétitions spatiales doivent être dimensionnées selon la qualité nécessaire. Chaque itération est exécutée sur un grand nombre de fragments. Une boucle modeste à l’échelle du code peut représenter une charge importante à l’échelle de l’image.

Les leviers les plus efficaces

Pour maintenir une animation stable, plusieurs décisions ont un impact immédiat:

• réduire la résolution de calcul lorsque la sortie visuelle le permet;
• limiter le nombre d’étapes du raymarching;
• éviter de recalculer plusieurs fois une même valeur;
• simplifier les fonctions appelées dans chaque fragment;
• préférer des opérations adaptées aux vecteurs;
• contrôler les branches conditionnelles complexes;
• séparer les éléments statiques des éléments recalculés à chaque image;
• ajuster la qualité selon le matériel cible.

La gestion de l’aspect de l’image doit également être explicite. Une distance calculée sur des coordonnées non corrigées peut produire des cercles déformés ou des volumes étirés. Le problème est visuel, mais sa cause est architecturale: l’espace mathématique ne correspond pas à l’espace physique de l’écran.

Le cas des installations publiques

Une œuvre présentée dans un lieu culturel ne fonctionne pas dans les mêmes conditions qu’un prototype affiché sur l’ordinateur de son auteur. La machine peut changer, la température évoluer, l’écran avoir une autre résolution et les visiteurs solliciter l’interaction de manière imprévisible. L’installation doit absorber ces variations sans modifier son comportement principal.

L’optimisation doit donc intégrer l’environnement d’exploitation:

Le KPI principal reste la régularité de l’affichage. Une moyenne élevée ne compense pas des chutes répétées. Il faut observer le temps de calcul image par image, la consommation mémoire et la réaction du système aux paramètres extrêmes.

Du prototype à l’œuvre: penser l’intégration avant l’esthétique

Un shader peut être techniquement correct et rester inutilisable dans une œuvre installée. Le passage du navigateur à un dispositif culturel introduit des contraintes supplémentaires: contrôle de la fenêtre, gestion du plein écran, synchronisation avec des capteurs, reprise après erreur et compatibilité du contexte graphique.

L’intégration doit définir précisément les responsabilités de chaque couche:

• l’application gère les entrées, l’interface et le cycle de vie;
• le shader calcule le rendu visuel;
• le système de contrôle fournit les paramètres;
• la couche de sortie adapte la résolution et le format d’affichage;
• la supervision vérifie que le rendu reste actif.

Cette séparation réduit la friction lors des modifications. Le shader peut évoluer sans modifier la logique de billetterie, de médiation ou de captation. Inversement, un changement de capteur ne doit pas imposer une réécriture de toutes les fonctions visuelles.

Pour une association ou une structure culturelle qui produit plusieurs œuvres, cette approche apporte un gain de scalabilité. Les fonctions communes — gestion des coordonnées, correction de l’aspect, contrôle du temps, paramètres d’interaction — peuvent être standardisées. Chaque artiste conserve ensuite son propre langage visuel dans les fonctions de génération et de composition.

Le risque est de transformer cette standardisation en contrainte créative. Il faut donc normaliser l’infrastructure, pas les résultats. Une même interface de paramètres peut alimenter des œuvres très différentes: formes abstraites, textures procédurales, volumes simulés ou compositions réactives.

Le bon pipeline GLSL ne remplace pas le travail artistique. Il supprime les frictions qui empêchent l’œuvre de fonctionner à son niveau prévu.

Ce que les artistes numériques doivent réellement apprendre

Le GLSL ne demande pas de maîtriser immédiatement toute l’architecture graphique. Il faut d’abord comprendre la relation entre une coordonnée et une couleur. Cette relation constitue le noyau opérationnel des shaders pour artistes numériques.

La progression peut suivre quatre niveaux:

1. Espace de l’image

Comprendre les coordonnées UV, le centrage, la correction de l’aspect et la conversion des valeurs en couleurs.

2. Fonctions et formes

Utiliser les distances, les seuils, les interpolations et les fonctions périodiques pour construire des motifs contrôlables.

3. Temps et interaction

Introduire l’animation, le pointeur, les données audio ou les capteurs en conservant des paramètres stables.

4. Performance et intégration

Mesurer le coût du rendu, choisir une résolution adaptée et connecter le shader à un système de production fiable.

Cette progression est plus rentable qu’un apprentissage centré sur la syntaxe. Le GLSL devient intéressant lorsque chaque instruction répond à une fonction visuelle ou à une contrainte d’exécution. Les types, les vecteurs et les fonctions mathématiques ne sont pas des notions séparées: ils décrivent le parcours complet entre une position de pixel et une image.

Conclusion: traiter le shader comme une infrastructure visuelle

Le GLSL est un langage de programmation spécialisé pour le processeur graphique. Dans l’art génératif, sa valeur vient de l’exécution parallèle des calculs, de la précision accordée à chaque pixel et de la possibilité de représenter des formes par des fonctions plutôt que par des ressources lourdes.

Les fragment shaders constituent le point d’entrée le plus direct. Les coordonnées UV fournissent l’espace de travail. Les vecteurs organisent les données. Les fonctions de distance et le raymarching permettent de produire des volumes sans maillage 3D traditionnel. Shadertoy réduit le coût du prototypage. L’optimisation transforme enfin une démonstration en système exploitable dans une installation.

La recommandation d’implémentation est simple: commencer par un shader minimal, mesurer chaque ajout, séparer le calcul visuel de la logique d’interaction et définir dès le départ un budget de rendu compatible avec 60 images par seconde. Le résultat ne dépend pas uniquement de la sophistication des effets. Il dépend de la capacité du pipeline à rester stable lorsque la résolution, les entrées et les conditions d’exposition changent.