GLB2PNG

Opening glb/glTF/usdz files in AR

Show your 3D models on your customers device without the need to install an app

On Android devices using Scene Viewer

As of Android 7.0 (API Level 24) every Android smartphone that is capable of using augmented reality comes with an app called Scene Viewer. This app can be launched by using an intent (Android system message) directly from the browser or other Android apps.

We can use this to open glb/glTF files, that are publicly available, via an URL directly in AR on your users Android device.

Opening a public glb/glTF url on Android

Let's open the Flight Helmet from the Khronos Group demo models.

The public URL to the glTF file is: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/refs/heads/main/2.0/FlightHelmet/glTF/FlightHelmet.gltf

Now let's build the intent URL that we use to launch this model directly on the phone:

intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/refs/heads/main/2.0/FlightHelmet/glTF/FlightHelmet.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;

This only works on Android phones so it's recommended to show it only on supported devices. If you are on an Android device click on the image below to test it.

Flight Helmet image rendered using glb2png.com

Customizing the experience

There are a few parameters we can set to customize the user experience. As you might have noticed the link above opens the 3D model in a viewer first before letting the user choose to open it in AR.

mode

Mode can be set to launch directly into AR instead of the 3D viewer. Options are:

  • 3d_only, launches the 3D viewer directly without the option to open AR -> Example
  • 3d_preferred, default behaviour that launches the 3D viewer directly with the option to open AR -> Example
  • ar_only, starts AR directly without the option to switch to 3D viewer -> Example
  • ar_preferred, starts AR directly but the user can switch to 3D -> Example

You can provide a link to guide users back to your website or shop. Example

title

Using title you can provide your users with information about what they are seeing. Example

resizable

You can define if your users are able to resize the 3D model. This is especially useful if you are showing 3D models of products, this means your users can get a better understanding of how big the product is. Default value is true and the parameter only affects AR view.

Resizable Example

Non-resizable Example

enable_vertical_placement

If you are showing products or 3D models that can be placed on a wall you should use this parameter. It enables your users to move the product on to a wall in AR view. Default value is false

Example with vertical placement enabled

Good to know

Scene Viewer supports the KHR_materials_unlit and KHR_texture_transform features of the official glTF specification and you can also use animations (only the first one is played on loop). Check out the official documentation for model requirements.

On iOS devices using Quick Look

Quick Look is supported since iOS version 12 and enables opening usdz and reality files directly from the browser.

Opening a public usdz/reality url on iOS

Let's open the Hummingbird demo model from Apple demo models.

The public URL to the usdz file is: https://developer.apple.com/augmented-reality/quick-look/models/hummingbird/hummingbird_anim.usdz

Now let's build the link element to launch this model directly on the iPhone/iPad. Basically it's as easy as adding rel="ar" to your link element. If you already have an image you can use your own.

<a rel="ar" href="https://developer.apple.com/augmented-reality/quick-look/models/hummingbird/hummingbird_anim.usdz">
  <img src="https://developer.apple.com/augmented-reality/quick-look/models/hummingbird/hummingbird_2x.png" alt="Hummingbird"/>
</a>
Hummingbird Image credit: apple.com

If you want to show a text only, we have to add an invisible 1x1 pixel GIF inside the link element, otherwise it will not launch the Quick Look app.

<a rel="ar" href="https://developer.apple.com/augmented-reality/quick-look/models/hummingbird/hummingbird_anim.usdz">
  Hummingbird
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</a>
Hummingbird

Customizing the experience

There are a few parameters we can set to customize the user experience.

allowsContentScaling

You can define if your users are able to resize the 3D model. This is especially useful if you are showing 3D models of products, this means your users can get a better understanding of how big the product is. Set it to 1 (default) to allow scaling and to 0 to prevent scaling.

<a rel="ar" href="https://developer.apple.com/augmented-reality/quick-look/models/hummingbird/hummingbird_anim.usdz#allowsContentScaling=0">
  Hummingbird with disabled scaling
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</a>
Hummingbird with disabled scaling

canonicalWebPageURL

By default the share button in the Quick Look app will share the model itself. You can define which link to share by using this parameter.

<a rel="ar" href="https://developer.apple.com/augmented-reality/quick-look/models/hummingbird/hummingbird_anim.usdz#canonicalWebPageURL=https://www.glb2png.com">
  Hummingbird
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
</a>
Hummingbird

Good to know

Quick Look also supports completely custom views and Apple Pay checkouts directly from AR. Check out the official documentation for more information.

Detect if iOS device support AR

You can use the following javascript snippet to detect if the device supports augmented reality:

const a = document.createElement("a");
if (a.relList.supports("ar")) {
  // AR is available.
}