Cross-Platform WebXR, AR Quick Look & Scene Viewer Guide
Feature-detection architecture for delivering seamless AR placement and 3D try-on across iOS Safari, Android Chrome, and desktop browsers.
Understanding the Three Browser AR Runtimes
Unlike standard HTML5 APIs that work uniformly across engines, spatial AR placement in the browser spans three distinct native pathways. On Android Chrome, the W3C WebXR Device API (`immersive-ar` session mode with hit-testing) or Google Scene Viewer launches ARCore-backed room placement directly from a GLB asset.
On iOS Safari and iPadOS, WebXR `immersive-ar` is not natively exposed to standard web pages. Instead, Apple provides AR Quick Look via `<a rel="ar" href="model.usdz">`, which hands a USDZ package off to iOS's native ARKit viewer with automatic lighting estimation and people occlusion. Meanwhile, inline WebGL2 camera-feed try-on runs consistently inside both Safari and Chrome.
- Use inline WebGL2 + MediaStream for face, wrist, and upper-body virtual try-on across all browsers.
- Use W3C WebXR (`immersive-ar`) or Scene Viewer intents for world-scale floor/table placement on Android.
- Use `<a rel="ar">` linking to a validated `.usdz` file for iOS Safari native AR Quick Look.
Feature Detection Over Fragile User-Agent Sniffing
Hardcoding browser version checks breaks quickly as iPadOS reports desktop Macintosh user agents and Chromium derivatives alter version strings. Capability-driven routing inspects actual runtime APIs: checking `navigator.xr?.isSessionSupported('immersive-ar')` for WebXR, testing `document.createElement('a').relList.supports('ar')` for iOS AR Quick Look, and checking WebGL2 context creation.
By prioritizing capabilities in a deterministic cascade—inline WebGL2 try-on, WebXR AR, AR Quick Look USDZ, Scene Viewer, and finally interactive 3D orbit—every visitor receives the highest-fidelity spatial mode their device hardware supports.
- Test `navigator.xr.isSessionSupported('immersive-ar')` asynchronously before rendering WebXR launch buttons.
- Check `a.relList.supports('ar')` to detect AR Quick Look capability on iOS Safari cleanly.
- Always provide an accessible 3D orbit viewer as the universal baseline on desktop laptops.
Handling Apple AR Quick Look Anchor Rules & Custom CTAs
When iOS Safari opens a `.usdz` file in AR Quick Look, Apple controls the native camera UI, though developers can customize behavior via URL hash parameters. Adding `#allowsContentScaling=0` prevents shoppers from pinching a sofa or watch to fake sizes, preserving true-to-scale confidence.
Additionally, AR Quick Look supports custom Apple Pay or HTML banner call-to-action overlays (`callToAction` and `custom` parameters) so shoppers inspecting a product in their living room can tap 'Add to Cart' directly inside the native AR view and return seamlessly to checkout.
- Append `#allowsContentScaling=0` to USDZ links for true-to-scale furniture, watch, and product placement.
- Include an explicit `<img>` child inside `<a rel="ar">` as required by iOS Quick Look to render the AR badge.
- Configure `canonicalWebPageURL` and `callToAction` parameters to keep branding and cart actions visible.
Cross-Browser Audio, Orientation, and Memory Quirks
Cross-platform WebAR testing often uncovers subtle browser quirks: iOS Safari requires `playsinline` and `muted` attributes on hidden camera `<video>` elements or playback stalls silently; Android WebViews require `autoplay` paired with user-gesture unlock; and low-RAM phones enforce strict single-tab memory ceilings.
Building an automated cross-device matrix covering recent iOS Safari, Android Chrome, and desktop Chrome/Edge/Firefox releases catches shader precision issues (`mediump` vs. `highp` float in fragment shaders) before launch.
- Always set `playsinline muted autoplay` on `<video>` elements feeding WebGL camera textures.
- Use `highp float` precision in custom WebGL fragment shaders to avoid banding on mobile GPUs.
- Test portrait-to-landscape orientation switches so canvas aspect ratios resize without stretching.
Browser Spatial AR & Try-On Capability Matrix
| Browser / OS | Inline WebGL2 Try-On | World-Scale AR Placement | Asset Format Required |
|---|---|---|---|
| iOS Safari (15+) | Supported (getUserMedia + WebGL2) | AR Quick Look (`rel="ar"`) | GLB (inline) + USDZ (Quick Look) |
| Android Chrome | Supported (getUserMedia + WebGL2) | WebXR `immersive-ar` / Scene Viewer | GLB (glTF 2.0) |
| Desktop Chrome / Edge | Supported (Webcam + WebGL2) | 3D Orbit + QR Handoff to Mobile | GLB (glTF 2.0) |
| Desktop Safari (macOS) | Supported (Webcam + WebGL2) | 3D Orbit + Quick Look Preview | GLB + USDZ |
| In-App Social WebViews | Varies by host app permissions | Fallback 3D Orbit / Open in Browser | GLB (glTF 2.0) |
Exact availability depends on device GPU, OS permissions, and ARCore/ARKit hardware support.
Worked Illustration: Capability Routing Decision Tree for a Universal 'View in Space' Button
This worked illustration traces the exact feature-detection logic executed when a shopper clicks 'View in Your Space' on a product page.
- Worked illustration step 1: Check `navigator.xr && await navigator.xr.isSessionSupported('immersive-ar')`; if true (Android Chrome with ARCore), launch an inline WebXR hit-test session using the compressed GLB.
- Worked illustration step 2: Else check `document.createElement('a').relList.supports('ar')`; if true (iOS Safari), trigger a synthetic click on `<a rel="ar" href="sku.usdz#allowsContentScaling=0">`.
- Worked illustration step 3: Else if on Android inside a non-WebXR browser, launch an Android Scene Viewer Intent URL pointing to the validated GLB asset.
- Worked illustration step 4: Else (desktop browser or unsupported hardware), open the interactive WebGL2 3D orbit viewer paired with a scannable QR code so the shopper can launch mobile AR in one scan.
Worked Illustration Outcome: 100% of visitors across iOS, Android, and desktop receive an interactive 3D or live AR experience routed cleanly by runtime feature detection.
Cross-Platform WebAR Compatibility Checklist
- Verify `<video playsinline muted autoplay>` attributes are set on all live camera feed elements.
- Test `rel="ar"` USDZ launch on physical iOS Safari with `#allowsContentScaling=0` enforced.
- Test WebXR `immersive-ar` hit-test placement and Android Scene Viewer fallback on Android Chrome.
- Confirm desktop browsers display a QR handoff modal alongside the 3D orbit viewer.
- Validate canvas resize handling across portrait and landscape screen rotations.
- Verify `highp` shader precision prevents z-fighting or banding artifacts on mobile GPUs.
Frequently Asked Questions
Why doesn't `<a rel="ar">` work if there isn't an `<img>` tag inside it?
Apple's WebKit implementation specifically looks for an `<img>` or `<picture>` element as the first child of `<a rel="ar">` to trigger AR Quick Look. Text-only anchor links simply download the `.usdz` file instead of opening AR.
What happens if a desktop shopper clicks a 'View in AR' button?
Because desktop PCs cannot walk around a room for world-scale AR placement, best practice is opening a 3D orbit viewer alongside a dynamic QR code that opens the mobile AR experience directly on the shopper's phone.
Does inline facial or wrist try-on require WebXR?
No. Virtual try-on overlays on faces, hands, and bodies use standard `getUserMedia` video feeds plus WebGL2 rendering and neural landmark tracking, which work across desktop and mobile browsers without WebXR.
Why should `#allowsContentScaling=0` be added to USDZ URLs?
By default, AR Quick Look lets users pinch to resize 3D objects, which can mislead shoppers about true product dimensions. Setting `allowsContentScaling=0` locks the object to its real-world physical scale.
Primary Standards & Technical References
- W3C WebXR Device API & WebXR Hit Test Module Specifications
- Apple WebKit / AR Quick Look Developer Documentation
- Google ARCore Scene Viewer Intent Parameters Documentation