Instructions inside every capsule

How it works

There's no app and no 3D engine on this page. Safari on an iPhone already knows how to show a 3D model in your room: it's called AR Quick Look. A web page only has to link to the model the right way.

1. One link

A normal link to a .usdz file, with rel="ar" and a picture as its first child. Safari sees both and opens the model in AR instead of downloading it. When you close AR, you're back on the page.

<a rel="ar" href="/models/curiosity.usdz">
  <img src="/thumbs/curiosity.png" alt="Curiosity rover">
</a>

2. Opening it from code

The knob doesn't show a link to tap. The page keeps a hidden one and clicks it from code. Safari allows that only shortly after a real tap, so the capsule has about three seconds to drop, roll and pop. On an iPhone 14 Pro with iOS 18.7, three seconds still worked; the machine uses two and a half at most.

const link = document.createElement("a");
link.rel = "ar";
link.append(document.createElement("img"));
document.body.append(link);

link.href = "/models/crown.usdz#custom=https://ar.avolkov.dev/banner/crown.html&customHeight=large";
link.click();

3. The banner inside AR

Everything after the # sets up a banner at the bottom of the AR view. Quick Look has one built in: a title, a subtitle, a price, and a button with your own text or an Apple Pay button. Or it shows a page of yours, 81, 121 or 161 points tall, with no scripts in it. The machine does the second: every toy has a small page with its name, rarity and credit, written at build time from the same catalog the machine draws from.

With the built-in button, a tap inside AR sends a message back to the link on the page:

link.addEventListener("message", (event) => {
  if (event.data === "_apple_ar_quicklook_button_tapped") {
    // add to cart, open a page…
  }
});

Every option, with a live preview of the banner and the HTML to copy, is on the Create your own page.

4. Front or back camera

The page can't choose the camera. The model does. A model anchored to a face opens the selfie camera and follows your head; anything else goes on the floor or a table in front of the back camera. The anchor is one line inside the file:

def Xform "Scene" (apiSchemas = ["Preliminary_AnchoringAPI"])
{
    uniform token preliminary:anchoring:type = "face"
}

5. The invisible head

AR Quick Look hides 3D objects behind your face, but not behind your hair or the back of your head. Without help, the back of a crown draws on top of your forehead. So every hat in the machine carries an invisible head: a shape with RealityKit's occlusion material, which draws nothing and hides whatever is behind it.

6. Where it works

Banners need iOS 13.3 or later; face anchors need iOS 13. Tested on an iPhone 14 Pro with iOS 18.7, in Safari and from the Home Screen.

7. Checked by Apple's own tool

Before a model goes in the machine, a script runs Apple's usdchecker --arkit on it, checks that hats are anchored to a face, that the rest stand on the floor at their real size, that every file is small enough to open fast, and that every model credits its author with a licence that allows sharing it. Downloaded models usually fail the first check and get fixed automatically.

Models