Article

Previewing a Model with AR Quick Look

Display a model or scene that the user can move, scale, and share with others.

Overview

AR Quick Look enables the user to place virtual content that you provide on any surface that ARKit finds in the real-world environment. Users can interact with your virtual content by moving and scaling it using touch gestures, or by sharing it with others through the iOS share sheet.

Screenshot of a virtual guitar that's placed in the real world environment via AR Quick Look.

Choose an Input Format

You provide content for your AR experience in .usdz or .reality format:

Display an AR Experience in Your App

In your app, you enable AR Quick Look by providing QLPreviewController with a supported input file. The following code demonstrates previewing a scene named myScene from the app bundle.

import UIKit
import QuickLook
import ARKit

class ViewController: UIViewController, QLPreviewControllerDataSource {

    override func viewDidAppear(_ animated: Bool) {
        let previewController = QLPreviewController()
        previewController.dataSource = self
        present(previewController, animated: true, completion: nil)
    }

    func numberOfPreviewItems(in controller: QLPreviewController) -> Int { return 1 }

    func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
        guard let path = Bundle.main.path(forResource: "myScene", ofType: "reality") else { fatalError("Couldn't find the supported input file.") }
        let url = URL(fileURLWithPath: path)
        return url as QLPreviewItem
    }    
}

To prevent the user from scaling your virtual content or to customize the default share sheet behavior, use ARQuickLookPreviewItem instead of QLPreviewItem.

Display an AR Experience in Your Web Page

In your web page, you enable AR Quick Look by linking a supported input file.

<div>
    <a rel="ar" href="/assets/models/my-model.usdz">
        <img src="/assets/models/my-model-thumbnail.jpg">
    </a>
</div>

When the user clicks the link in Safari or within a web view that's displayed in your app, iOS presents your scene in an AR Quick Look view on your behalf. For more information, see Viewing Augmented Reality Assets in Safari for iOS.

See Also

Quick Look

ARQuickLookPreviewItem

An object you use to customize the AR Quick Look experience.

Adding Visual Effects in AR Quick Look and RealityKit

Balance the appearance and performance of your AR experiences with modeling strategies.

Adding an Apple Pay Button or a Custom Action in AR Quick Look

Provide a banner that users can tap to make a purchase or perform a custom action in an AR experience.