This article demonstrates the process of exporting 3d objects from Unity to a webpage that can be opened on your iPhone(Safari Mobile). This allows you to view a 3d view or an AR view. The concept of viewing 3d on the web is quite beneficial for users who do not prefer installation of applications. There are various use-cases, but lets take a “Quick-Look” at what solution Apple offers to us!
Quick Look
Apple has come up with a brilliant solution to view USDZ files on your mobile browsers in 3d or AR. All we need to do is convert a 3d model or scene into UDSZ and host it on the server. More info : https://developer.apple.com/augmented-reality/quick-look/
USDZ
Its a simple file format which means Universal Scene Description(USD) and the zipped/compressed version is the USD(Z). The film industry uses this quite a lot. More info : https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html
The Setup
Unity and a Server to host your files. I am using Xampp to locally host all the files and Unity version 2019.4.13f1.
Unity
Open your favorite project in Unity. Then go to Package Manager and Install the preview package of USD:
Once installed you will get to see a Menu named USD:
Select the object you want to export and then click “Export Selected as USDZ”
Web
Once you have the USDZ file, all you need to do is place the file in a folder on your server and add it to your html file.
To add the Teapot in your html file, you can start of with a div with a “rel” attribute set to ar. The
relattribute specifies the relationship between the current document and the linked document.The href attribute pointing towards the usdz file you want to load. The href attribute specifies the link’s destination
Now you can design the page as you like.
For now, my page looks like this:
Once I click on the Teapot it loads up an AR view:
The web-page allows the user to select the object mode. This is to view the object itself:
Conclusion
The support for AR using a USDZ file on the mobile browsers is really commendable. This brings up enormous opportunities to the market. A well defined webpage can contain various 3d objects which allow the users to view the 3d mode. With animations and interactions, it exponentiates the opportunities of what web can bring to you.
Unity being a pretty popular and convenient game engine also allows the gamification of 3d models and the Look dev with a support to export USDZ in preview now.
Imagine a store (retail, shoe, cosmetics, jewelry, etc.) having its own web page showing all the possible products? Or an engineering drawing explaining how the jet propellers of an aircraft work?
I hope this quick introduction would have given you some of the slightest ideas to get your own model on your phones through the web, eliminating the necessity of applications to be installed.
