Butonul „vezi în camera ta” transformă pagina de produs într-o probă virtuală: clientul își îndreaptă telefonul spre podea sau spre o masă și vede produsul așezat acolo, la dimensiunea reală. Pentru mobilier, decorațiuni sau electronice, asta răspunde direct la întrebarea „încape și se potrivește?”. Mai jos explicăm cum funcționează tehnic realitatea augmentată (AR) în browser și ce trebuie să pregătești ca să meargă bine.

Ce se întâmplă când clientul apasă butonul AR

AR-ul pentru magazine online nu necesită o aplicație proprie. Telefonul folosește tehnologii deja incluse în sistemul de operare:

Pe Android

Modelul în format GLB se deschide în Google Scene Viewer, un vizualizator AR oferit de Google pe dispozitivele compatibile ARCore, sau, în unele browsere, direct în pagină prin WebXR. Clientul vede produsul plasat pe o suprafață detectată de cameră și îl poate muta sau roti.

Pe iPhone și iPad

Apple folosește AR Quick Look, care deschide fișiere USDZ. De aceea, pentru iOS ai nevoie de o versiune USDZ a modelului. Diferențele dintre formate sunt explicate în GLB, USDZ și OBJ explicate.

Componenta model-viewer

Cea mai cunoscută soluție pentru a afișa modele 3D pe web cu AR este <model-viewer>, o componentă web open-source inițiată de Google. Îi dai un fișier GLB, iar ea afișează modelul interactiv și, pe telefoane, butonul AR. Prin atributul ar-modes alegi ordinea modurilor (WebXR, Scene Viewer, Quick Look). Pentru iOS ai două variante: furnizezi un fișier USDZ separat prin atributul ios-src sau lași componenta să genereze un USDZ din GLB în momentul în care clientul apasă butonul. Un USDZ pregătit dinainte îți dă mai mult control asupra rezultatului. Detaliile exacte și compatibilitatea se schimbă de la o versiune la alta, așa că verifică documentația actuală a proiectului.

Viewer-ul 3DView.ai include deja AR pe telefoane, iar modelele obținute prin scanare vin direct în ambele formate, GLB și USDZ, deci nu trebuie să configurezi nimic separat.

Scara reală: detaliul care face sau strică experiența

În standardul glTF, unitatea de măsură este metrul. Dacă modelul unui fotoliu are în fișier dimensiunea de 80 de unități, telefonul îl va afișa ca pe un obiect de 80 de metri. Invers, un model exportat în milimetri fără conversie apare minuscul. Înainte de publicare:

  • Măsoară produsul real (lățime, înălțime, adâncime).
  • Compară cu dimensiunile modelului în viewer sau într-un program 3D.
  • Verifică în AR, cu o ruletă lângă locul unde apare obiectul.

Pentru produsele unde mărimea contează, cum ar fi mobila, unele vizualizatoare permit și dezactivarea scalării de către client, ca să nu poată „micșora” produsul din greșeală. Verifică opțiunile disponibile în viewer-ul pe care îl folosești.

Dimensiunea fișierului și texturile pentru mobil

AR-ul rulează pe telefon, adesea pe date mobile. Un model greu înseamnă așteptare și clienți care renunță. Câteva reguli practice:

  • Texturi rezonabile: pentru un produs văzut pe telefon nu ai nevoie de texturi foarte mari.
  • Geometrie simplificată acolo unde detaliile nu se văd.
  • Un singur obiect curat, fără resturi de fundal sau de suport rămase din scanare.
  • Testează încărcarea pe o conexiune mobilă, nu doar pe Wi-Fi.

De pe desktop pe telefon: codul QR

Pe calculator nu există AR. O soluție simplă este afișarea unui cod QR lângă viewer: clientul îl scanează cu telefonul și deschide aceeași pagină de produs, unde poate apăsa butonul AR. Astfel, cineva care navighează pe laptop poate vedea produsul în cameră în câteva secunde.

Cum obții modelul potrivit pentru AR

AR-ul arată fiecare defect al modelului, pentru că produsul apare lângă obiecte reale. De aceea fidelitatea contează:

  • Scanare cu telefonul pe /scan: pornește de la produsul real, păstrează forma, texturile și logourile și generează GLB și USDZ. Ghidul complet este în scanare 3D a produselor cu telefonul.
  • AI dintr-o fotografie sau din text pe /create: rapid, bun pentru o previzualizare sau un concept, dar mai puțin fidel produsului real.

AI-ul e rapid pentru o previzualizare; pentru cel mai bun rezultat, scanează obiectul real. O comparație detaliată găsești în fotografii, scanare 3D sau AI.

Probleme frecvente și soluții

  • Butonul AR nu apare pe telefon: dispozitivul sau browserul poate să nu fie compatibil, ori lipsește fișierul potrivit (USDZ pe iOS). Verifică pe alt telefon și confirmă că ambele formate sunt disponibile.
  • Produsul „plutește” deasupra podelei: originea modelului nu este la bază. Modelul trebuie să stea cu baza pe planul de jos.
  • Culorile arată diferit față de poze: lumina din cameră influențează imaginea AR. Pornește de la texturi capturate în lumină uniformă, fără umbre puternice.
  • Încărcarea durează mult: redu dimensiunea texturilor și elimină părțile inutile din model.

Integrarea în magazin

Codul de integrare al viewer-ului (iframe sau snippet de script), cu AR inclus, este pe pagina e-commerce, împreună cu un exemplu de pagină de produs. Pașii pentru fiecare platformă sunt în model 3D în Shopify și WooCommerce, pas cu pas. Unele platforme au și suport propriu pentru modele 3D; verifică documentația lor actuală. Pentru contextul general, vezi ghidul despre vizualizarea 3D a produselor, iar planurile sunt pe pagina de prețuri.