There are many use cases of augmented reality (AR) in various fields including industrial, entertainment, training and even educational applications. Fashion industry too has many use cases of AR that spans across design visualization to intractable fashion. Time to enhance and upgrade your wardrobe and find your personal digital look with XR technology!
As a matter of fact, 100 million consumers are already using AR when shopping and the majority of them do it because it’s fun! But that’s for another article. Retailers, you better jump on this trend before it’s too late. This will be the future of retail!
In this tutorial, we are going to build an interactive AR app in Unity game engine which will turn your plain tees into an interactive piece of art. The time for boring T-shirts is running out fast. It's time to bring “print to life” by integrating cool AR effects and interactions to tomorrow’s fashion industry to increase engagement which ultimately makes it a fascinating advertising and marketing tool. Imagine superimposing an anatomically-correct human body parts like digestive systems or beating heart rate next time you’re taking a picture in selfie mode. The functionality of Unity AR technology, and your smartphone AR camera are amazing. You’re going to be a star on Instagram and Facebook!
GET THE ASSETS:
Project files associated with this project.
On-Demand AR T-Shirt Workshop.
Recap: How Does Augmented Reality work?
We already wrote about how augmented reality works. There are multiple ways how AR applications can work. The oldest method of AR is known as “marker-based” augmented reality. In marker-based AR, the application looks for a known image and once that image is identified, it can track the boundaries of that image in the camera input. That image could be your company logo, printed stickers, or any other existing object in the real-world (think about theater plays or music posters). Aligning 3D objects along with the tracked image makes it an illusion such that we can observe that a 3D model is actually “on top” of the tracking point of the tracked image.
The whole process is extremely similar to the AR business card tutorial and AR face filters tutorial (but in that case, your face is a “marker-based point”). For these kind of tutorials we are going to use our mobile device as an AR platform but you can definitely use similar principles for developing more complex AR experiences for mixed reality headsets like HoloLens 2 or Magic Leap.
How marker-based AR looks like
Source : https://library.vuforia.com/features/images/image-targets.html
How to Make Your Own AR T-Shirt?
About a decade ago, building an AR based application required knowledge of computer vision, mathematics and 3D knowledge. However, the field of XR is now taken over the world and the developers of these algorithms have made it much easier to build an AR application, even without any knowledge of programming. The following explains the prerequisites and the step-by-step guidelines on building a simple AR enabled t-shirt application in a matter of minutes.
Prerequisites
We will be using the Unity 3D engine to set up the project and utilize the native augmented reality frameworks provided by both Android and iOS systems. In Android, the AR service is known as “ARCore” and in iOS, it is known as “AR Kit”. Both the frameworks are powerful enough to build cool AR applications and both have separate software development kits (SDKs) to be used within Unity.
However, building the same application twice for android and iOS does not seem to be very productive. In order to solve this time overhead, we're going to use a Unity package called “ARFoundation” which uses the same flow within unity to build AR applications for both Android and iOS. So if you're looking to develop your AR game or app with compatibility in mind, choose ARFoundation as a base!
The only requirement for this tutorial is to download and install Unity. I would recommend installing the Unity Hub first, creating an account, logging in to the Unity Hub and installing an editor version directly from Unity Hub. You should read the How to Download and Install Unity and Visual Studio or watch the video tutorial on the same page to go through the step-by-step process of installing Unity on your computer. You also need to download necessary modules you need to deploy this application in your Android or iOS device. Make sure that you tick “Android build support” along with the SDK, NDK and JDK tools for Android and “iOS build support” for Apple iPhones and iPads.
Step 1 - Designing the AR T-Shirt
Designing an AR garment would be the first step of your project and this is offline to setting up the AR project. A good AR tracking image should adhere to the best practices in terms of the ability to be tracked. The design should be readable, pretty as well as made with the best practices in mind. This documentation page provides a comprehensive list of all the best practices in designing a proper AR marker design.
The following is the AR clothing design that I will be using for this project. You can easily recycle it or replace these assets and create your own virtual clothing.
Step 2 - Setting up the Unity Project
Open Unity Hub, and click “New Project”.
We will be using the “Universal Render Pipeline” template for this project. Provide a name for the project, a location for it to be saved and press “Create Project”
Once the project is open, switch the project build platform to either Android or iOS by going to File > Build Settings. Select the platform you want and click “Switch Platform”
Step 3 - Installing the necessary packages
In the Unity Editor go to Window menu > Package Manager and choose the following packages:
XR Plugin Management
ARCore / ARKit version 4.1.1 or a later version
AR Foundation that matches the same ARCore / ARKit version
Step 4 - Project setup for AR
Go to Edit > Project Settings
Scroll over to XR Plug-in Management
Tick ARCore or ARKit under relevant tab
In your project window, which contains all the assets, find the settings folder and click the “ForwardRenderer” asset file, and look at the Inspector window
Click “Add Renderer Feature” and select “AR Background Renderer Feature”. Without selecting this, your application will not be able to show the camera input in your app and you’ll see only a black screen. This is only relevant to URP projects and is an important step in AR Foundation apps with URP.
One Final Setup step.
Go to Player settings in Edit > Project Settings and do the following changes
If you are building for Android
Remove the “Vulkan” from “Graphics API” under Other settings
Set the Minimum API Level to 24, Scripting backend to “IL2CPP” and tick “ARM64” under “Target Architectures”
If you are building for iOS
Add any text in “Camera usage description”, Set minimum iOS version to 11.0 and tick “Requires ARKit support”. Make sure the Camera Usage Description is set to "Using Camera for AR" as well.
Step 5 - Importing assets and setting up the scene
Import all your 3D models and tracking images into the Unity project. Use the folders as necessary to organize your assets.
Create a new scene by going to File > New Scene.
Save the scene in the scenes folder.
Right click in an empty space in your hierarchy, go to XR and add both “AR Session” and “AR Session origin”.
Delete the Main Camera
Step 6 - Creating the AR Reference library
In order for the AR Foundation to work with AR images, we need to set up an image library of all the trackable images. For that, create a new folder in your project window.
Go into that folder, right click and choose Create > XR > Reference Image Library
You can give any name you like for the library. Click the library and click the “Add Image” button visible in the inspector window.
Drag and drop your image texture that you imported into the Image box. Give a name you like for the name.
Click “Specify Size” and set up a proper physical size for the image target in meters.
Step 7 - Adding the Image tracking feature to the scene
In your scene, click the AR Session origin
Click “Add Component” in your inspector window and search for “AR Tracked Image Manager” and add it
For the “Serialized Library” drag and drop the AR reference asset that we created in step 6
Set the “Max Number of Moving Images” to 1 (you can increase it if you have more images to track simultaneously)
Step 8 - Creating the tracked Image prefab
Tracked image prefab is the group of 3D models, animations and all the assets that you want to be visible on top of your T-Shirt design. It is better to keep a reference of your original artwork to set up the image prefab.
Right click an empty area in your hierarchy and create an empty GameObject by pressing “Create Empty”
You can rename it “AR Ref”
Create a Quad inside the AR Ref by right clicking it and choosing “3D Object > Quad”
Change the “X rotation” of the Quad by 90
Create a new material in the project window by right clicking the material folder and selecting Create > Material
Click the material and apply your T shirt design as the Base map
Also, select the shader of the material to “Universal Render Pipeline > Unlit” from the top drop down menu in the inspector.
Now drag and drop the material on top of your quad. You will see your image in the scene but stretched.
Scale the quad in a way it matches the original size of the design. Here 1 refers to 1 meter.
Now inside the Quad, you can apply any 3D model or an animation you like. You can make it pop by integrating particle effects, sounds, animations, images, 3D models and even post processing. Following is the structure of what I made as a sample for this project. Notice how all the assets are child objects of the Quad.
You can also rename the quad as you wish.
Now we are going to convert this to a prefab by dragging and dropping the “AR Ref” to a folder named “Prefab” in the project window. But before that, remember to disable the “Mesh Renderer” component of the Quad to make the reference image invisible.
Once you convert it to a prefab, you will see that it has become a blue cube.
Delete the AR Ref object from the scene view, as we now have it in our project folder.
Now, Drag and drop the “AR Ref prefab'' from the prefabs folder to the “Tracked Image Prefab” value in the AR Tracked Image Manager component in the AR Session Origin.
Step 9 - Build and Test your AR app
Go to Build Settings in the File menu.
Click “Add Open Scenes” and make sure only your scene is selected.
If you are building for an android, you can connect a device with USB debugging turned on, and click “Build and Run”. Choose a location to save your build and wait for it to build and launch on your connected device.
If you are building for an iPhone, check the following documentation by Unity.
That's it. Go out and show your wicked AR layers to the wearers of plain-dressed people.
What's Next?
As I mentioned before, this is a simple implementation of marker-based augmented reality app in the fashion industry. Or just a way to turn your apparel into social media worthy pieces of art.
The same can be applied to many fields of interests that are even yet to be explored. You can reuse this tutorial for posters, walls, stickers, cards, and more. Let us know when you launch your own brand of digital clothing!
Checkout our blog and our workshops page regularly to know more about AR (and VR - virtual reality) application development.
If you are interested in getting into the field of XR, make sure to check out our 10-week XR development course and our 10-week XR interaction and design course.
