What you need to know about AR quicklooks on Android
Here's what we’ve figured out about Android's AR quicklooks by using them in real-world projects
Variant Staff
Share:
Here's what we’ve figured out about Android's AR quicklooks by using them in real-world projects
Google's documentation on quicklooks is comprehensive, but can be a bit tough to read, with HTML and Java code mixed in with model-viewer and scene-viewer information.
Here's the basics, and what we’ve figured out about Android quicklooks by using them in real-world projects:
The minimum required Android version for quicklooks is 7.0, and the user must also have a package called ‘Google Play Services For AR’ installed. In our experience most modern devices have this installed already, but the user will be prompted to install if it is missing or very outdated.
There is a list of supported devices here. We have seen devices not on this list launch quicklooks, but that probably shouldn’t be relied upon. Apparently Google needs to do some calibration on the motion detection hardware in devices to ensure accurate tracking, hence the list.
The wide range of Android versions, Chrome versions, alternate browsers and OEM-modifications means your estimations of device support should be quite conservative. Although the list above captures most of the common devices in North America, the EU, Japan and AU/NZ, serving AR quicklooks to other territories may require much more testing.
If you are serving Chinese users, see our note at the bottom of this article on Chinese devices
Unfortunately there is no up-front way of detecting if a device can view a quicklook in AR on Android. The only option is to wait for the user to tap the link, and provide something called a ‘browser fallback url’ (see below) that the user will be redirected to if their device does not support AR.
Our preferred UX for this is actually to redirect the user to the same page that launched the quicklook, but with an extra url parameter (like ‘example.com/?arNotSupported=true’ ) and use that flag to show ‘device not supported’ content. It’s a good spot to lightly encourage users to try another device (such as a tablet or partner’s device) if your brand tone is informal.
Android AR quicklooks require content to be formatted as glTF, a compressed ‘transfer format’ for 3D files that is fast becoming the JPEG of the web. These same files can be easily viewed on desktop web browsers via a number of viewers.
All products you upload to Variant should be in glTF format - they will then be reformatted on-the-fly into the specific product options you request via the API, and USDZs dynamically generated for iOS quicklook users.
There are multiple ways of launching quicklooks on android, which technically target different system apps built into android. The core difference to your users is what happens when their device does not support AR.
To launch an AR quicklook that will fall back to an on-screen only 3D viewer, call the quicklook as below:
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_preferred#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>
Here is a tappable version of the link above
If you would prefer to handle the lack of AR yourself (via presenting a custom error message, or even your own 3D viewer), use a link that calls com.google.ar.core directly with a browser_fallback_url
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>;
Here is a tappable version of the link above
Note both of these href= start with intent:// rather than http:// . We will cover the implications of this below.
Intents must come from a user input event to work. This means you can’t simply call a quicklook from Javascript (unless that script was triggered by a tap event).
When communicating this limitation to stakeholders, ‘tap-to-play’ video with audio is a good example to cite, as many people now understand the restrictions around video with audio in browsers, and have internalised it into their day-to-day web workflows, unlike the new format of AR quicklooks!
The quicklook can be called in a new window via target=_blank or similar. However, you get an ugly flicker as all the android activities swap around, and at worst we saw failures to launch on particular devices. We recommend sticking to the same window.
Intents cannot be launched via iframe for security reasons. Always place your quicklook links in the parent page the user is viewing.
Once you have AR quicklooks of your products, you’ll be itching to tell people all about them. Unfortunately not all platforms and apps support using intents directly. Some content management software will add http:// to the front. Others will reject the link as invalid, and some apps may not respond correctly when opening links (e.g. from a pdf viewer).
Of course, on iOS an intent:// link won’t do anything at all, so you should plan on displaying different quicklook links to iOS users.
To smooth over a lot of the technical details and minor annoyances, the Variant SDK allows launching of quicklooks with a single simple call:
Variant.launchQuicklook(product)
We also allow you to use a single http:// link that serves both Android and iOS quicklooks, allowing easy embedding in website CMS’, newsletters, online catalogues and more, without worrying about device detection or what app the user will tap the link in.
Additional parameters can be added to the link to change default behaviour. The level of control over the UX is very limited by design to ensure a predictable experience across quicklooks.
Most of these parameters are added to the end of the .gltf URL. Care should be taken to check URL encoding when passing URLs from Javascript.
If you are using the Variant SDK, all these options can be easily set when launching a quicklook. See the SDK documentation for more details.
A URL that will be visited if the users device fails to launch the quicklook (due to AR incompatibility).
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://example.com/model.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://example.com/help;end;">Avocado</a>
By setting the mode parameter you can decide whether users should only be able to view models in AR, or whether they will have access to the 3D object viewer, where they can drag to rotate and pinch to zoom the 3D model on a white background.
In most cases users are primed to expect their AR quicklook to begin as soon as they tap the link, so we lean towards ar_preferred or even ar_only.
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://example.com/model.gltf&mode=ar_only#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;">Avocado</a>
Setting the ‘resizable’ parameter determines whether the user can scale content up and down at will.
By default users can pinch-to-scale any AR content. This can be useful for contexts where users are space-constrained (e.g. seated at a table), or where objects have fine details you would like them to see.
Resizing is not advised in situations where the user is trying to accurately measure scale (e.g. whether a washing machine fits in a gap in their home).
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://example.com/model.gltf&resizable=false#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;">Avocado</a>
You can add a looping audio file by setting the ‘sound’ parameter to a url of a wav/mp3 file. The first animation in the glTF file should be an animation of the same length as the audio:
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://example.com/model.gltf&sound=https://example.com/sound.mp3#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;">Avocado</a>
You can add simple tappable banners with links to the bottom of your Android AR quicklooks. Check out our article on banners on iOS and Android for more details.
Information provided is current as of 07/20. Please get in touch if you notice any inaccuracies.
Chinese devices are present on the list, despite Google Play Services not being present on many devices (as Google services are commonly blocked by the Great Firewall). These devices have access to the AR package via their own app stores, or OS. In practice this means you will see lower availability of AR quicklooks on devices inside China, or those used by Chinese travellers.
Here’s what we've been up to recently.
