View in AR on product pages: Quick Look and Scene Viewer

Two platforms, two formats

Mobile AR on the web isn't one technology. The phone's own AR viewer does the work:

• Android: Google's Scene Viewer opens glTF/GLB files and places them in the room.
• iPhone and iPad: Apple's AR Quick Look opens USDZ files. How to open USDZ files.
• WebXR: some browsers can render AR directly in the page.

So a product page that wants AR on both platforms needs a GLB and a USDZ.

Adding it with model-viewer

Google's model-viewer web component handles the hand-off. The existing guide to embedding a 3D model shows the markup; the AR-relevant parts are:

• the ar attribute, which shows an AR button on supported phones,
• ar-modes, which sets which methods to try (WebXR, Scene Viewer, Quick Look),
• ios-src, which points iPhones at your USDZ file.

On Android, the AR button launches Scene Viewer with the GLB. On iPhone, it opens the USDZ in Quick Look.

Preparing the model for AR

AR is less forgiving than an on-page viewer, because it shows the product at real size in a real room.

1. Real-world scale. A 45 cm-tall lamp must be 0.45 m in the file.
2. Origin at the base, so it sits on the floor or table, not floating or sunk.
3. Facing forward (front of the product toward the default camera).
4. Light files: mobile data and older phones. Aim for a few MB. Reduce GLB file size.
5. Believable materials: roughness and colour that hold up under room lighting.
6. A USDZ copy for iOS. Convert GLB to USDZ.

Platforms that do it for you

E-commerce platforms often handle AR when you upload 3D media. Shopify, for example, accepts GLB or USDZ and creates the other format. 3D models on Shopify.

Testing

• Test on at least one Android phone and one iPhone.
• Check scale against the real product.
• Check the model sits on surfaces correctly.
• Check how it looks in dim and bright rooms.
• Check load time on mobile data.

Where the models come from

For a catalogue, the slow part is usually making the models, not the AR. AI image-to-3D can make a model from product photos; check it carefully against the real item, especially dimensions, because AR shows true size. Product photo to 3D model covers it. Vi3W exports GLB; convert a copy to USDZ for iPhone. The AR/VR use case covers Vi3W in AR projects more broadly.

Need AR-ready models for your product pages? Generate them in Vi3W and export GLB.