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, 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
- Safari 26macOS, iOS, iPadOS, visionOS
- Firefox 141 / 145Windows, puis macOS Apple Silicon
Linux, Firefox Android et Mac Intel restent en cours. Sur un parc grand public, un fallback 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.
À 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 →Jeux complexes avec Unity
WebGL fonctionne aussi avec un moteur de jeu complet comme Unity : physique, véhicules pilotables, scénarios de formation, le tout exporté pour le navigateur. Les premières démos arrivent.
En préparation