WebGL, Three.js, Framer Motion : quand et comment les utiliser ?

Votre prestataire vous propose "des animations en Three.js". Votre designer veut "du Framer Motion partout". Un développeur vous parle de "WebGL natif pour la performance". Trois technologies. Trois discours. Et vous, vous voulez juste un site qui impressionne vos visiteurs sans exploser votre budget.

Le problème : 90% des agences utilisent ces termes de manière interchangeable. Elles vendent du Three.js là où du Framer Motion suffirait. Ou pire, elles collent du Framer Motion là où seul du WebGL tiendrait la route. Le résultat ? Des sites lents, des budgets gaspillés et des compromis techniques qui se paient pendant des années.

Aujourd'hui, on pose les choses clairement. Pas un tutoriel pour développeurs. Un guide stratégique pour décideurs qui veulent comprendre ce qu'ils achètent et pourquoi.

Avant de parler stratégie, posons les bases. Ces trois technologies se situent à des niveaux d'abstraction radicalement différents. Comprendre cette hiérarchie, c'est comprendre 80% des décisions à prendre.

WebGL : le moteur

WebGL (Web Graphics Library) est une API JavaScript qui parle directement au GPU (processeur graphique) de votre appareil. C'est le niveau le plus bas : vous contrôlez chaque pixel, chaque vertex, chaque shader. C'est la technologie utilisée par Google Earth, les jeux vidéo en navigateur et les visualisations de données complexes.

Analogie : WebGL, c'est l'assembleur du web visuel. Puissant, illimité, mais écrire un site entier en WebGL brut, c'est comme construire une maison en taillant chaque brique à la main.

Three.js : la boîte à outils 3D

Three.js est une bibliothèque JavaScript qui simplifie l'utilisation de WebGL. Au lieu d'écrire des centaines de lignes de code pour afficher un cube, Three.js vous permet de le faire en 10 lignes. Elle gère les caméras, les lumières, les matériaux, les ombres, les animations, le tout en s'appuyant sur WebGL en arrière-plan.

Three.js, c'est l'architecte qui utilise le moteur WebGL. Plus de 80% des expériences 3D sur le web utilisent Three.js (source : Three.js GitHub), y compris les sites les plus primés aux Awwwards.

Framer Motion : l'animateur d'interface

Framer Motion est une bibliothèque d'animation pour React. Son domaine : les animations d'interface utilisateur. Transitions de page, apparitions d'éléments, hover effects, animations au scroll, drag & drop. Pas de 3D. Pas de GPU. Du DOM pur, animé avec une syntaxe élégante et des performances optimisées.

Framer Motion, c'est le décorateur d'intérieur. Il ne construit pas la structure, il rend chaque pièce remarquable.

Comparaison technique des trois technologies d'animation web

Le point crucial de ce tableau : ces outils ne sont pas en compétition. Ils opèrent à des niveaux différents. Comparer Three.js et Framer Motion, c'est comme comparer un moteur de Formule 1 et un système de suspension. Les deux sont essentiels, mais pour des fonctions radicalement différentes.

Si votre site est construit en React (Next.js, Remix, Gatsby), Framer Motion devrait être votre premier réflexe. Pas par défaut. Par logique.

Ce que Framer Motion fait excellemment

L'avantage décisif : le rapport qualité/coût

Framer Motion est la technologie qui offre le meilleur retour visuel par euro investi. Un développeur React compétent peut implémenter un système complet de micro-interactions et de transitions de page en 2 à 5 jours. Le même résultat en Three.js ou WebGL prendrait 3 à 4 semaines et coûterait 5x plus cher.

Pour un site vitrine, un SaaS, un portfolio, une landing page : Framer Motion couvre 80% des besoins d'animation avec 20% du budget d'une solution 3D.

Quand Framer Motion atteint ses limites

Framer Motion anime le DOM (les éléments HTML de votre page). Cela signifie qu'il ne peut pas :

Si votre besoin inclut l'un de ces points, vous entrez dans le territoire de Three.js.

Three.js est la bonne réponse quand vous voulez que votre visiteur ne regarde plus votre site, mais qu'il l'explore.

Les cas d'usage qui justifient Three.js

1. Présentation de produit physique. Vous vendez un objet ? Laissez le visiteur le faire tourner, zoomer sur les détails, changer les couleurs en temps réel. Un configurateur 3D vaut 10 photos de catalogue. Porsche, Nike, Apple utilisent tous cette approche pour leurs produits phares.

2. Storytelling immersif. Votre marque a une histoire complexe à raconter ? Un parcours narratif en 3D, où le scroll guide le visiteur à travers un environnement, crée une mémorisation 6x supérieure à un parcours texte-image classique (source : Psychological Science).

3. Visualisation de données complexes. Si vos données sont multidimensionnelles (géographiques, temporelles, relationnelles), une visualisation 3D interactive permet de comprendre en 5 secondes ce qu'un tableau de chiffres ne communique pas en 5 minutes.

4. Marqueur de positionnement tech. Des entreprises comme Linear ou Stripe utilisent Three.js pour un seul objectif : prouver qu'elles sont techniquement supérieures. Le header animé de Linear ne vend rien directement. Il communique une identité. Et cette identité attire les clients les plus exigeants.

Le coût réel d'une intégration Three.js

Soyons transparents. Three.js est un investissement significatif :

Comptez un investissement 3 à 5x supérieur à une intégration Framer Motion pour un résultat équivalent en impact visuel. La question n'est pas "est-ce que Three.js est mieux". C'est : "est-ce que mon projet justifie cet investissement ?"

Utiliser du WebGL brut en 2026, c'est comme écrire un site en assembleur quand tout le monde code en JavaScript. C'est rarement nécessaire. Mais quand c'est nécessaire, rien d'autre ne suffit.

Les (rares) cas où le WebGL natif s'impose

Shaders personnalisés avancés. Les shaders sont des programmes qui s'exécutent directement sur le GPU. Ils permettent de créer des effets visuels impossibles autrement : déformations fluides, simulations physiques, effets de post-processing cinématographiques. Three.js supporte les shaders, mais certains effets exigent un contrôle plus fin que ce que Three.js expose.

Performance critique sur des volumes massifs. Quand vous devez afficher 500 000+ particules en temps réel, ou simuler des systèmes physiques complexes (fluides, tissus, fumée), chaque couche d'abstraction coûte des millisecondes. Sur un projet où chaque frame doit tenir en 16ms (60 FPS), le surcoût de Three.js peut devenir un problème.

Expériences artistiques et créatives. Les studios créatifs qui concourent aux Awwwards ou au FWA poussent parfois le web dans ses derniers retranchements. Ces projets sont des oeuvres d'art numérique autant que des sites web et le WebGL natif leur donne une liberté créative totale.

La réalité pour 95% des projets

Si vous lisez cet article en tant que décideur, vous n'avez probablement pas besoin de WebGL natif. Three.js couvre 95% des besoins 3D web avec une productivité incomparablement supérieure. Un prestataire qui vous vend du "WebGL sur mesure" sans pouvoir justifier précisément pourquoi Three.js ne suffit pas est soit mal informé, soit en train de gonfler la facture.

Voici la méthode que nous utilisons en interne pour chaque projet. Elle fonctionne en 4 questions :

Question 1 : Avez-vous besoin de 3D interactive ?
Un objet 3D qu'on peut manipuler, un environnement à explorer, un configurateur produit ?
=> Non : Framer Motion. Fin de la réflexion.
=> Oui : passez à la question 2.

Question 2 : Votre scène 3D est-elle "standard" ?
Un produit à faire tourner, des particules décoratives, un environnement simple ?
=> Oui : Three.js. C'est le bon outil.
=> Non : passez à la question 3.

Question 3 : Avez-vous besoin de shaders GPU personnalisés ?
Des effets visuels uniques impossibles à reproduire avec les matériaux Three.js standard ?
=> Non : Three.js avec des shaders GLSL intégrés. Three.js le supporte nativement.
=> Oui : WebGL natif (ou Three.js + shaders custom) selon le niveau de contrôle requis.

Question 4 : Les deux ?
Un site complet avec des transitions élégantes ET un élément 3D spectaculaire ?
=> Framer Motion + Three.js ensemble. C'est la combinaison la plus puissante du web moderne. Framer Motion gère l'interface, Three.js gère les éléments 3D. Chacun fait ce qu'il fait le mieux.

Erreur 1 : utiliser Three.js pour des animations d'interface. Animer un bouton avec Three.js, c'est utiliser un lance-roquettes pour ouvrir une porte. Ça fonctionne, mais le coût est absurde et les performances s'effondrent. Si vous n'affichez pas de 3D, Framer Motion (ou même du CSS) est la bonne réponse.

Erreur 2 : ignorer le mobile dès la conception. Un site Three.js qui tourne à 60 FPS sur un MacBook Pro peut afficher 15 FPS sur un iPhone 12. 65% du trafic web est mobile (source : StatCounter Global Stats). Si votre expérience 3D n'est pas pensée mobile dès le jour 1, vous offrez une expérience dégradée à la majorité de vos visiteurs.

Erreur 3 : charger la scène 3D avant le contenu. L'erreur classique : le visiteur attend 6 secondes un loader pendant que la scène Three.js se prépare. En 2026, 53% des visiteurs quittent une page qui met plus de 3 secondes à charger (source : Google Web Vitals). La 3D doit se charger de manière progressive, après le contenu principal.

Erreur 4 : ne pas prévoir de fallback. Navigateurs anciens, GPU désactivé, mode économie de batterie, connexion lente : votre visiteur ne verra pas toujours la version spectaculaire. Un site robuste détecte les capacités de l'appareil et sert une version adaptée. Pas de 3D sur un vieux téléphone ? Une image statique élégante vaut mieux qu'un crash.

Erreur 5 : animer pour animer. Si une animation ne sert pas un objectif business (guider l'attention, créer de l'émotion, faciliter la compréhension), supprimez-la. Les sites les plus primés du monde ont un point commun : chaque animation a une raison d'exister. Les sites les plus critiqués aussi : chaque animation n'en a pas.

Parlons argent. Voici la réalité des investissements selon l'approche choisie :

Budget et délais indicatifs selon l'approche technique choisie

Ces fourchettes sont indicatives et dépendent de la complexité du projet, du nombre de pages et du niveau de polish attendu. Mais elles illustrent un point essentiel : le choix technologique a un impact direct et massif sur le budget. Choisir la mauvaise technologie peut tripler votre investissement sans tripler le résultat.

Les technologies d'animation web sont un révélateur de compétence. Voici les questions qui séparent un prestataire expert d'un généraliste :

Si vous ne retenez qu'une chose de cet article, retenez ceci :

Le piège, c'est de commencer par la technologie. "On veut du Three.js" n'est pas un brief. "On veut que nos visiteurs puissent configurer notre produit en 3D pour augmenter les conversions de 30%" en est un.

WebGL, Three.js, Framer Motion ne sont pas des arguments de vente. Ce sont des instruments. Et comme tout instrument, leur valeur dépend entièrement de la partition qu'on joue et du musicien qui les tient.

Le meilleur site web n'est pas celui qui utilise la technologie la plus avancée. C'est celui qui utilise la bonne technologie, au bon endroit, pour le bon objectif. Et ça, ce n'est pas une décision technique. C'est une décision stratégique.