La 3D temps réel, du pipeline au navigateur.
Comprendre WebGL et WebGPU, les deux technologies qui font tourner la 3D dans un navigateur : comment elles fonctionnent, ce qu'elles permettent, jusqu'à l'IA qui tourne dans le navigateur, et ce que j'en fais en production avec Cartomapix.
WebGL : OpenGL ES dans le navigateur.
WebGL 1 expose OpenGL ES 2.0, WebGL 2 (2017) expose OpenGL ES 3.0. C'est une API à état global : on lie buffers, textures et programmes, puis on lance des draw calls, chacun validé par le navigateur avant d'atteindre le pilote, souvent via ANGLE.
- 1Couverture quasi totaleWebGL 2 tourne sur tous les navigateurs actuels, Safari iOS compris depuis la version 15. C'est la cible sûre pour un public grand public.
- 2Coût CPU par draw callValidation à chaque appel : passé quelques milliers de draw calls, le CPU devient le goulot. Instancing, fusion de géométries et atlas de textures sont indispensables.
- 3Pas de compute shadersLe calcul généraliste passe par des contournements : render to texture, ping-pong de textures flottantes, transform feedback.
WebGPU : une API explicite, pensée comme Vulkan, Metal et D3D12.
WebGPU abandonne la machine à état d'OpenGL. On décrit à l'avance des pipelines immuables et des bind groups, on encode des commandes dans des command buffers, puis on les soumet à une queue. La validation se fait à la création des objets, et non plus à chaque draw call.
Compute shaders
Pipelines de calcul natifs en WGSL et storage buffers en lecture et écriture : particules, culling, skinning ou physique sans aller-retour CPU.
Overhead réduit
Pipelines et bind groups précompilés, render bundles réutilisables : bien plus de draw calls par frame à budget CPU égal.
Rendu piloté par le GPU
drawIndirect et dispatchWorkgroupsIndirect : le GPU décide lui-même quoi dessiner, après un culling calculé sur le GPU.
WGSL et outillage
Un langage de shader unique et typé, traduit vers SPIR-V, MSL ou HLSL. Timestamp queries pour profiler, f16 en option sur le matériel compatible.
Support navigateurs
- Chrome, Edge 113+Windows (D3D12), macOS, ChromeOS
- Chrome Android 121+Android 12+, GPU Qualcomm et ARM
- Chrome Linux 144+GPU Intel récents, puis NVIDIA sous Wayland
- Safari 26macOS, iOS, iPadOS, visionOS
- Firefox 141 / 147Windows, puis macOS
Firefox sous Linux et Android est attendu courant 2026. Fin 2025, WebGPU était disponible pour environ 8 navigateurs sur 10 dans le monde : sur un public large, le repli WebGL 2 reste obligatoire.
Mon choix en production : Cartomapix utilise WebGPU dès que le navigateur le permet, et bascule automatiquement sur WebGL sinon. Un parc de visiteurs, c'est aussi des Android d'entrée de gamme et des iPhone pas à jour : la compatibilité passe avant la puissance brute. Le reste, la façon dont la scène est construite, allégée et affichée, c'est le savoir-faire du produit.
Les moteurs ont fait le pas.
Depuis fin 2025, WebGPU est officiellement pris en charge par Chrome, Edge, Firefox et Safari. Les principaux moteurs 3D du web l'ont intégré, presque toujours avec un repli WebGL automatique.
Three.js
WebGPURenderer et TSL, le langage de matériaux de Three.js : un même matériau compilé en WGSL ou en GLSL selon le navigateur. C'est la base du moteur de Cartomapix.
Babylon.js
Support WebGPU complet. Son Snapshot Rendering, bâti sur les render bundles, peut rendre certaines scènes jusqu'à dix fois plus vite.
PlayCanvas
Moteur et éditeur collaboratif en ligne, avec WebGPU disponible pour les jeux, les configurateurs et les expériences de marque.
Unity
L'export web de Unity 6 propose un backend WebGPU : simulateurs, jeux et formations complexes passent dans le navigateur.
Gaussian splatting
Des lieux reconstruits à partir de photos, photoréalistes, affichés dans une page. Trier des millions de points à chaque image, c'est exactement le travail des compute shaders.
TypeGPU, React Native
WebGPU typé en TypeScript côté web, et react-native-webgpu pour la même puissance graphique dans les applications mobiles.
WebGPU n'est pas plus rapide par magie. Le gain apparaît quand le processeur est le goulot (des milliers de draw calls) ou quand on exploite le calcul GPU. Une scène limitée par ses effets de post-traitement tournera à peu près à la même vitesse qu'en WebGL.
L'IA tourne aussi dans le navigateur.
Les compute shaders de WebGPU ne servent pas qu'à la 3D : un réseau de neurones, ce sont les mêmes multiplications de matrices, en masse. Un modèle d'IA peut donc tourner directement sur la carte graphique du visiteur, sans serveur.
WebLLM
Un modèle de langage complet dans un onglet, avec une interface compatible OpenAI. Modèles de 1 à 3 milliards de paramètres sur la plupart des machines récentes, jusqu'à 7 ou 8 milliards en 4 bits sur du matériel haut de gamme.
Transformers.js
Les modèles de Hugging Face dans le navigateur : traduction, transcription vocale, résumé, recherche par le sens, détection d'objets, détourage d'image.
ONNX Runtime Web
Un modèle entraîné avec PyTorch ou TensorFlow, exporté au format ONNX, exécuté en WebGPU, en WebNN ou en WebAssembly selon l'appareil.
MediaPipe
Suivi des mains, du visage et du corps à la caméra, et modèles de langage Gemma : la base des interactions sans contact et des filtres en réalité augmentée.
Ce que ça change
- Confidentialité : les données, la voix ou les photos ne quittent pas l'appareil.
- Coût : pas de serveur GPU à payer à chaque requête, la puissance est chez l'utilisateur.
- Réactivité : pas d'aller-retour réseau, et un fonctionnement possible hors ligne.
Les limites
- Mémoire : les navigateurs, surtout sur iPhone, limitent fortement la taille des buffers.
- Poids : un modèle pèse vite plus d'un gigaoctet, à faire accepter à l'utilisateur.
- Qualité : la quantification en 4 bits dégrade le raisonnement complexe. Les gros modèles restent côté serveur.
Là où la 3D et l'IA se rencontrent
Un guide qui répond aux visiteurs dans leur langue, directement sur la maquette. Des fiches traduites à la volée. Un lieu reconnu par la caméra du téléphone. Des scènes photoréalistes reconstruites à partir de quelques photos. Le même GPU affiche la scène et fait tourner le modèle : c'est la vraie nouveauté de WebGPU.
Sources : web.dev, nov. 2025 · état d'implémentation gpuweb · mesures d'inférence WebLLM, avril 2026
N'hésitez pas à me contacter aussi pour la réalité virtuelle.
Que ce soit pour l'architecture, l'ingénierie ou la formation, la réalité virtuelle rend la 3D tangible.
- Ingénierie, industrie et architecture
- Communication, événementiel et salons
- Formation et simulation
- En casque VR, sur ordinateur ou sur téléphone
À essayer maintenant, dans votre navigateur.
Chaque démo s'ouvre d'un clic, sur téléphone comme sur ordinateur, sans rien installer. C'est la meilleure façon de comprendre ce que WebGL et WebGPU permettent.
Adaptation WebGPU en coursMini-jeu WebGL
Tous les mini-jeux sont en cours d'adaptation sur WebGPU : personnages, objectifs, effets temps réel, toujours sans installation. Ils reviendront ici au fur et à mesure.
Nouvelles versions en préparation
CartomapixTheodora City
La maquette du campus marseillais en version complète : points d'intérêt, visite guidée, contenus 360°, mode hologramme, cycle jour et nuit. WebGPU avec repli WebGL.
Ouvrir la carte →
CartomapixCartomapix City
L'île de démonstration Cartomapix : une ville complète à explorer, gratuite, sans inscription ni application.
Ouvrir la démo →
Unity · passage à WebGPUJeux complexes avec Unity
Un moteur de jeu complet comme Unity s'exporte aussi pour le navigateur : physique, véhicule pilotable, caméras, scénario de formation. Ici, Factory Training : un entrepôt logistique et un robot à piloter, hébergé sur Unity Play, en cours de passage sur WebGPU. Ordinateur conseillé.
Ouvrir le simulateur →Marc Williams, de la 3D au web.
Vingt ans en studio : artiste 3D, puis chef de projet et manager de l'équipe 3D, réalité virtuelle et WebGL. J'y ai encadré des graphistes 3D comme des développeurs, du cadrage du projet jusqu'à sa livraison. Indépendant depuis 2021.
Mon terrain : la chaîne complète, de la modélisation et de l'optimisation (polygones, textures, niveaux de détail) à l'export glTF et au rendu dans le navigateur, avec la direction artistique et technique des projets. Aujourd'hui je conçois et pilote Cartomapix, dont le moteur est passé à WebGPU. Basé près d'Aix-en-Provence.
WebGL, WebGPU et IA : les questions qu'on me pose.
WebGPU fonctionne-t-il sur iPhone ?
Oui, depuis Safari 26 sur iOS, iPadOS, macOS et visionOS. Les iPhone restés sur une version plus ancienne n'y ont pas accès : d'où l'intérêt d'un repli WebGL.
Faut-il abandonner WebGL ?
Non. WebGL 2 reste la cible la plus large. La bonne pratique en 2026 : utiliser WebGPU quand le navigateur le propose, WebGL sinon, avec exactement le même contenu.
WebGPU est-il toujours plus rapide que WebGL ?
Pas automatiquement. Il fait la différence quand le processeur est saturé par les draw calls, ou quand on confie des calculs au GPU (particules, physique, IA). Une scène limitée par ses effets visuels progresse peu.
Three.js est-il prêt pour WebGPU ?
Oui. Son WebGPURenderer bascule seul sur WebGL 2 si besoin, et TSL permet d'écrire les matériaux une seule fois pour les deux.
Peut-on faire tourner une IA dans le navigateur ?
Oui, grâce à WebGPU : des modèles de langage, de traduction, de transcription ou de vision tournent en local avec WebLLM, Transformers.js ou ONNX Runtime Web. Les petits modèles fonctionnent bien ; les gros restent l'affaire des serveurs.
La réalité virtuelle fonctionne-t-elle dans le navigateur ?
Oui, grâce à WebXR : un casque autonome ouvre une page web et la scène s'affiche en immersion, sans installation. WebXR s'appuie aujourd'hui surtout sur WebGL ; son intégration avec WebGPU progresse.
Envie d'en parler ?
Questions techniques, retours d'expérience WebGL et WebGPU, projets 3D temps réel : écrivez-moi sur LinkedIn.
Vous gérez un parc, un camping ou un musée ? Découvrez Cartomapix