AR-Essensvorschau via WebXR: Browser-basiertes 3D ohne App

Das Indian-Fine-Dining-Restaurant Dishoom in London Soho meldete 2024 nach Integration von WebXR-Essensvorschau in das QR-Menü eine 22% höhere Durchschnittsbestellung. Der Trick: keine App, kein App Store, reines Browser-AR.

model-viewer.dev: Ein HTML-Tag, drei Plattformen

Googles Open-Source-Webkomponente <model-viewer> leitet .usdz an iOS Quick Look und .glb an Android Scene Viewer weiter. Eine Markup-Zeile deckt beide Ökosysteme ab.

Der Gast tippt auf "In Ihrem Raum ansehen", hält das Telefon über den Tisch, und das Gericht erscheint in Originalgröße. iOS 18 Quick Look unterstützt jetzt Animation, Sound und Physik — der Dampf vom Biryani inklusive.

Dateigröße: Die 200KB-Grenze

Jedes 3D-Asset muss unter 200KB bleiben. In 4G dauert ein 1MB-Modell 3–4 Sekunden; der Nutzer springt ab.

• Blender Decimate: Polygonzahl auf 5K–10K reduzieren.
• gltf-pipeline: Draco-Mesh + KTX2-Texturen. Typisch 75% Reduktion.
• RealityConverter: .glb → .usdz für iOS AR Quick Look.

Cloudflare R2-Hosting

200 Gerichte × 200KB = 40MB. R2 hat null Egress-Kosten und $0.015/GB-Monat Speicher — etwa $0.0006/Monat. thMenu Pro+ hostet 3D-Modelle automatisch unter menu-images/3d-models/.

Cache-Control: public, max-age=31536000, immutable. Modell-Hash in URL einbetten; neue Assets erhalten neue URLs ohne Cache-Invalidierung.

FAQ

Brauche ich einen 3D-Künstler? Nein — Photogrammetrie-Apps wie Polycam erzeugen aus 30–40 Handyfotos in 3–5 Minuten ein nutzbares Modell.

Unterstützen ältere Telefone das? Quick Look ab iOS 12, Scene Viewer ab Android 7. Geräteabdeckung über 92%.

Ist model-viewer kostenlos? Apache-2.0-Lizenz. Produktiv im Einsatz bei Shopify, IKEA, Pinterest.

Hilfreich? Teilen Sie es.