In this guide I will show you how to create usdz files that can be displayed natively in Safari on iOS 12 and above.
The usdz file format, that was developed by Pixar, can be used to create Quick Look Objects that can be displayed in 3D and AR (Augmented Reality) either in Apps or in Safari on iOS.
This is how an experience on iOS can look like.
How to create a usdz file
1) Create a 3D File
To create usdz file you’ll need a 3D file that you’ll convert to a usdz file. For a still object you can use a Wavefront (.obj) file. For an animation you’ll use an Alembic (.abc) file.
I used Blender to create that File but you can use any other 3D program that can output .obj files.
2) Use the usdz converter to covert 3D file
You will need to install Xcode on your mac which has the so called usdz converter pre-installed. If you want to dig deeper and create usdz files in your application check out apples documentation
To get started you’ll need the following files:
- .obj file of your 3D object that has all it’s UV Maps saved properly for the textures
- A set of textures for each mesh that exists in the file. Each texture is optional and only has to provided if you need it to improve the look of the file.
- color map (also called albedo)
- normal map
- metallic map
- roughness map
- ao map (ambient occlusion)
- emissive map
The terminal command to convert your file looks like this:
xcrun usdz_converter input.obj output.usdz -g CubeMesh -normal_map cubenormal.png -color_map cubecolor.png -roughness_map cuberoughness.png -metallic_map cubecmetal.png
If you had another Mesh in the 3D file just follow up starting with another -g and the name of the mesh.
If you want to debug the input file and get verbose output to look at the names of the meshes in the obj file just add
-v like so:
xcrun usdz_converter input.obj output.usdz -v
And here is a complete video walkthrough of the whole process:
A few tips for you so that you don’t make the same mistakes as I did.
- Don’t compress your png textures with a tool like TinyPNG, it will mess up the alpha channel and won’t work correct.
- If you have Photoshop you can use it to create normal maps (Filter -> 3D)