CODEWITHSUNDEEP
javascriptaugmented-realityarkitreality-composerarquicklook
RyDev
RyDev

Reputation: 157

Tell if a user’s browser supports USDZ or Reality Composer file formats

I have created some files in the "reality" format using Apple’s Reality Composer app for iOS. I had a difficult time figuring out how to implement it on the web. After looking at some webpages that include USDZ files on them, I finally put this into my site (links slightly changed):

<a href="media/images/ar.reality" rel="ar">
  <img src="media/images/image.png" />
</a>

This works just fine in iOS/iPadOS Safari, but not so much in other browsers such as macOS Safari, Firefox, etc. When you click on the link in these browsers, it wants to download the reality file. I want to write a script in JS that will add anchor tags only when the browser supports USDZ or reality files. Is there a good way of doing this?

Edit:

The InstaPot site is a good example. They have an anchor tag to a USDZ file on iOS/iPadOS Safari, but they don’t on macOS Safari or other third party browsers.

Upvotes: 5

Views: 2643

Answers (1)

Andy Jazz
Andy Jazz

Reputation: 58093

As clearly stated on Quick Look Gallery page:

Built-in iOS apps, such as Safari, Messages, Mail, News, and Notes, use Quick Look to display USDZ files of virtual objects in 3D or AR. You can embed Quick Look views in your apps and websites to let users see incredible detailed renderings, including reflections of real world surroundings in shiny virtual objects.

Tap any of the 3D models below on a device running iOS 12 or later to view the object and place it in AR. Or click a model on Mac to download the USDZ file.

First Approach

So, the simplest way to do what you want is to turn desktop version of website into mobile version. You can easily do it with a Responsive Switch tool. So all users who use Mac computers can online see a VR version of USDZ, not a downloaded file. But there's one unpleasant problem – these users cannot see a model in AR mode.

Second Approach

You need to write a JavaScript script managing rel="ar" attribute for USDZ file format. I really doubt that any other web browser (except Safari) can support reality file format. Reading this post you can find out what way to go to.

Upvotes: 0

Related Questions