Ce que permet WebXR
WebXR est l'API des navigateurs pour la VR et l'AR. Une page web peut lancer une session immersive dans un casque ou une session AR sur smartphone, sans installer d'application. Support actuel : Chrome et Edge (desktop avec SteamVR, Android, Quest Browser), Wolvic, et Safari sur visionOS pour la VR. Safari iOS ne propose pas l'AR WebXR ; on utilise Quick Look (USDZ) en remplacement.
Les frameworks
three.js
Bibliothèque 3D bas niveau devenue standard. WebXR intégré (VRButton, ARButton, contrôleurs, hand tracking). Liberté totale, courbe d'apprentissage moyenne.
A-Frame
Surcouche déclarative de three.js : une scène VR en balises HTML, système entité-composant, centaines de composants communautaires.
Babylon.js
Moteur complet : physique, matériaux PBR, GUI 3D, WebXR avec téléportation et interactions intégrées, éditeur en ligne. Soutenu par Microsoft.
React Three Fiber + @react-three/xr
three.js en composants React. Idéal pour intégrer la 3D et la XR dans une application web existante.
PlayCanvas Engine
Moteur WebGL performant, open source, avec un éditeur en ligne propriétaire (gratuit pour les projets publics).
Wonderland Engine, Needle Engine
Deux moteurs récents orientés WebXR performant, éditeur propriétaire avec plans gratuits, runtime partiellement ouvert. À considérer pour les projets exigeants.
Tableau comparatif
| Framework | Niveau | VR | AR | Hand tracking | Idéal pour |
|---|---|---|---|---|---|
| three.js | Bas | Oui | Oui | Oui | Tout projet sur mesure |
| A-Frame | Haut | Oui | Oui | Oui | Prototypes, éducation, visites |
| Babylon.js | Moyen | Oui | Oui | Oui | Applications complètes |
| React Three Fiber | Moyen | Oui | Oui | Oui | Apps React |
| PlayCanvas | Moyen | Oui | Oui | Partiel | Jeux web performants |
Bonnes pratiques WebXR
- Modèles en GLB compressé Draco, textures KTX2 ou WebP, moins de 10 Mo au total pour un chargement rapide.
- Servir en HTTPS obligatoire, tester sur Quest Browser et Chrome Android.
- Proposer un mode non immersif (souris, tactile) pour les visiteurs sans casque.
- Viser 72 à 90 images par seconde : peu de lumières dynamiques, ombres cuites, instanciation.
- Prévoir la locomotion confortable (téléportation, vignette).
Cas d'usage
Visites virtuelles immersives à partir de photogrammétrie ou de Gaussian splatting (three.js dispose de visualiseurs de splats), configurateurs produits en AR, formations légères sans installation, musées virtuels. Pour les applications lourdes ou les interactions complexes, un moteur natif comme Godot reste préférable. Découvrez tous nos outils open source.
Questions fréquentes
WebXR fonctionne-t-il sur iPhone ?
Pas en réalité augmentée native : Safari iOS ne prend pas en charge WebXR AR. On utilise AR Quick Look avec des fichiers USDZ. Sur Apple Vision Pro, Safari prend en charge les sessions VR WebXR.
A-Frame ou three.js pour débuter ?
A-Frame, qui permet de créer une scène VR en quelques lignes de HTML. Passez à three.js lorsque vous avez besoin d'un contrôle fin du rendu.
Une expérience WebXR peut-elle être publiée sur le store Meta Quest ?
Non directement, mais elle est accessible depuis le navigateur du casque et peut être ajoutée comme application web progressive (PWA).