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.

[Image]

Choose an Input Format

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

To browse a library of .usdz files, see the AR Quick Look Gallery.
To browse a library of .reality assets, use Reality Composer. For more information, see Creating 3D Content with Reality Composer.

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.