Skip to content

Guide

What WebAR is

Augmented reality that opens in a web browser with no app to install. Point the camera at a QR code and the AR appears right there.

In short

The difference from app AR is how it opens

Augmented reality draws 3D on top of what the camera sees. Do that inside an app and it is app AR; do it inside a web browser and it is WebAR.

An app has to be downloaded and installed first. WebAR runs the moment the QR code is scanned.

That fits anywhere someone looks once and moves on. Exhibition stands, shop floors and printed material, where asking a first-time visitor to install something rarely works.

Kinds

What it anchors to

The kinds differ by what the 3D is placed against. Pick the one that matches where it will be used.

Plane detection

Finds a floor or a table and stands the object on it. It appears at real size, so it answers whether the thing fits.

Marker tracking

Point the camera at a set pattern and the 3D appears there. Only the pattern has to be printed, which makes it easy to put on a flyer or a card.

Image tracking

Recognizes a real picture, such as a poster or a product photo, and overlays the 3D on it. The picture itself is the anchor.

Face tracking

Follows the position of a face and puts glasses or a hat on it. Used where someone wants to try something on first.

Location-based

Uses coordinates so the content appears only at that place. Used for outdoor events and visitor guides.

3D viewer

No camera at all, just turning the model inside the page. Usually shown first, before moving on to AR.

What runs

What happens after the QR code is scanned

Four steps. All the viewer does is scan the QR code, allow the camera and point it around.

01

The QR code is scanned

The browser opens and downloads the page and the 3D file.

02

The camera is allowed

The browser asks for camera access. Once it is allowed, the camera view appears on screen.

03

The space is read

Move the camera slowly and it finds a floor or a marker.

04

The overlay is drawn

The 3D is placed where the anchor was found. It keeps being redrawn so it stays in place as the phone moves.

In practice

Sort these out first

Miss one of these and the page opens, but the AR shows up late or not at all.

  • The connection has to be secure. Browsers only hand over the camera on an HTTPS address.
  • The size of the 3D file is the wait. Ship tens of megabytes as-is and the first view is slow on a poor connection.
  • Browsers that open inside a messaging app do not open WebXR. If the AR is built on WebXR, add a note telling people to open it in a normal browser.
  • Lighting and floor texture change the result. In a dim room or on a plain floor, a surface is found late, or not at all.

Common questions

Does it work on iPhone?

Yes. Safari on iOS does not yet let a web page open the device's own AR mode, so an iPhone is served either by reading the camera feed in the page or by handing the model to the system AR viewer. The browser support page goes through this in detail.

Which 3D file should we prepare?

GLB for anything shown inside the page. Add USDZ when the model is handed to the AR viewer on an iPhone.

See one open

Samples built the way this page describes open straight in the browser on Vi3w.