Three.js, WebGPU et IA : où en est la 3D sur le web ? - FAQ #3

Camille Roux : Bonjour et bienvenue sur le podcast de Human Coders. Aujourd’hui, on va parler de Three.js. Je suis très content d’en parler, on l’a déjà un peu évoqué sur ce podcast avec Matthieu. On a fait un épisode sur l’art génératif où on parlait de certaines pièces faites avec Three.js. Matthieu avait fait de la 3D avec, moi j’en avais fait un usage un peu particulier en faisant de la 2D avec du GPGPU, mais ça n’a plus trop d’intérêt d’en faire maintenant, on en reparlera plus tard. Aujourd’hui, nous avons trois invités : David, que je connais justement par l’art génératif (on avait fait un petit projet en collab qui s’appelait The Bridge sur fx(hash)), Julian, qui est le créateur d’Anime.js, la lib qui a probablement la plus belle page de présentation de l’univers, et Renaud, qui est un grand contributeur à Three.js. Je vous laisse vous présenter tous les trois.

David Ronai : Bonjour à tous et merci pour l’invitation. Je suis David Ronai, creative technologist et creative developer. J’organise actuellement la Three.js Conf à Paris.

Julian Garnier : Salut, merci pour l’invitation. Moi c’est Julian, je suis développeur web depuis un petit moment et je me suis spécialisé dans l’animation sur le web. En ce moment, je développe une librairie d’animation open source avec pas mal de fonctionnalités liées à Three.js.

Renaud Rohlinger : Salut tout le monde, moi c’est Renaud Rohlinger. Je suis directeur technique du studio créatif Utsubo au Japon, que j’ai fondé avec un autre Français il y a six ans. Je suis aussi l’un des collaborateurs de Three.js. À la base, j’étais pas mal dédié au WebGL fallback du nouveau WebGPU renderer, et maintenant je touche un peu à tout ce qui concerne le WebGPU et la performance.

Qu’est-ce que Three.js ?
Camille Roux : David, est-ce que tu peux nous présenter Three.js pour ceux qui ne connaîtraient pas ?

David Ronai : Three.js est une librairie en JavaScript qui permet de faire de la 3D, notamment sur le web. Ça a d’abord été utilisé en Canvas, puis en WebGL, WebGL 2, et maintenant en WebGPU. Les performances deviennent de mieux en mieux. Depuis 2024-2025, et encore plus là en 2026, il y a eu énormément d’évolutions, notamment l’arrivée du WebGPU renderer dont Renaud vous parlera. Il y a aussi le TSL, qui est un langage nodal pour Three.js. Tout ce qui est “vibe coding” a fait exploser les téléchargements, que ce soit pour coder des jeux, des applications d’architecture, etc. C’est une librairie très utilisée qui a permis de créer parmi les plus beaux sites internet du web.

Camille Roux : Il y a aussi une conférence début septembre, dont le site est magnifique d’ailleurs.

David Ronai : Oui, suite à toutes ces évolutions, je trouvais qu’il manquait un lien dans la communauté. J’ai eu la chance de discuter avec Ricardo Cabello (Mr.doob), le créateur de Three.js, à Tokyo. On était d’accord pour dire qu’il y avait une énorme émulation, mais qu’on connaissait moins les gens derrière le code qu’avant. On voulait créer un lieu où on peut venir “level up”, discuter avec ses pairs et comprendre les dernières nouveautés, qu’on soit designer, fondateur ou producteur. La conférence a lieu les 10 et 11 septembre à Paris. C’est très international pour le moment, avec environ 40 % de Français et 60 % d’étrangers venant d’Inde, de Chine, du Japon, d’Amérique, du Canada, du Brésil, d’Afrique ou du Liban.

Les usages actuels de la 3D sur le web
Camille Roux : Julian et Renaud, quels sont vos regards sur les usages de Three.js aujourd’hui ?

Renaud Rohlinger : Dans mon entreprise, Three.js sert principalement à donner une image de luxe et à permettre aux marques de se différencier. Par exemple, au lieu d’avoir un e-commerce plat avec des images de t-shirts, on va créer un t-shirt en 3D interactive. On le voit de plus en plus sur les gros sites comme H&M ou Uniqlo. Three.js couvre quasiment la totalité du code open source 3D sur internet. C’est d’ailleurs pour ça que l’IA l’utilise autant : elle a été entraînée sur ce qui est disponible en open source sur le web, et comme Three.js a inondé internet, l’IA répète ce qu’elle a vu. On fait aussi beaucoup d’installations interactives. Grâce à WebGPU, on sort du côté très limité des petites expériences “à la Flash” d’il y a longtemps.

David Ronai : Pour rebondir sur l’IA, l’API de Three.js est hyper stable. Elle change très légèrement au fil du temps car elle a été très bien pensée à la base. C’est très logique, ce qui est très apprécié par les IA.

Julian Garnier : Pour compléter sur l’historique, il faut se souvenir qu’il y a 20 ans, on avait Flash qui permettait de faire des choses poussées en animation. Quand Apple a “tué” Flash sur iPhone, ça a boosté les standards du web. Mais le web, par nature (HTML/CSS/DOM), est un environnement lent pour les choses visuelles. WebGL, et maintenant WebGPU, ont permis de recréer un canvas dans lequel on n’a plus les limitations du DOM. Three.js est arrivé comme la librairie qui simplifie l’API WebGL, qui est très lourde à utiliser nativement. Elle permet de faire des effets 2D ou 3D impossibles autrement en utilisant la puissance du GPU.

WebGL vs WebGPU : une révolution de performance
Camille Roux : Renaud, tu parlais de WebGPU. Qu’est-ce que ça change concrètement ?

Renaud Rohlinger : WebGL a été conçu à une époque où on pensait que les GPU servaient juste à dessiner des pixels. Il y a 15 ans, on a compris qu’on pouvait utiliser les cartes graphiques pour calculer des choses : c’est ce qu’on appelle les compute shaders. WebGPU donne accès à ces compute shaders. Pour donner un exemple de mon travail de consultant, une sélection d’objets dans un logiciel qui prenait 500 ms ou 1 seconde en WebGL passe à 0,5 ms avec WebGPU. C’est une véritable révolution pour l’interaction et l’accélération, notamment pour faire tourner des modèles d’IA locaux directement sur sa machine.

La gestion de l’open source à l’ère de l’IA
Camille Roux : Three.js est un projet open source massif. Comment ça se passe en interne avec l’explosion du nombre d’utilisateurs ?

Renaud Rohlinger : Le projet est maintenu par Ricardo (Mr.doob) et quelques collaborateurs historiques, dont certains sont financés par Google. Ce qui fait que c’est aussi stable, c’est que Google ne dirige rien du tout sur la direction artistique ou technique, à part pousser WebGPU. Aujourd’hui, on est à environ 13 millions de téléchargements par semaine. Le problème actuel, c’est l’IA. N’importe qui peut générer une Pull Request (PR) en une phrase avec Claude ou ChatGPT. On reçoit énormément de PR d’étudiants qui veulent juste avoir une contribution sur un gros projet pour leur CV, mais souvent ces PR sont de mauvaise qualité ou n’ont pas de sens technique.

David Ronai : Mr.doob m’expliquait qu’il ferme beaucoup de PR pour les refaire lui-même. C’est parfois plus efficace que de corriger une PR bancale. Ils ont aussi créé un système qui utilise l’IA pour checker automatiquement si les PR présentent des risques de sécurité. C’est l’IA pour fixer les problèmes de l’IA.

Julian Garnier : J’ai le même problème avec Anime.js. Aujourd’hui, quasiment toutes les issues sont écrites par des IA. Je les passe moi-même dans Claude pour vérifier si elles font sens. On ne communique plus qu’avec des IA interposées, ce qui est assez bizarre, mais ça fait gagner un temps fou.

TSL : coder des shaders en JavaScript
Camille Roux : David, tu as mentionné le TSL. C’est quoi exactement ?

David Ronai : TSL signifie Three.js Shader Language. Avant, pour faire des shaders, on écrivait du GLSL dans des chaînes de caractères (strings) sans auto-complétion, sans couleur syntaxique, c’était l’enfer. Avec TSL, on code directement en JavaScript. On bénéficie de toute la puissance de l’écosystème JS. C’est un système de nœuds qui compile le code final soit en GLSL pour WebGL, soit en WGSL pour WebGPU.

Renaud Rohlinger : L’avantage majeur, c’est la flexibilité. Avant, on faisait du “string patching” pour modifier les matériaux de Three.js, c’était très sale techniquement. TSL remplace ça. Par contre, ça introduit une nouvelle complexité : la compilation. Construire ces milliers de nœuds et les connecter prend du temps. Sur un très bon device, ça peut prendre 10 ms, mais sur un téléphone, on peut monter à 30 ms ou plus. Si vous avez 40 objets complexes, on arrive vite à 2 secondes de chargement, ce qui n’est pas acceptable sur le web. C’est pour ça qu’on travaille sur des systèmes de pré-compilation.

L’IA au service du développement 3D
Camille Roux : Comment utilisez-vous l’IA dans votre workflow quotidien ?

Renaud Rohlinger : Je ne “vibe code” pas mes sites, je continue de les coder à la main pour garder le contrôle sur l’UX et le design. Par contre, j’utilise l’IA pour optimiser des systèmes complexes. Par exemple, pour mon système de pré-compilation, j’ai fait tourner des agents d’IA en boucle pendant 100 heures. Je lui donnais 200 exemples, elle analysait pourquoi ça cassait, proposait un patch, re-testait tout… C’est comme entraîner un petit modèle local pour résoudre un problème très spécifique.

David Ronai : Pour le site de la Three.js Conf, j’ai codé le “feeling” des interactions à la main, mais j’ai demandé à l’IA d’optimiser les performances pour que ça tourne parfaitement sur tous les devices. L’IA est excellente pour le “brute force” : tester des dizaines de variantes pour trouver la plus rapide.

Julian Garnier : Mon workflow a totalement changé. Je ne suis pas forcément plus rapide, mais je fais des choses beaucoup plus complexes que je n’aurais même pas tenté de faire seul auparavant. Je passe parfois deux ou trois jours à préparer une feature avec l’IA en faisant énormément de tests de performance.

Gaussian Splatting et le futur de la 3D
Camille Roux : On entend beaucoup parler de Gaussian Splatting. C’est quoi ?

Renaud Rohlinger : C’est probablement l’une des technologies phares du futur pour la 3D. Le principe est simple : vous prenez quelques photos ou une vidéo d’un objet ou d’une pièce avec votre téléphone. Un algorithme d’IA va ensuite recréer cet objet en 3D en utilisant des “splats” (des petits points projetés). C’est beaucoup plus réaliste que la photogrammétrie classique. Avec WebGPU, on peut maintenant faire du rendu de Gaussian Splatting en temps réel sur le web pour des milliards de points. On pourra bientôt visiter des villes entières recréées de cette façon.

Conseils pour débuter
Camille Roux : Un dernier mot ou un conseil pour ceux qui voudraient se lancer ?

Renaud Rohlinger : N’ayez pas peur de l’IA. Si vous sortez d’école et que vous avez l’impression qu’une IA code mieux que vous, c’est faux. Continuez d’apprendre les bases, de comprendre comment fonctionne un ordinateur. L’IA va vous servir de professeur particulier super intelligent pour vous expliquer pourquoi votre code lag. Elle va nous élever tous ensemble vers des expériences plus impressionnantes.

Julian Garnier : Le web reste la porte d’entrée la plus cool pour faire du visuel avec du code. C’est facile d’accès, on n’a pas de problèmes de compilation cross-platform, et c’est facile à partager. Allez faire un tour sur Three.js et si vous voulez faire des animations sympas, regardez Anime.js.

David Ronai : On vous attend à la Three.js Conf les 10 et 11 septembre à Paris. Il y aura des experts, des designers, des pionniers comme Bruno Simon (créateur de Three.js Journey). C’est le moment idéal pour découvrir tout ce qu’on peut créer avec ces nouvelles technos.

Camille Roux : Merci à tous les trois ! On mettra tous les liens vers vos projets et la conférence dans les notes de l’épisode. Retrouvez également toutes nos formations sur notre catalogue de formation. À bientôt !