Guides

What the phone is doing between the scan and the reveal.

A QR code opens a normal web page. That page asks for the camera, and from then on it runs a loop about thirty times a second: find distinctive points in the frame, match them against a fingerprint of the artwork, solve for where the print is in space, and draw the layers through that same transform. No server sees a single frame.

The loop

Four steps, thirty times a second.

  1. 1

    Find points worth tracking

    Corners and high-contrast texture — places where the image changes in two directions at once, because those are the only points you can re-find reliably when the phone moves. Flat areas and straight edges are useless for this.

  2. 2

    Match them against the artwork

    The artwork was analysed once when it was uploaded and reduced to a fingerprint of those points. Matching the live frame against it says which points in view are which points on the print.

  3. 3

    Solve where the print is

    Given enough matched pairs, one piece of arithmetic — a homography — recovers the flat rectangle’s position and tilt in the camera frame. Wrong matches are thrown out by consensus rather than trusted.

  4. 4

    Draw the layers through it

    The same transform positions your video and text, so they sit on the print rather than floating over the screen. Then the next frame arrives and it all happens again.

The conceptual version, with no browser in it: how image tracking works.

What carries it

Three browser APIs, no plugins.

getUserMedia — the camera

The standard permission prompt, the same one a video call uses. The stream is a normal video element the page can read pixels from. The permission is per-site and the viewer can revoke it, which is more than an installed app usually offers.

WebAssembly — the vision work

Feature detection and matching are tight numeric loops, which is exactly what JavaScript is worst at. Compiling that half to WebAssembly is what makes a frame budget of roughly 30ms achievable on a mid-range phone.

WebGL — the compositing

The layers are drawn on the GPU through the pose the tracker solved, in the same frame it was solved for. Compositing a frame with a pose computed from an older frame is what makes overlays swim.

The constraints, plainly

What this means for the artwork you point it at.

These are properties of the method, not of any one platform — they apply to every image-tracked AR tool.

Detail is what gets tracked

A busy illustration tracks beautifully. A minimalist print with large flat areas gives the tracker almost nothing to hold, and a repetitive pattern is worse than nothing, because every point looks like every other point.

Nothing is uploaded

Camera frames are processed on the device and discarded. What travels is the design — the artwork fingerprint and your layers — downloaded once. This is a property of doing the work on-device, not a policy that could quietly change.

No depth, no world anchors

The browser is not given the depth sensor or persistent spatial anchors that a native app can use. For layers pinned to a printed rectangle that costs nothing — the rectangle IS the anchor, and it is a better one than a guess about a floor.

Point a phone at something and see.

The demo runs the whole loop on a real artwork, in your browser.

FAQ

Questions, answered.

Does WebAR upload my camera feed?

No. The frames are processed on the phone and discarded; nothing is sent anywhere. That follows from where the work happens rather than from a promise — the tracking runs in the page, on the device, because a round trip per frame could never hold a 30ms budget.

Why does my artwork track badly?

Almost always too little irregular detail, or too much repetition. Tracking needs points that are distinguishable from each other; large flat areas provide none, and a repeating pattern provides many that are indistinguishable. Busy, textured, asymmetric artwork tracks best.

Do I need an app or a plugin?

No. It is a web page using getUserMedia for the camera, WebAssembly for the vision work and WebGL for drawing — all standard in iOS Safari and Android Chrome. The viewer scans a code and it runs.

Can browser AR place a model on my floor?

Not reliably, and that is a different technology. Placing objects in a room needs depth sensing and persistent world anchors, which browsers are not given. Image tracking anchors to a printed piece instead, which is a known flat rectangle and therefore a far more precise thing to attach to.