Building a Cross-Platform WebAR Demo

 

I was recently tasked to build a simple web AR prototype. The idea was straightforward: users scan their surroundings, detect a flat surface, and tap to spawn a tree that animates into place. Once placed, they could walk around and view the tree from any angle.

The requirements were clear:

1. Plane detection so the tree could be placed naturally in the real world.
2. World anchoring so the tree stays fixed in place as you move around it.
3. Runs in the browser with no downloads or native apps.
4. Cross-platform support for both Android and iOS.

Exploring the Options

Before diving into implementation, I researched the main tools available for WebAR development. Each came with its own tradeoffs.

AR.js	Description: A veteran of browser-based AR, but focused primarily on marker-based tracking. Pros: Lightweight, fast, and runs even on older devices. No installation required—just works in the browser. Cons: Geared toward marker-based AR, not plane detection. Limited support for world anchoring or markerless AR. Verdict: Good for QR-style projects, but not suitable for my “scan and place” tree demo.
Zappar	Description: A commercial WebAR platform with its own SDK and ecosystem. Pros: Solid cross-platform performance, including iOS. Good tools for developers and analytics for projects. Cons: Paid subscription required. Tied into Zappar’s ecosystem and hosting. Verdict: Powerful and reliable, but too heavy and costly for a small demo.
8th Wall	Description: Another commercial WebAR SDK, widely used for branded AR campaigns. Pros: Excellent tracking and performance across Android and iOS. Full-featured platform with debugging and publishing tools. Cons: Subscription-based and relatively expensive. Vendor lock-in. Verdict: Good for commercial projects, but overkill for my lightweight use case and costs a lot.
Model Viewer	Description: Google’s <model-viewer> web component for quickly embedding 3D models on the web. Pros: Extremely easy to set up—just drop a tag into your HTML. Good for simple model viewing with some AR support. Cons: Limited interactivity beyond basic placement. iOS support relies on Quick Look, which launches outside the browser. Hard to extend for custom animations. Verdict: Perfect for quick prototypes, but harder to expand for a more complex project.
Three.js + WebXR	Description: The most popular WebGL library for rendering 3D in the browser, with WebXR integration for AR features like plane detection and hit testing. Pros: Full flexibility to build custom interactions and animations. Free and open-source. Large community and plenty of examples. Cons: More setup and coding required compared to plug-and-play tools. WebXR is not supported on iOS Safari. Verdict: Perfect for Android, but left me stranded on iOS.

 

The Approach I Took

In the end, I built the demo with Three.js + WebXR. It gave me the flexibility I wanted, let me animate the tree the way I wanted, and ran great on Android. But that left the elephant in the room: iOS does not support WebXR. That meant my demo, built entirely with free tools, was essentially Android-only.

The Workaround: Variant Launch

To solve the iOS problem, I used Variant Launch, which effectively runs the Android version on the Variant Launch viewer through an app clip.

1. On Android, the app runs with Three.js + WebXR, with full plane detection and animated placement.
2. On iOS, users are redirected to Variant Launch, which handles AR placement reliably within Safari.

This hybrid approach let me keep the flexibility of Three.js on Android while ensuring iOS users weren’t left out and kept the code base the same.

1. Reliable across both platforms.
2. Still browser-based, no app downloads required.
3. Slightly different experiences between Android and iOS.

Final Thoughts

This project was a great reminder of the current state of WebAR:

1. Free and open tools are powerful but not cross-platform.
2. WebXR works beautifully on Android but is not available on iOS.
3. To deliver a working experience everywhere, you need a fallback.

For me, that fallback was Variant Launch. It let me meet all the requirements—plane detection, world anchoring, browser-based access, and cross-platform support—without paying for a commercial SDK. Until Apple supports WebXR in Safari, building cross-platform WebAR means piecing together hybrid solutions like this.

You can try out the demo here: https://artest.codeandvisual.com.au/

(You’ll need to open it up on a mobile device)

 

Note: This article was written by Darcy, one of our super versatile developers at Code and Visual. He usually specialises in game development but bravely took on the challenge given to him.