ARKit Assignment 2

Placement of objects

Please conduct the following tasks. For implementation details you can refer to the lecture slides or the Apple ARKit documentation website. Please do not hesitate to ask me if you have any questions. Under „Tip“ you can find some hints for the task. The „Checklist“ specifies what should happen when your implementation is correct.

Tasks

1. Integrate AR content using QuickLook API
2. Using AR in your Safari Browser

1. Integrate AR content using QuickLook API

Since ARKit 2.0 on iOS 12 it is possible to preview 3D models in the specific UDS format with Quick Look. Quick Look is a framework that allows to preview all kinds of files such as PDF, images and more. In order to use the Quick Look API to view your own 3D content, you will need to convert it into a USDZ file and then load it with the QLPreviewController class.

Let’s start with converting your own model

Converting a 3D model to a USDZ file format

Converting a model to USDZ is quite simple, as Apple provides us with a command-line tool called “usdz_converter”. You can for example convert “obj” files using this. An example obj file can be found here - a Boat from Google Poly. The color map for the boat can be downloaded here. Other free to use files can be found on Poly

When you download the model as obj file and the color-map.png it is very easy to convert it into a USDZ file. This is done by using Apple’s “usdz Tools”. After downloading the “usdz tools”, double click on “USD.command” to open a terminal with all the needed paths set. Go to the folder where you downloaded the .obj and .png file to and type the following line:

usdzconvert Tugboat.obj -diffuseColor Tugboat_BaseColor.png

Now that you have an USDZ file we can import it into an app. If for some reasons the conversions did not work, you can download the “Tugboat.usdz” here.

Create a app to load the USDZ file using Quick Look

First create a simple iOS app based on the “Single View App” template. Now create a new group and name it “Models”. Drag and drop the Tugboat.usdz file into “Models”. Make sure you check the box “Add to targets”. If this box is not checked you will not be able to load the file later.

Implement the QLPreviewControllerDelegate, QLPreviewControllerDataSource

In order to load and view the 3D model you can use the QLPreviewController class. For this import the QuickLook framework in your ViewController.

Next add the protocol implementations of QLPreviewControllerDelegate and QLPreviewControllerDataSource to your ViewController class:

class ViewController: UIViewController, QLPreviewControllerDelegate, QLPreviewControllerDataSource {

You will need to implement the following two functions:

 func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
        return 1
        
    }
    
    func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
        guard let fileUrl = Bundle.main.url(forResource: "Tugboat", withExtension: "usdz") else {
            fatalError("Could not load Tugboat.usdz")
            
        }
        
       return fileUrl as QLPreviewItem
        
    }

The first function returns the number of files that shall be previewed. There is just one usdz file so return 1. The second function loads the file and return it as QLPreviewItem.

Initialize the QLPreviewController

In order to start the QLPreviewController you will need to initialize it and set the delegate and datasource:

let qlController = QLPreviewController()

In your viewDidLoad() function add the following code:

override func viewDidLoad() {
        super.viewDidLoad()
        qlController.delegate = self
        qlController.dataSource = self 
    }

Now in the viewDidAppear(…) you can start the preview:

override func viewDidAppear(_ animated: Bool) {
          self.present(qlController, animated: true, completion: nil)
    }

Now start the app and you should see something like this:

Bonus for the quick - Extend your app to load multiple models

Conduct the following task:

• Create a CollectionView that shows a preview of multiple models
• When one model is selected, show a preview using QLPreviewView

The result should look something like this:

Checklist	Check?
The app runs on the phone showing the list of 3D models.	☑️
When selecting one of the 3D models, it is shown using Quick Look	☑️

2. Using AR in your Safari Browser

With iOS 12 Apple supports AR content in the Safari Browser with QuickLook To try out this new function, point your iOS Safari to the following link:

AR Quick Look Gallery

Checklist	Check?
The AR models can be viewed in Safari on iOS 12.	☑️

References

The new AR QuickLook support is explained in more detail in this WWDC2018 video:

Integrating Apps and Content with AR Quick Look - WWDC 2018

Pixar Assets

Converting 3D Assets into USDZ