Weboberflächen für Augmented Reality und WebXR-Integrationen

AR / WebXR; 2025

WebXRermöglicht AR/VR direkt im Browser. 2025 nutzen Szenarien vom E-Commerce bis zum Industrieeinsatz Weboberflächen, die 3D-Objekte im Kamerabild platzieren, Bewegungen verfolgen und Rückmeldungen in Echtzeit geben.

B10 Digital Agency • 10. Oktober 2025 • Lesezeit: ca. 7 Min.

WebXR-Grundlagen: Mindestanforderungen an AR

• Sicherer Kontext: https:// ist erforderlich; Kamera- und IMU-Zugriff benötigen die Erlaubnis der Nutzer.
• Geräte-Unterstützung: Chrome/Android und die neuesten Safari-Versionen sind mit begrenzten AR-APIs kompatibel; der Fallback-Plan ist unerlässlich.
• 3D-Assets: glTF/GLB mit PBR-Materialien sowie USDZ für iOS Quick Look werden bevorzugt.

„Ein AR-Erlebnis ist mehr als eine Webseite: Seine Oberfläche liegt über dem Kamerabild.“

Schnellstart: WebXR AR Sitzung

// 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 }

Tipp: hit-test erkennt Oberflächen, um das Modell am Boden zu platzieren; dom-overlay hält HTML-Schaltflächen über der AR-Szene sichtbar.

UI Architektur: 2D + 3D Ebenen

Ebene	Aufgabe	Technologie
3D-Szene	Modell, Beleuchtung, Schatten, Tracking	Three.js / Babylon.js / WebGPU
2D UI	CTA, Produktvariante, Hilfe	DOM Overlay / HTML + CSS
Wahrnehmungsebene	Hit-test, anchor, pose	WebXR Device API

Leistung: Annäherung an 60 FPS auf Mobile

• Mesh-Optimierung: Reduzieren Sie die Dreieckszahl; nutzen Sie LOD und Instancing.
• Materialien: Für PBR-Texturen verwenden Sie basisu / ktx2 -Komprimierung; vermeiden Sie Auflösungen über 2K.
• Rendering-Technik: In WebGL nutzen Sie single pass; bei aktiviertem WebGPU sind bindless -Strategien vorgesehen.
• Pipeline: Das Modell mit draco komprimieren und per Streaming laden.

E-Commerce-Szenario: Produkt im Zimmer sehen

// 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

Conversion-Tipp: Fixieren Sie „In den Warenkorb“ per DOM Overlay in der AR-Sitzung; Varianten- und Farbauswahl bleiben im AR-Erlebnis.

Fallback-Strategien

• Model-Viewer: Wenn WebXR fehlt, nutzen Sie <model-viewer> für 3D-Ansicht und AR-Aufruf.
• USDZ/Quick Look: Für natives AR unter iOS einen rel="ar" -Link nutzen.
• 360°-Drehung: Auf einfachen Geräten Sprite- oder Turntable-Ansichten nutzen.

<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>

Benutzerfreundlichkeit und Zugänglichkeit (A11y)

• Berechtigungsablauf: Erläutern Sie den Kamerazugriff in einem einfachen modalen Dialog.
• Geräuscharme Umgebung: Mit Haptik oder Symbolen führen und Sitzungsergebnisse anbieten, etwa gespeicherte Screenshots.
• Tastaturbedienung: DOM-Overlay-Schaltflächen mit einer sichtbaren Tastatur-Fokusmarkierung (focus ring) versehen.

Sicherheit und KVKK

• Lokale Verarbeitung: Oberflächen- und Tiefendaten auf dem Gerät halten, nicht an den Server senden.
• Berechtigungsprotokolle: Jede erteilte Erlaubnis, etwa für Kamera oder Standort, als Ereignis protokollieren.
• CSP: Eine strenge Content-Security-Policy für Kamera- und WebXR-Skripte definieren.

Analyse: ROI der AR-Sitzungen

• Zeit je Sitzung (in AR verbrachte Zeit)
• Anzahl der Platzierungen (wie oft das Modell platziert wurde)
• CTA-Conversion (AR → Warenkorb / Lead)

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

„AR zeigt nicht nur, sondern überzeugt: messen, optimieren, wiederholen.“

B10 Ansatz: WebXR Produktpaket

• Mit Three.js und WebXR Device API: hit-test, Anchors und Lichtschätzung
• Pipeline mit GLB/USDZ-Ausgabe (Draco + KTX2)
• AR-Abläufe mit Model-Viewer-Fallback für A/B-Tests
• Niedrige Latenz durch Edge-Auslieferung und CDN; Modellversionierung mit ISR

Verschieben Sie Ihre Produkte in die Welt des Kunden.
Die B10 Digital Agency bietet WebXR-basierte AR-Erfahrungen sowie Leistung, Sicherheit und Messung.

AR-Projekt starten Tags: WebXR • AR • Three.js • Babylon.js • glTF • USDZ • model-viewer • e-commerce AR • KVKK • B10 Digital Agency