Easy Web Augmented Reality with AR Quick Look

In this tutorial, I’ll teach you how to build an Augmented Reality quick look for your web based app.

Augmented reality is awesome and has an unrivaled potential to enrich customer experience in many verticals. However, it has a friction point in most cases: you need to persuade a potential customer to install an app first. AR Quick Look solves this problem for iOS. This is a native feature of ARKit which launches a model viewer right from the browser — that’s why we call it native Web AR. It utilises .reality or .USDZ files, the latter is a file format developed by Pixar, and allows showing objects in incredible detail, adding animations and sounds, locking their scale to 1:1 so models show the real size of an object.

Online shopping is one of the best industries that can take advantage of AR, as it can give users the possibility to see the products in 3D and in their own environments. From previewing furniture in your home with apps like IKEA Place, to experiencing newly launched cars like this Lamborghini Huracán, this technology can improve our experience as buyers. But of course, the applications of web AR extend beyond retail as well.

AR Quick Look

Built-in apps, such as Safari, Messages, Mail, News, and Notes, use Quick Look to display USDZ files of virtual objects in 3D or AR on iPhone and iPad. You can embed Quick Look views in your apps and websites to let users see incredibly detailed object renderings in a real-world surrounding with support for audio playback.

There are many advantages of using AR Quick Look: it gives you interactions like placing, moving and scaling the object, people occlusion and sharing of the model available “out of the box”. It supports vertical and horizontal planes for placing your content and even viewing face accessories. You can view a gallery of Apple’s AR Quick Look examples here, all you need to do is open the models on an iPhone or iPad to view them in AR.

For web based AR Quick Look experiences we can use USDZ, the distribution format for USD (Universal Scene Description),which is a 3D file format developed by Pixar that focuses on speed, scalability and collaboration.

In this tutorial, we will build a simple webpage that shows a sneaker in AR. Let’s start with basic things first and see how we can launch a ready-made 3D model in AR.

Preparing the 3D model

I will be using a model from Sketchfab.com but feel free to use whatever model you wish in USDZ file format. Sketchfab offers the option to download the model directly in this file format.

Adidas Originals Stan Smith by VRModelFactory

For more examples, have a look at the Quick Look Gallery.

Converting your 3D models to USDZ Files/Changing the base unit of the model

In case you already have your models in other 3D formats, you can check out this article on how you can easily convert them to USDZ using Apple’s Reality Converter. In this article you can also see in the Properties section how to edit the base unit for example from meters to centimetres. I had to do this as well for the sneaker model so that it has a real life size when viewing it in AR.

Getting started

In order to test what we are building right away on real devices, for simplicity, we will be using codepen.io:

  1. Sign up or login on Codepen
  2. Create a new pen and name it as you wish
  3. Click save, this will create a link that you can open on your device for testing. Here is how my link looks like: https://codepen.io/roxanajula/pen/poydGKx, you should have something similar.

Showing the model in AR

For basic AR Quick Look functionality, all we need to do is add the following code in the HTML file:

<div>
    <a rel="ar" href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz">
        <img src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg">
    </a>
</div>

The code above is pretty straightforward, we have the AR model inside a hyperlink tag and an image to be displayed for the model. By adding the rel="ar" attribute we tell the browser that this is an AR model so it will automatically add the AR badge in the right corner of the image and will start the AR experience directly instead of navigating to another page.

I uploaded the image and model on my personal website as you can only host assets directly on Codepen with a paid account. When you will be developing your project you can also link to your project files, like this for example: href="/assets/models/model.usdz".

Additionally, I added the following to the CSS file to fit the image nicer on the screen:

img {
  width: 100%;
}

And that’s it! You can now save it and reload the Codepen link from your device. When we tap on the image on iOS, we will be taken to the AR Quick Look view. If we tap on the image on macOS, the model will be downloaded on your machine.

Banners

Available for devices running iOS 13.3 or later

In the previous section we looked at the most basic AR Quick Look experience, but you can also add banners with Apple Pay or Custom Actions to your AR experience.

Check out this very useful webpage made by Apple for more information on integrating those features. You can enter all the customisation details you need for your banner and this webpage will generate the code for you, pretty cool!

In this section we will have a look at different styles of banners you can add but it will be up to you to define the actions your website takes in response to tapping on the banner. For more information, see this article from Apple.

The flow of your experience will look like this:

Image Source: Apple

Here are some examples of custom banners for our sneaker webpage:

Apple Pay banner with title, subtitle, price and a “Buy with  Pay” button:

  • Button types: plain (default), bookbuycheck-outdonatepay and subscribe
  • The price is optional on Apple Pay banners only from iOS 14.
<div>
  <a rel="ar" id="ar-link" href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz#applePayButtonType=buy&checkoutTitle=Adidas%20Stan%20Smith&checkoutSubtitle=Classic%20trainers&price=$80">
      <img src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg">
</div>

Find out more about how to support Apple Pay on your website here.

Custom action banner with title, subtitle, price and a “Preorder” button:

<div>
  <a rel="ar" id="ApplePay" href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz#callToAction=Preorder&checkoutTitle=Adidas%20Stan%20Smith&checkoutSubtitle=Classic%20trainers&price=$100">
      <img src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg">
  </a>
</div>

Custom large sized banner with own html:

  • You can pick between 3 height sizes: small (81 points), medium(121 points) and large(161 points). Small will be set by default if customHeight is omitted.
  • The custom HTML file must be sent over HTTPS.
  • I am hosting the custom html file on my website
<div>
  <a rel="ar" id="ApplePay" href="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.usdz#custom=https://roxanajula.com/wp-content/uploads/2020/09/sneaker_custom.html&customHeight=large">
    <img src="https://roxanajula.com/wp-content/uploads/2020/09/Adidas_Originals_Stan_Smith.jpg">
</div>

Content scaling

Content scaling is enabled by default but you can disable it with the following URL parameter: allowsContentScaling=0.

Share link

The share functionality will link to the model by default, but you can also specify another link with the following URL parameter: canonicalWebPageURL=https://example.com.

Detect support for AR

It is good practice to only show the AR model to the users if it’s supported, here is how you can detect if AR is supported:

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

Code Source: Viewing Augmented Reality Assets in Safari for iOS

Online shopping and AR Quick Look

Native Web AR allows adding an Apple Pay button. You can also set an action like “Add to cart” instead of offering a user to pay for an item right away. Other options include redirecting them to a messenger or displaying a completely custom banner.

This feature allows to create a seamless buying experience and increase the conversion to purchase. Surprisingly, it’s not widely adopted yet — so you have a chance to be an early adopter of a promising technology.

Essentially, it helps to make a purchase as close to retail experience as possible. With the help of AR Quick Look, you can unite possibilities of e-commerce and retail in one point of sale.

If you have an iPhone or iPad, click the link below and pick one of 3D models to see them in augmented reality right from the browser.

Bonus: Nested models

You can have a look at the Making the nested USDZ file section in this article for a step by step tutorial on how to nest together more models into one USDZ file.

Keep in mind that USDZ is still a fairly new format so you might need to check that your web server understands the model/vnd.usdz+zip MIME-type. Refer to your web server documentation on how to configure this if not already supported.

Resources

TOP 10 AR SDK for iOS & Android Development in 2021

I make the TOP-list of iOS and Android Augmented Reality SDK intended to shape your AR development (Free and Paid).

I make the TOP-list of iOS and Android Augmented Reality SDK intended to shape your AR development.

In 2019, revenue from AR mobile applications amounted to 3 345 million U.S. dollars worldwide.

statista.com

First, looking Wiki-Article: Augmented reality – Wikipedia
With the help of advanced AR technology (e.g. adding computer vision and object recognition) the information about the…en.wikipedia.org

SDK (software development kit or devkit) is typically a set of software development tools that allows the creation of applications for a certain software package, software framework, hardware platform, computer system, video game console, operating system, or similar development platform.

This AR SDK for iOS and Android that you can start using right NOW!

Free SDKPaid SDK
ARToolKit
ARKit
Flutter
EasyAR
Xzimg
NyARToolkit
Kudan
MAXST
Wikitude
Vuforia
XZIGM
AR-media


Free Augmented reality SDK:

Flutter – Beautiful native apps in record time

Flutter 1.7 is new Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Who’s using Flutter?


ARToolKit

Available on: Android, iOS & Mac, Windows, Linux

ARToolKit is an open-source computer tracking library for creation of strong augmented reality applications that overlay virtual imagery on the real world.

License‎: ‎GNU Lesser General Public License
Original author(s)‎: ‎Hirokazu Kato


ARKit by Apple

Introducing Augmented Reality development for iOS, one of the biggest mobile platforms of today. ARKit is an SDK for software developers to create augmented reality apps and games for iPhones and iPads.

Supported platforms: iOS 11.0+


EasyAR

Available on: Android, iOS & Mac, Windows

Apps powered by EasyAR SDK 3.0


Xzimg

Supported platforms: PC, Android, iOS, Windows, WebGL.


NyARToolkit

Available on: Android, iOS.

NyARToolkit for Processing is provided by LGPLv3.

Latest commit on Sep 21, 2017

NyARToolkit project is developing a vision-based AR library that based on ARToolKit. Current NyARToolkit libraries have ARToolKit Professional (ARToolKit5) APIs.


Kudan

Available on: Android, iOS & Unity

According to reviews and comparisons of efficiency, Kudan is the main rival of Vuforia and make augmented reality development very easy.


MAXST

Available on: Android, iOS & Windows, Mac

MAXST AR SDK Is the Easiest Way to Develop an AR App. Learn More. AR MANUAL. The AR Manual Is a New-concept User’s Manual at Your Fingertips.


Paid augmented reality SDK

Wikitude

Available on: Android, iOS & Unity, Smart glasses Wikitude – Get Started With The World’s Leading Cross-Platform AR SDK
An Augmented Reality engine that empowers your iOS, Android & Smart Glasses apps with Image & Object Tracking, Instant…www.wikitude.com

Supported development frameworks: Native API, JavaScript API, Unity3D, Xamarin, Titanium, Cordova.

Wikitude is a mobile augmented reality technology provider based in Salzburg, Austria. An Augmented Reality engine that empowers your iOS, Android & Smart Glasses apps with Image & Object Tracking, Instant tracking (SLAM), Geo AR.
Founded in 2008.
Developer(s)‎: ‎Wikitude GmbH

 
Free Startup Pro Pro3D Demo  Enterprise
Geo Geo Geo Geo Geo
2D Im.Recognition 2D Im.Recognition 2D Im.Recognition 2D Im.Recognition 2D Im.Recognition
3D Image Recognition 3D 3D 3D
Cloud Recognition Cloud Recognition
Multiple apps
Watermark No No No No
Free €1990 per app €2490 per app €499 per app Call

Vuforia

Available on: Android, iOS & Unity, Windows

Supported platforms: Android, iOS, UWP and Unity Editor.

Vuforia is the leading AR platform. Paid from $99/mo

Read also: Vuforia Developer library — wiki.

XZIGM

Available on: Android, iOS & Windows, WebGL

XZIMG Face Tracking engine is a product developed by XZIMG Research that addresses the Augmented Reality market.

AR-media

Available on: Android, iOS & Unity


Zappar: Augmented, Virtual & Mixed Reality Solutions

Augmented Reality adds a new feature to this evolutionary appendage totally reimagining the role of the camera on your phone when used in an app as a new remote control for the world connecting you (and your audience if you’re a business owner) to the things and places around you.

For iOS or Android or an embed component in your existing app or indeed a new standalone app

There are lots of solutions allowing you to start developing your Augmented Reality App right away.

Note: Description for SDK has been copied from their respective official website.

How does a Gyroscope Sensor work in my smartphone?

Gyroscope can be understood as a device that is used to maintain a reference direction or provide stability in navigation, stabilizers, etc. Similarly, a gyroscope or a Gyro sensor is present in your smartphone to sense angular rotational velocity and acceleration. Simply put, all those mobile games, we are able to play using motion sense in our phones, tablets, etc, is due to a Gyroscope Sense. Similarly, it is required in a smartphone to be able to watch 360-degree videos or photos. The photo or the video moves, when we move our phone due to the presence of Gyroscope.

Types of Gyroscope Sensors

Gyroscope sensors are of different kinds and types and have different performance and sizes.

Image Source – EPSON

Applications of Gyroscope in Smartphone

  • Motion-sensing GUI

Gyroscope in a smartphone provides a GUI that enables a user to select menus etc by tilting the phone. One can deflect the phone slightly to go up and down the contact list. It enables a smartphone to trigger preset commands basis different motions. For instance, one can shake the phone to lock it.

  • Answer phone/open website

A Gyro sensor in your phone provides the ability to answer your phone, or open a website by present commands such as rotating, gently shaking the phone 2 to 3 times, etc.

  • Image stabilization

Image stabilization is one of the applications of a Gyroscope in your smartphone and it prevents the trembling of the hand from affecting the quality of the image. It enables the phone to record the actions, during the pressing of the shutter, in order to help catch more clear photos. It eliminates the effect of vibrations on both photos and videos.

  • GPS-inertial navigation

In case of a lost service or network, in tunnels or underground roads, the GPS continues to help navigate the car with the help of Gyroscope.

  • Motion-sensing control game

Apple with its iPhone 4 launch made Gyroscope the core of motion gaming. It enables the developer to control the game via the detection of action. It enables you to use your phone as a steering wheel while driving a car in a game, or a jet, etc. The game replicates the moments you do with your phone and hence controls games with a motion sense.

Image Source – SEIKO EPSON

Implementations of Gyroscope Sensor in a Mobile App

  • As discussed earlier, a Gyroscope Sensor can enable a number of actions to take place basis different set of motions done by a user, such as shaking the phone to undo written content.
  • Gyroscope sensor is responsible for the autorotation of the screen and view on the screen whenever a phone is rotated.
  • One of the biggest implementations of a Gyroscope is that it enables smooth rotations and execution of multiple commands in games by 3D motions.
  • Gyroscope is capable of providing precision motion inside the App functionality. This allows the user to execute majority of the tasks with the motion of the device itself.
  • Gyroscope captures a 6-dimensional angular motion. This simply means, the mobile apps that are developed using Gyroscope sensor are much likely to provide an alluring user experience than the one without the sensor.

Applications in a smartphone with a Gyroscope Sensor

Most applications in a smartphone today, work best when there is a Gyroscope sensor in the phone. For instance, the recently popular Pokemon Go game showed how Augmented Reality (AR) adds to the experience of gaming, however, what’s interesting is, AR won’t be possible without a Gyro sensor. If your phone doesn’t have a good Gyro Sensor, the same can be enabled using GyroEmu Xposed module in any Android phone.

Android Apps that make the best use of a Gyro Sensor

BEST 5 Android Apps that make the best use of a Gyroscope Sensor:

iPhone Apps that make the best use of a Gyro Sensor

TOP 3 iPhone Apps that make the best use of a Gyroscope Sensor

More and more apps are coming every day using Gyro sensors creatively. However, a lot of innovation is being done in the space of Augmented Ready with Gyroscope in smartphones. We are excited to see what comes up!

Best Smartphones with a Gyro Sensor

With the Gyro sensor being an inevitable part of every smartphone today, following are some of the best smartphones you can get, with a Gyroscope sensor.

Calling All Architects and Engineers: 3 Steps to Tap Into Visualization With 3ds Max Tool

These 3ds Max tips for project visualization are courtesy of Arup Connect via Redshift partner ArchDaily, “the world’s most visited architecture website.” ArchDaily is dedicated to informing and inspiring architects worldwide to improve the quality of life for an estimated three billion people who will move into cities over the next 40 years.

Arup Connect is the online magazine of Arup, an independent firm of designers, planners, engineers, consultants, and technical specialists. For this article excerpt, Arup Connect interviewed Arup visualization specialist Anthony Cortez about how he uses 3ds Max, the skills visualization artists need during design and construction phases, and how augmented reality in construction is changing the face of visualization.

Continue reading “Calling All Architects and Engineers: 3 Steps to Tap Into Visualization With 3ds Max Tool”