How to Implement WebAR on Mobile Safari (Browsers)?

Questions
, ,
1

I’m trying to understand how to enable WebAR on mobile Safari, as I found a sample link (WildcatEgg_lounge_chair14260) that works seamlessly for placing a virtual chair using the camera, but it doesn’t function on the mobile Brave Browser (Chrome based).

It’s intriguing how this WebAR experience is provided without additional apps or software, solely through the mobile Safari browser.

Does anyone know if there’s a way to replicate this with BabylonJS (any example code?), or how this functionality is achieved without app clips or external software?

2

WebXR, the open standard for VR/AR experiences, is not supported on Safari/iOS/Apple devices (other than the Vision pro, but only behind a flag). Any AR browser support comes from external tools or frameworks, that emulate the needed capabilities.
Variant Launch (https://launch.variant3d.com/) is capable of emulating that using an App Clip, so you can have babylon scenes running in the browser. However, it has its limitations, and it is not actually running in the browser.
Other options are 8th wall’s wonderful AR in-browser support, but in thsi case babylon can be used as a rendering engine, but not as your entry point to AR capabilities, since 8th wall provides a different API to the one we are using.

This is the sad reality when trying to implement AR in Babylon on iOS.

2 Likes
3

Thank you, @RaananW, for the detailed information! If I understood correctly, the sample link I provided uses something like 8th Wall?, allowing them to run their objects in the mobile web browser.

For Babylon, can we do something similar to the example, using 8th Wall + BabylonJS, like displaying a chair?

4

If it is just a model, there is always this option as well - Viewing Augmented Reality Assets in Safari for iOS | WebKit , but this is, again, very apple-specific.
I am not sure what they are using directly TBH. They might be using model-viewer, which uses this capability of the browser to show augmented reality content on the device (using the device’s native capabilities, not the browser).

2 Likes