AR-ruokaesikatselu WebXR:llä: selain-3D ilman sovellusta

Lontoon Sohon intialainen fine dining -ravintola Dishoom raportoi vuonna 2024 22% kasvun keskimääräisessä tilauksessa integroituaan WebXR-ruokaesikatselun QR-menuun. Kikka: ei sovellusta asennettavaksi.

model-viewer.dev: yksi HTML-tagi, kolme alustaa

Googlen avoimen lähdekoodin web-komponentti <model-viewer> ohjaa .usdz-tiedoston iOS Quick Lookiin ja .glb-tiedoston Android Scene Vieweriin. Yksi rivi kattaa molemmat ekosysteemit.

Asiakas painaa "Näytä omassa tilassasi", suuntaa puhelimen pöytään, ja annos ilmestyy oikeassa koossa. iOS 18 Quick Look tukee animaatiota, ääntä ja fysiikkaa — biryani-höyry mukaan lukien.

Tiedostokoko: 200KB-raja

Jokaisen 3D-assetin tulee pysyä alle 200KB. 4G:llä 1MB kestää 3–4 sekuntia; käyttäjä lähtee.

• Blender Decimate: vähennä polygonit 5K–10K:hen.
• gltf-pipeline: Draco + KTX2. Tyypillisesti 75% vähennys.
• RealityConverter: .glb:stä .usdz:hen iOS AR Quick Lookia varten.

Cloudflare R2-hosting

200 annosta × 200KB = 40MB. R2:ssa nolla egress-maksuja ja $0.015/GB-kk — noin $0.0006/kk. thMenu Pro+ hostaa 3D-mallit polkuun menu-images/3d-models/.

Cache-Control: public, max-age=31536000, immutable. Upota hash URL:ään; uudet assetit saavat uudet URL:t ilman cache-tyhjennystä.

UKK

Tarvitsenko 3D-taiteilijan? En. Polycam tai RealityScan luovat annoksen 3–5 minuutissa 30–40 valokuvasta.

Tukevatko vanhat puhelimet? Quick Look iOS 12 alkaen, Scene Viewer Android 7+. Kattavuus yli 92%.

Onko model-viewer ilmainen? Apache 2.0 -lisenssi. Tuotannossa Shopifylla, IKEA:lla, Pinterestillä.

Oliko tästä hyötyä? Jaa se.