Skip to content
All articles

3D on the web, in AR and in games

A product or a house in augmented reality — how AR on a website works

In short

AR on a website is a button next to the 3D model: the phone opens the camera and places the model on the floor, a table or a plot at full size, without a separate app. iPhone and iPad need the model as USDZ, Android as GLB; ready-made viewers such as model-viewer show the button and pick the file on their own. The model must be at real-world scale and light: the phone keeps it in memory alongside the camera and spatial tracking.

Useful for: Clients, Developers

Will the sofa fit the living room, will the house fit the plot — AR answers that right through the phone camera, with no app.

What the visitor sees

AR"View in AR" buttoncamera finds the floorproduct in the room
Three steps: the button, finding the floor, the product in the room.
  1. The page shows a 3D model and a "View in AR" button.
  2. The phone opens the camera and finds the floor or a table.
  3. The model appears at full size: you can walk around it and turn it.

No app to install. On iPhone and iPad it's the built-in AR Quick Look viewer; on Android, Google's Scene Viewer on phones that support ARCore.

Which files you need

iPhone and iPadAR Quick Look viewerUSDZAndroidScene Viewer, needs ARCoreGLBthe page viewer picks the file itself
One product, two files. The page viewer hands the phone the right one.

iPhone and iPad need USDZ, Android needs GLB. Ready-made viewers such as model-viewer show the AR button and hand the phone the right file. More on formats in 3D file formats.

Scale 1:1

Meters: the house at full size1.8 mWrong units: a box-sized house1.8 m
The model must be in meters, or the house ends up the size of a box.

The model must be in real-world units — meters. If it was exported in centimeters or arbitrary units, a house ends up the size of a box and an armchair the size of a house.

Memory and weight

The phone runs the camera, tracks the space and draws the model all at once. A heavy model stutters or closes the view. How to make it lighter is covered in Why a 3D model lags on a phone.

What to prepare

  • A 3D model at real-world scale.
  • GLB and USDZ.
  • For large objects, a decision on what's visible inside — for example, interiors in a house's windows.
  • A poster for the page while the model loads.

What it looks like in practice

  • Hilbert: a visitor places a house at full size right on their plot from a phone. The GLB models with interiors in the windows were moved to Meshopt and KTX2 so the house opens and rotates smoothly even on an average phone.
  • M1 GROUP: GLB and USDZ export for AR viewing on marketplaces.

Common mistakes

  • A model in the wrong units.
  • GLB only: AR on iPhone needs USDZ. Some viewers can build it themselves, but it's more reliable to prepare it separately.
  • A heavy model that stutters along with the camera.
  • Testing on just one phone.

Checklist

  1. Real-world scale, in meters.
  2. GLB and USDZ.
  3. A light model.
  4. An AR button in the viewer.
  5. Testing on both iPhone and Android.

From our projects

Have products you need visualized?

The average project budget starts from €500.

Smaller standalone tasks are quoted individually.