Week 5 Technical Post

From Blender to AR in Safari

For this week, I want to put my recent introduction of 3D modeling into use, coupled with Apple's new Reality Composer and Reality Kit, explore the how the making of AR experiences in iOS and Safari has simplified.

The easiest way to prototype a slightly complex AR interaction is to convert 3D models into .USDZ file, import the file into the Apple's Reality Composer App to prototype interaction. If you were to publish the experience, you can take the .reality file into XCode and render it in a simple ARView and build to iOS Devices.

For this week, I want to explore how Apple was able to attach the Mac Pro AR Inspection inside the browser, and I was able to do it in three simple steps. Here is how:

1. Modeling in Blender

I recently attended a workshop going over the basic of Blender, an open-source 3D Modeling software. I took this opportunity to practice with it further.

2. OBJ to USDZ

There are two ways to convert the exported model into .usdz files, first is use the XCode function on macOS
's command line: details can be found here. Ther is also use an online converter here.

Once you have the .usdz file generated, there are a few ways you can use this file. One is that you can include the file in your iOS App. You can also further animate it in Apple's Reality Composer App. What we are exploring here next is to attach it in an HTML file, where iOS devices will be able to inspect in browsers.

3. Serve .usdz on the web

To serve it inside the browser, there is a way to create a link that let you open a new window to see the AR. A better practice is to open the file in place which is way more friendly but requires a placeholder image.


<a rel="ar" href="arFile.usdz"> 
<img style="width: 80vw;" src="previewImage.png"> 
</a>

Once the site is accessed on an iOS Device, you will see your placeholder image at the top right corner. Tap on the image, you will enter into this window where you can explore the 3D model as well as see it in AR.

Try it here

Useful Links:

Apple AR Quicklook
Webkit Viewing AR