Accueil / Shaders
GLSL, WGSL et TSL pour débutantsLes shaders : la couleur de chaque pixel, calculée à la volée.
Un shader est un petit programme qui s’exécute sur la carte graphique, des millions de fois par seconde. C’est lui qui donne à un objet son aspect : bois, métal, eau, verre, ou un effet qu’aucune matière réelle ne produit.
Deux programmes, une même idée.
Chaque image 3D passe par deux shaders : l’un place les sommets, l’autre colore les pixels. Les deux tournent en parallèle sur des milliers de cœurs.
Les sommetsLe vertex shader déplace
Il reçoit chaque sommet et décide de sa position. C’est lui qui fait onduler un drapeau, respirer un personnage ou se soulever une vague.
Les pixelsLe fragment shader colore
Il reçoit chaque pixel et calcule sa couleur : lumière, texture, reflet, transparence. Une même forme peut ainsi changer complètement d’aspect.
Les matièresUne forme, mille aspects
Les matériaux tout prêts de Three.js sont eux-mêmes des shaders. Écrire le sien, c’est sortir des matières standard.
La forme reste, la surface change.
Ce nœud est déformé et coloré par un shader écrit en TSL. Les curseurs modifient ses réglages pendant qu’il tourne, sans rien recharger.
Ce que vous voyez
Une onde parcourt le nœud. Sa hauteur et sa fréquence sont deux simples nombres envoyés au shader : la carte graphique recalcule chaque sommet et chaque pixel à chaque image.
Matière
Votre navigateur sera testé au lancement de la démo.
GLSL, WGSL, TSL : qui fait quoi ?
GLSL, le langage de WebGL
Hérité d’OpenGL, le GLSL ressemble au langage C. Il est connu de toute une génération de développeurs graphiques et d’innombrables exemples existent, notamment sur Shadertoy.
WGSL, le langage de WebGPU
Le WGSL a été conçu pour le web avec WebGPU. Plus strict que le GLSL, il est pensé pour être vérifié et traduit vers les interfaces graphiques de chaque système (Metal, Direct3D 12, Vulkan). C’est aussi lui qui écrit les compute shaders, ces programmes qui calculent sans dessiner.
TSL, pour ne pas choisir
Dans Three.js, le TSL permet de décrire un shader en JavaScript. Three.js le traduit en WGSL pour WebGPU, ou en GLSL pour WebGL. C’est la solution la plus simple pour un projet qui doit tourner partout. Voir la page Three.js et TSL.
Ce que les shaders permettent.
L’eau
Vagues, reflets, transparence, écume au bord : presque toujours un shader qui déplace une surface plane.
Les matières stylisées
Rendu dessin animé, contours encrés, aquarelle, hologramme : des effets qu’aucune matière réaliste ne donne.
Les transitions
Un objet qui se dissout, apparaît en balayage ou passe du filaire au plein : un seuil qui varie dans le temps.
Le calcul pur
Avec WebGPU, des milliers de particules ou une simulation de foule calculées entièrement sur la carte graphique.
Shaders, les questions courantes.
Les shaders ralentissent-ils un site ?
Un shader simple ne coûte presque rien. Un shader complexe appliqué à tout l’écran, sur un téléphone à écran haute définition, peut en revanche faire chuter la fluidité. Il faut tester sur l’appareil visé.
Peut-on convertir un shader GLSL en WGSL ?
Oui, des outils existent et les assistants d’IA le font bien, mais une relecture reste nécessaire : les deux langages n’ont pas exactement les mêmes règles. Écrire en TSL évite la question.
Où trouver des exemples de shaders ?
Shadertoy rassemble des dizaines de milliers d’effets en GLSL, à étudier. Les exemples de Three.js montrent des shaders TSL prêts à l’emploi.
À lire ensuite.
Parlons de ce que la 3D temps réel peut faire pour vous.
Configurateur, visite, carte interactive, formation en réalité virtuelle : je vous dis franchement si la 3D web est la bonne réponse.