Interfaces web pour la réalité augmentée et les intégrations WebXR

AR / WebXR; 2025

WebXRpermet des expériences AR/VR directement dans le navigateur. En 2025, du commerce en ligne au terrain industriel, des interfaces web placent des objets 3D dans le flux vidéo, suivent les mouvements et fournissent des retours en temps réel.

B10 Digital Agency • 10 octobre 2025 • Temps de lecture : environ 7 min

Bases WebXR: Exigences minimales pour les AR

Contexte sécurisé : https:// est obligatoire ; les accès à la caméra et à l’IMU nécessitent l’autorisation de l’utilisateur.
Support des appareils : Chrome / Android et les versions récentes de Safari sont compatibles avec des API AR limitées ; le plan de repli est essentiel.
Ressources 3D : glTF/GLB avec matériaux PBR et USDZ pour iOS Quick Look sont privilégiés.

« Une expérience AR dépasse la page web : son interface se superpose à l’image de la caméra. »

Démarrage rapide : séance AR WebXR

// 1) Check XR support if (navigator.xr) { const supported = await navigator.xr.isSessionSupported('immersive-ar'); if (supported) startAR(); } async function startAR(){ const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test', 'dom-overlay'], domOverlay: { root: document.body } }); // Connect WebGL/WebGPU and start the render loop }

Astuce : hit-test détecte les surfaces pour positionner le modèle au sol ; dom-overlay maintient les boutons HTML au-dessus de la scène AR.

Architecture de l'interface utilisateur : calques 2D + 3D

Couche	Tâche	Technologie
Scène 3D	Modèle, éclairage, ombres, suivi	Three.js / Babylon.js / WebGPU
2D UI	CTA, variante de produit, aide	DOM Overlay / HTML + CSS
Calque de perception	Hit-test, anchor, pose	WebXR Device API

Performance : Approche de 60 FPS sur mobile

Optimisation du maillage : Réduisez le nombre de triangles ; utilisez LOD et instancing.
Matériaux : Pour les textures PBR, utilisez basisu / ktx2 pour la compression ; évitez les résolutions supérieures à 2K.
Technique de rendu : Dans WebGL, utilisez single pass; si WebGPU est activé, envisagez des stratégies bindless.
Pipeline: Compresser le modèle avec draco et le charger progressivement en streaming.

Scénario du commerce électronique: Voir le produit dans la pièce

// Load the GLB and place it on a surface (Three.js pseudo) const loader = new GLTFLoader(); const model = await loader.loadAsync('/assets/chair.glb'); const anchor = xrFrame.createAnchor(hitPose, referenceSpace); anchor.context.attach(model.scene); // Attach it to the scene

Conseil de conversion : Fixez « Ajouter au panier » via DOM Overlay dans la session AR ; conservez le choix de variante et de couleur dans l’expérience AR.

Solutions de repli

Model-Viewer: Si WebXR est indisponible, utilisez <model-viewer> pour la vue 3D et le lancement de l’AR.
USDZ/Quick Look: Pour l’AR native sur iOS, utiliser un lien rel="ar".
Rotation à 360° : Utiliser des vues par sprites ou rotation sur les appareils simples.

<a href="/assets/chair.usdz" rel="ar">Open AR on iOS</a> <model-viewer src="/assets/chair.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls></model-viewer>

Utilisabilité et accessibilité (A11y)

Parcours d’autorisation : Expliquez l’accès à la caméra dans une boîte de dialogue simple.
Environnement silencieux : Guider par retour haptique ou icônes et proposer un résultat de session, par exemple une capture enregistrée.
Utilisation au clavier : Ajouter aux boutons DOM Overlay un indicateur de focus clavier (focus ring).

Sécurité et KVKK

Traitement local : Conserver les données de surface et de profondeur sur l’appareil, sans les envoyer au serveur.
Journal des autorisations : Journaliser chaque autorisation accordée, par exemple caméra ou géolocalisation, comme événement.
CSP: Définir une Content-Security-Policy stricte pour les scripts de caméra et WebXR.

Analyse : ROI des sessions de l'AR

Durée par session (temps passé en AR)
Nombre de placements (nombre de positionnements du modèle)
Conversion du CTA (AR → panier / prospect)

// Simple event example window.dataLayer.push({ event: 'ar_place', sku: 'CHAIR-01' });

« L’AR ne fait pas que montrer : elle aide à convaincre. Mesurer, optimiser, recommencer. »

B10 Approche: Paquet de produits WebXR

Avec Three.js et WebXR Device API : hit-test, ancres et estimation de l’éclairage
Pipeline à double sortie GLB/USDZ (Draco + KTX2)
Parcours AR avec repli Model-Viewer, adaptés aux tests A/B
Faible latence via edge et CDN ; versionnage des modèles avec ISR

Déplacez vos produits dans le monde du client.
B10 Digital Agency offre des expériences AR basées sur WebXR ainsi que des performances, de la sécurité et de la mesure.

Démarrer le projet AR Tags: WebXR • AR • Three.js • Babylon.js • glTF • USDZ • model-viewer • e-commerce AR • KVKK • B10 Digital Agency