Embedding 3D models for mobile AR

By embedding your 3D models into your website, your users will be able to view the models in AR on supported mobile devices.

General Information

Whenever you upload a 3D model into Vuframe® Studio, it will automatically be converted into several different file formats. This includes a GLB and a USDZ version. Both these formats can be viewed in 3D and AR on compatible mobile devices without requiring any additional apps. Specifically, Android devices supporting ARCore can display GLB files using Scene Viewer whereas iOS devices supporting ARKit can open USDZ files using QuickLook.

Viewing a model in AR using Google Scene Viewer

Viewing a model in AR using iOS QuickLook

Adding a "View in AR" button to your website

In order to embed your models into your website for mobile AR, you will first need to contact us in order to obtain the links to the GLB and USDZ versions of the corresponding files. You will then need to add links for Android as well as iOS.

Additionally, you should ensure that only the correct link for the user's device is displayed as the Android link will not work on iOS devices and vice versa. This can be done by using JavaScript to check the user's operating system and only displaying the corresponding HTML elements.

Creating an iOS QuickLook link

Embedding an USDZ file for viewing with compatible iOS devices is relatively easy. All you need to do is add an HTML link tag with the rel attribute set to "ar" and wrap it around an image:

<a href="USDZ_URL" rel="ar">
    <img src="button.png"/>
</a>

On compatible iOS devices, an AR button that opens QuickLook will be displayed on top of the image. For more information on embedding USDZ files, please refer to this article.

Creating a SceneViewer link for Android

Embedding a GLB file for viewing on Android devices requires a bit more effort than on iOS. You will need to create a so-called intent link that opens the Scene Viewer application. This link looks as follows (you will need to replace GLB_URL with the link to the GLB version of the model):

<a href="intent://GLB_URL&mode=ar_only#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;end;">
    <img src="button.png" />
</a>

The example above creates an image that opens the model in AR when clicked. This link can be extended by setting additional optional parameters, e.g. the title of the model or a fallback website that users will be redirected to if their device does not support ARCore. For more information, please refer to this section of the Google Developers documentation.

For example, for the following link, the Scene Viewer would display the model title "My Model" and a button linking to www.google.com. In case the user tries to open the link with an incompatible Android device, they will be redirected to the list of Android devices supporting ARCore.

intent://GLB_URL&mode=ar_only&title=My%20Model&link=https://www.google.com#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar/discover/supported-devices;end;