Add augmented reality to your website using Pixars usdz format for iOS
In June of 2018, Apple announced a new format, Universal Scene Description or usdz, that was developed by Pixar specially for 3D content delivery. Pixar refers to usdz files as packages, so I will be referring to them as packages for the rest of the article.
Requirements:
- macOS with xcode 10 or greater installed
- blender or any other 3D modeling tool that you can use to export an .obj file
Part 1 — Creating the usdz file
Once your obj file is exported you can use the following command in terminal to convert it to a usdz file:
xcrun usdz_converter cup.obj cup.usdz -v -a -l
After you execute the command you should now see two additional files in your folder:
- cup_usd_converter_.usda
- cup.usdz
You can preview the usdz file right inside of finder like so:
Notice that the model is not textured with our png file, cup_uvmap.png. Let’s open up the usda file with a text editor and see what’s going on. If you scroll all the way to the bottom, you can see “cup_material” is an empty object.
We need to pass in the path to that texture (cup_uvmap.png) as an argument. Go back to the command line and run the following:
xcrun usdz_converter cup.obj cup.usdz -v -a -l -m /cup/Materials/cup_material -color_map cup_uvmap.png
Where cup is equal to the Xform def at the top of the file (see below):
Your usdz preview should now be textured properly when displayed in the preview:
So whats up with the z in usdz anyways!? It’s basically means that the package is a zip archive (zero compression, unencrypted). You can extract it just like a traditional zip file. Let’s take a peek inside.
- cup.usdc: Apple’s current usdz implementation. The current implementation only allows for a single usdc file but that will change over time with future OS updates.
- cup_uvmap.png: A simple png image that is used to texture the 3D model. In this case it’s a UV map.
Part 2 — Add the model to a webpage
This can be done with minimal code as seen below:
<a href=”/path_to_asset/cup.usdz” rel=”ar”>
<img src=”/path_to_asset/cup.jpeg”/>
</a>
Now when viewing the page on an iOS device running > iOS 12 you will see the AR icon in the top right corner of the image.
You can try it out for yourself at: https://xrdesignstudios.com/blb
In summary
The usdz file format together with iOS 12 AR Quick Look make it super simple to add augmented reality to your existing website. I hope you enjoyed this article and learned something new.
We would love to discuss your ideas with you! Drop us a line anytime with any questions, comments and feedback you might have. Happy creating!
About the author:
Matthew Attou is the founder of XR Design Studios in Detroit MI, working with entrepreneurs, startups and enterprises to bootstrap their ideas and bring them to reality. We are a collective team made up of designers, engineers and thinkers.
Reach out anytime to chat about how we can help you get your ideas off the ground.
