Webxr And Ar
Augmented reality on the web has three paths: native WebXR (Chrome/Android), AR Quick Look (iOS/Safari), and the model-viewer web component that wraps both. None of them works everywhere -- but model-viewer comes closest.
Augmented reality in a browser sounds like it should require a complex SDK, specialized hardware detection, and a pile of npm packages. Apple's approach is a link with a different file extension. Google's approach is a custom HTML element. And both work without any native app.
What WebXR Actually Is
WebXR is the low-level browser API for immersive sessions. Three session types exist:
const session = await navigator.xr.requestSession('immersive-ar')| Session Type | What It Does |
|---|---|
immersive-ar | Full AR: camera passthrough + virtual overlay |
immersive-vr | Full VR: headset, blocks the real world |
inline | Embedded 3D viewer in the page, no headset |
Raw WebXR gives you a WebGL rendering context anchored to physical space. It handles the rendering loop, hit testing (finding flat surfaces like floors and tables), and lighting estimation (matching virtual object lighting to real-world conditions).
The catch: support is fragmented. Chromium on Android handles immersive sessions well. Safari added WebXR but with limited session types. Firefox dropped WebXR support. Chrome on iOS runs on WebKit -- so even Chrome iOS cannot do immersive AR sessions.
AR Quick Look (Apple's Path)
Apple built a way to show 3D models in AR without any JavaScript: AR Quick Look.
<a href="model.usdz" rel="ar">
<img src="preview.jpg" alt="View in AR"/>
</a>When iOS Safari follows a link to a .usdz file with rel="ar", it opens the system-level AR viewer instead of downloading the file. The user sees the 3D model sitting on their floor or desk, with full pinch, rotate, and scale gestures.
This works on every iPhone and iPad -- including older models. No JavaScript API is involved. It is purely the file extension and the attribute.
The .usdz format is Apple's Universal Scene Description format. Models exported from tools like Reality Composer, Blender (with the USD exporter), or online converters can be distributed this way.
model-viewer: The Practical Path
For most teams, neither raw WebXR nor AR Quick Look alone is enough -- WebXR covers Android Chrome, AR Quick Look covers iOS Safari, and you need both.
The model-viewer web component, built by Google, handles both:
<script type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js">
</script>
<model-viewer
src="model.glb"
ios-src="model.usdz"
alt="A 3D product model"
ar
camera-controls
auto-rotate
></model-viewer>The ar attribute enables the AR button automatically. On Android Chrome, tapping it opens a WebXR AR session. On iOS Safari, it hands off to AR Quick Look using the ios-src file.
camera-controls enables the inline 3D viewer with mouse/touch rotation. auto-rotate spins the model slowly when idle.
One web component, both platforms, no custom WebGL code.
ExpandWebXR on the Web: native WebXR, AR Quick Look, and model-viewer compared
Support in Practice
| Approach | Works On |
|---|---|
| Native WebXR (immersive-ar) | Chrome on Android, Meta Quest |
| AR Quick Look | iOS and iPadOS (Safari) |
| model-viewer | Both (delegates to the above) |
| WebXR in Safari | Inline only (no immersive sessions) |
This is not a green tier API maturity situation. Raw WebXR is light-green leaning experimental. model-viewer is the recommended path if your team needs to ship AR experiences today.
One final capability in this chapter: the Screen Wake Lock API. While viewing AR or following a recipe, the screen must stay on. Wake Lock handles that in one call.
The Essentials
- WebXR has three session types:
immersive-ar,immersive-vr, andinline. Immersive sessions require device support and user permission. - AR Quick Look: a
.usdzlink withrel="ar"opens Apple's AR viewer on iOS. Zero JavaScript. Works on every iPhone. - model-viewer: one web component handles WebXR on Android and AR Quick Look on iOS. Ship AR without raw WebGL code.
- Chrome on iOS uses WebKit -- immersive AR does not work in Chrome iOS. Safari on iOS with AR Quick Look is the correct path.
- Raw WebXR is not green tier. Use model-viewer to ship. Use raw WebXR only when you need a custom rendering pipeline.
Further Reading
- model-viewer -- modelviewer.dev -- official docs and live demos for the web component, including AR modes, camera controls, and iOS integration
- WebXR Device API -- Chrome for Developers -- covers immersive sessions, hit testing, and the rendering loop for custom WebXR applications
Keep reading