Tutorial 6: Exporting for AR with USDZ

< previous page

In this tutorial, we are going to use RapidCompact to optimize a 3D model and export it directly to the usdz format for instant display in any AR or 3D Viewer on iOS or direct usage in ARKit. Note that you will be able to convert any currently supported file formats (obj, ply, gltf, glb) to USDZ using RapidCompact. This website checks if your browser supports direct viewing with USDZ:

If you have a device with iOS 12, such as a recent iPhone or iPad, you should be able to simply view one of the following assets in AR by tapping on one of the following links (Diesel Engine from CadNav, Shoe and Tutanch models courtesy of CultLab3D):

In the following, we'll see how to create such an embeddable AR experience, using RapidCompact. Let's start by downloading the original mesh file and the pre-edited config here.

As you can see the downloaded file consists of the scanned mesh file as well as the respective textures and a config file. While having all files in the same directory, just execute the following command with the RapidCompact CLI:

      rpdx -i Tutanch_scan.obj -c -e Tutanch_compact.usdz

You now should have a compact version of the scan in the USDZ format. If there is a need to check the result first, feel free to convert the model to another format first. In this case we converted the model into glTF as explained in the previous Tutorial and exported it using the -w command for embedding in a Web page, or - if you prefer a graphical, configurable tool - use the Turner 3D configurator to create your custom 3D web viewer. In this case we used the Turner 3D to configurate also the link to the creator of the original 3D scan. Your resulting compact model should now look similar to this version:

What is the USDZ Format and how can it be used?

USD, short for Universal Scene Description, is a 3D format by Pixar. The USDZ file format is a format for displaying and sharing USD 3D content natively in iOS and platforms that use the USD runtime. Here is a link refering to the official introduction of the USD format by Pixar.

Currently, an USDZ file can contain an USD file, material specifications and/ or textures (a list of supported files can be found here). With RapidCompact, USDZ files can be written from inputs with PBR Materials and one or multiple input textures, for example resulting from a 3D scan. RapidCompact will also interpret material properties in form of .mtl files or as a part of an input glTF file and convert them into the proper internal format for USDZ. We recommend to use PBR-based materials or textures for the USDZ format to get the best possible visual result. Especially for AR visualizations with the iOS AR-Viewer or custom apps build with ARKit, PBR materials can be very benefitial to the over all quality with a realistic material behaviour in combination with (real-time updated) environment lighting.

The exported sample usdz file opened directly via an embedded HTML link on an iOS device (in this case an iPad).

Embedding a Link to USDZ Files for Direct AR Usage

In addition to the possibility of using USDZ files in ARKit or other software and platforms supporting the format, there is a very simple and easy-to-setup way to directly display USDZ files in AR on an iOS 12 device. In the following we will set up a simple example HTML snippet to directly access your USDZ files through the tap on the link or button on your Web page. USDZ the sample USDZ and image file here. The html code directing to the USDZ file could look similar to this:

            <a href="directory/sample_file.usdz" rel="ar">
                <img src="sample_image_file.png" alt="" width="300" height="300">

The most important part here is in line 5: the rel="ar" attribute indicates that the link attached to the image is refering to content usable with the iOS AR- Viewer and also indicates the usibility with a cube- logo layed on top of the used image file (iOS device only).

When hosted over a Web server, the resulting image embedded to the website should now look show the image and, in addition, if displayed on an iOS device, a small badge showing a 3D cube should appear in the top right corner:

More on information on how to correctly embed USDZ files can also be found in the Webkit blog.

Tutorial 6: Exporting to USDZ

< previous page