07 — Terrain d’expérimentation
Un shader GLSL écrit à la main, et le GPU coupé quand personne ne regarde
Une animation 3D dans le navigateur, programmée directement au niveau de la carte graphique, sans bibliothèque d'effets toute faite. Un exercice de style, pour la performance.
Un profil qui fait de la donnée toute la journée a besoin d'un terrain où l'exigence est ailleurs : dans le rendu temps réel, où chaque milliseconde par image se voit. Ce projet est ce terrain — et le shader n'est pas repris d'une bibliothèque, il est écrit ligne à ligne.
Le shader
Le matériau est un shader brut : vertex et fragment écrits intégralement, sans passer par un assistant ni par la modification d'un matériau existant. Le bruit simplex 3D est recopié à la main en GLSL avec ses fonctions auxiliaires — une quarantaine de lignes denses, attribuées à leur auteur d'origine, sans aucune dépendance.
La géométrie est un icosaèdre subdivisé plutôt qu'une sphère classique, pour une raison précise : la densité de sommets y est uniforme, sans compression aux pôles — indispensable pour un déplacement par bruit sans artefact. Le niveau de subdivision est commenté dans le code : ~20 000 triangles pour un rendu lisse, au lieu de ~320 000.
Le déplacement combine deux appels au bruit à des fréquences et des vitesses différentes, l'un dérivant dans un sens et l'autre à contresens : la basse fréquence donne la grande respiration, la haute le détail de surface. Les deux sont pondérés — un bruit fractal à deux octaves — puis le sommet est poussé le long de sa propre normale, avec une amplitude modulée par la position du curseur.
Le fragment repose sur un effet de Fresnel : plus la surface est vue en incidence rasante, plus il tend vers un. Il sert deux fois — à mélanger une troisième couleur uniquement sur les bords, et à ajouter de la luminance, ce qui crée le liseré que le bloom fait déborder. La couleur de base est un dégradé procédural piloté par la valeur de bruit du sommet : les crêtes et les creux de la déformation n'ont pas la même teinte. Aucune texture, aucun matcap.
Les optimisations, et pourquoi
- La boucle de rendu s'arrête complètement quand la scène sort de l'écran ou que l'onglet passe en arrière-plan, pilotée par un observateur d'intersection et l'évènement de visibilité. C'est la meilleure optimisation du projet — beaucoup de démonstrateurs WebGL continuent de chauffer le GPU en bas de page.
- Le delta est borné à un trentième de seconde dans chaque boucle : après une pause, la première image rapporte un delta énorme et provoque un saut de rotation visible.
- L'anticrénelage matériel est désactivé volontairement — les cibles de rendu multi-échantillonnées se recréent sur les hoquets du pilote et produisent des images noires ; le flou du bloom suffit sur une forme lisse.
- Le ratio de pixels est plafonné plutôt que rendu adaptatif, parce qu'un ratio adaptatif redimensionne les cibles de rendu en cours de route.
- Le rendu est exclu du serveur par import dynamique : le moteur 3D n'est jamais exécuté côté serveur.
- Le mode strict de React est désactivé, avec la justification en commentaire : il double-monte les effets en développement, ce qui recrée le contexte WebGL et provoque un flash noir.
- Les particules utilisent la formule correcte de distribution uniforme sur une sphère, avec mélange additif et écriture de profondeur désactivée — le trio classique pour un halo qui s'additionne sans se masquer lui-même.
L’orchestration du mouvement
Toutes les animations passent par un contexte isolé avec nettoyage systématique au démontage — préchargeur avec compteur animé sur un objet plutôt que sur le DOM, lettres qui remontent en cascade, révélations au défilement, compteurs, effet magnétique sur les boutons avec retour élastique.
Le défilement fluide est raccordé à la bibliothèque d'animation par la méthode moderne — un seul rythme partagé, resynchronisation à chaque image, lissage de latence désactivé — et non par le mécanisme de délégation qu'on trouve encore dans la plupart des tutoriels. Et si l'utilisateur a demandé à réduire les animations, le défilement fluide n'est jamais instancié.
Ce que je ne prétends pasDéplier
- Ce n'est pas un site en ligne : les liens de contact et les destinations des projets sont restés à l'état de gabarit, et aucune version de production n'a été compilée.
- Le responsive tient sur un seul point de rupture. Ça se voit sur les tailles intermédiaires.
- Deux dépendances déclarées ne sont jamais importées, et la documentation du projet a dérivé du code sur deux ou trois paramètres.
- Ce que je revendique, c'est le contenu technique : le shader, le pipeline de rendu et les optimisations de boucle. Le reste est une coquille d'exposition.
Stack
Rendu
- GLSL
- Three.js
- React Three Fiber
- Post-processing (bloom, vignette)
Mouvement
- GSAP
- ScrollTrigger
- Lenis
- Vanilla rAF
Cadre
- Next.js 14
- TypeScript
- Tailwind CSS
- next/font