How to Make AR Cloth Facemasks with Augmented Reality Fashion

Welcome to AR Cloth Face Mask, where you’ll learn how to make an augmented reality cloth face mask from start to finish! Led by Steven Christian, a talented and experienced artist, animator, and augmented reality developer, this course is perfect for those who have experience with Unity and other creative tools, as well as a knack for crafting.
Throughout the course, you’ll learn how to design a character with simple shapes, create a repeating pattern based on your character and designs, sublimate a cloth face mask, build an augmented reality experience for your face mask using Unity and Vuforia, code a rotation animation with C#, improve the tracking of your experience by tweaking the design, add 3D models to the experience, add custom animation to each of the 3D models using the timeline, and build an augmented reality app for an android phone.
To complete the course, you’ll need access to photo editing software (such as Photoshop), sublimation paper, a sublimation printer, Teflon sheets, thermal tape, a heat press, Unity 3D, and 3D modeling software. With these tools and the skills you’ll learn, you’ll be able to create a one-of-a-kind augmented reality face mask that showcases your creativity and technical skills.
By the end of the course, you’ll have learned how to design, craft, and build an augmented reality experience from start to finish, using the same skills that Steven uses in his work as a full stack augmented reality mobile developer. Whether you’re looking to add a fun project to your portfolio or just want to explore the intersection of art and technology, this course is sure to inspire and empower you to take your creativity to the next level.

What is augmented reality fashion?

Augmented reality (AR) fashion is a term used to describe the use of AR technology in the fashion industry. This could involve the use of AR apps or other digital tools to enhance the shopping experience, create virtual fashion shows or events, or display virtual clothing or accessories on the body. Some examples of how AR is being used in fashion include:

Allowing customers to try on clothes virtually using AR apps or mirrors
Creating interactive fashion displays or installations that can be viewed through AR
Displaying virtual clothing or accessories on the body using AR technology
Hosting virtual fashion shows or events using AR
Overall, the goal of AR fashion is to provide a more immersive, interactive, and engaging experience for customers and fashion enthusiasts, while also allowing designers and brands to showcase their collections in new and innovative ways.

Design a character with simple shapes:

In this module, you will learn how to design a character using simple shapes. This will involve sketching out rough concepts, refining your designs, and creating a clean and clear character design. You will also learn about the importance of simplicity and clarity in character design and how to use basic shapes and forms to create a strong and effective character. By the end of this module, you will have a character design that you can use as the basis for your augmented reality face mask.

Design a pattern based of your character:

In this module, you will learn how to design a pattern based on your character. This will involve creating a repeating pattern using your character design, adjusting the scale and placement of the pattern elements, and refining the overall design. You will also learn about the importance of balance and harmony in pattern design and how to use color, texture, and form to create a cohesive and visually appealing pattern. By the end of this module, you will have a pattern design that you can use to create a cloth face mask.

Make the pattern repeatable:

In this module, you will learn how to make your pattern repeatable. This will involve setting up your pattern file in Photoshop, adjusting the size and placement of the pattern elements, and testing the repeatability of the pattern. You will also learn about the importance of seamless repeats in pattern design and how to use various techniques to ensure that your pattern repeats smoothly and consistently. By the end of this module, you will have a repeatable pattern that you can use to create a cloth face mask.

Sublimate a cloth face mask:

In this module, you’ll learn how to use sublimation printing to transfer your design onto a cloth face mask. You’ll learn about the basic principles of sublimation printing, the equipment and materials you’ll need, and the steps involved in the process. You’ll also learn about design tips for sublimating onto fabric, such as how to choose the right colors and avoid common pitfalls. By the end of this module, you’ll have a finished cloth face mask with your design on it, ready to be augmented with Unity and Vuforia.

Build an augmented reality experience for our facemask with Unity and Vuforia:

In this module, you’ll learn how to use Unity and Vuforia to create an augmented reality experience for your cloth face mask. You’ll set up your project in Unity, import the Vuforia package, create an image target, and add 3D models to the scene. You’ll also learn about the basics of image tracking and how to use Vuforia to detect and track your cloth face mask. By the end of this module, you’ll have a functioning augmented reality experience that you can test on your mobile device.

Code a rotation animation with C#:

In this module, you’ll learn how to use C# in Unity to create a rotation animation for your cloth face mask. You’ll create a script to control the rotation of a 3D model, adjust the rotation speed and axis, and test the animation in the Unity editor. You’ll also learn about the basics of C# syntax and how to use code to control the behavior of 3D models in Unity. By the end of this module, you’ll have a working rotation animation that you can use to bring your cloth face mask to life.

Optimize the tracking of your augmented reality experience:

In this module, you’ll learn how to optimize the tracking of your augmented reality experience by tweaking the design of your image target. You’ll learn about the factors that affect tracking performance, such as contrast, symmetry, and complexity, and how to use these factors to your advantage. You’ll also learn about the various options for debugging and improving tracking in Unity, such as using the Vuforia Configuration panel or the Vuforia Device Tracker. By the end of this module, you’ll have improved the tracking of your augmented reality experience and will be able to test it on your mobile device with greater accuracy.

Add 3D models to the experience:

In this module, you’ll learn how to add 3D models to your augmented reality experience in Unity. You’ll learn how to import 3D models from external sources, scale and position them in the scene, and create simple animations to bring them to life. You’ll also learn about the various options for controlling 3D models in Unity, such as using scripts or the timeline. By the end of this module, you’ll have added at least one 3D model to your augmented reality experience, which you can test on your mobile device.

Add custom animation to each of the 3D models using the timeline:

In this module, you’ll learn how to use the timeline in Unity to create custom animations for your 3D models. You’ll learn how to create and edit keyframes, set up animation curves, and control the properties of your 3D models over time. You’ll also learn about the various options for animating 3D models in Unity, such as using scripts or the animation window. By the end of this module, you’ll have added at least one custom animation to your augmented reality experience, which you can test on your mobile device.

Build an augmented reality app for an android phone:

In this module, you’ll learn how to build your augmented reality experience as an app for an Android phone. You’ll learn how to set up your project for mobile deployment, configure your app settings, and build and run your app on a device. You’ll also learn about the various options for deploying your app, such as using the Google Play Store or installing it manually. By the end of this module, you’ll have a functioning augmented reality app that you can share with others or use for your own personal projects.

Section 1: Designing a character
• In this section we will go through the process of creating our own characters for our facemask
• We will first start by sketching our characters
• We will then clean up the idea and the sketch
• Then we will finalize the design and color it.
• At the end, you will have a design that we can place on our facemask and turn into an AR experience on our face.

Lesson 1: How to sketch design a character
• Create a new canvas
• Create a new layer
• Select our favorite brush
• Use shapes to create interesting characters
○ Those shapes include: Circles, Squares, and Triangles
○ Combine the shapes to make different parts of the character
• Have fun with the design and take the time to make something that is enjoyable.
• If you have an artistic style, this the time for it to shine!

Lesson 2: Clean up the sketch
• Create a new layer
• Set the sketch layer to 50% opacity
• Pick a brush that is thicker, and begin to clean up the design
• The goal is to take the messy sketch and add cleaner lines to it.
• Even though we spent time with details in the sketch phase, feel free to continue adding new details to the design to really make it pop!
• Don’t be afraid to use the transform tools to modify the figure to your liking

Lesson 3: Finalize the lines in the design
• Create a new layer
• Set the previous layer to 50% opacity
• Select a hard round brush on any opaque brush
• Trace the detail of the design with clean lines
• Again, tweak the design until your heart is content!

Lesson 4: Add a base color for our design
• Make a new layer, and place it under our final line layer
• Use the magic wand to select the white space outside the black lines of the final line layer
○ This will create an outline around the line work
○ Click Select > Modify > Expand and set the Expand to 2 px
○ We want the dashed lines within the Black lines of our character
• We will then name the layers line work and color to be organized
• With the color layer selected, we will right click within the dashed lines on the screen, and select Inverse Selection.
• We will then choose our paint bucket tool and fill the space within the dashed lines with a bright color on the color layer.
• Afterwards, select the magic wand tool, right click the canvas, and click Deselect to remove the dashed lines.

Lesson 5: Let’s color our design
• Create a new layer
• Right click the new layer and select Create a Clipping Mask,
○ This will parent the new layer to the base color layer to help stay within the lines
• We choose our colors and have fun with the process!
• When we finish coloring, we will convert the design to a smart object by selecting all the layers of the design, right-click > Convert to Smart Object
○ This makes managing the character design easier to do when we design the rest of the mask
○ With clipping masks and effects, you can customize the design even further

Challenge 1: create 3 to 5 more designs of the same character or of different characters.
• This will help make the design more unique as well as make it easier for the augmented reality app to track the cloth facemask.

Section 2: create a pattern for our cloth facemask
• We will end up with a square design with a repeating pattern that integrates our character design into it seamlessly

Lesson 6: make a square pattern
• To make a repeating pattern we must start with a new square document.
• Create New document – File > New
• Set the size to 600px x 600px
• Set the resolution to 300 DPI
• Use the design from the previous lessons and challenge and paste them into the new document
○ Resize them so they all fit in the document
• Add a grid to our document to help with the pattern design
○ View > New Guide Layout
○ Set Gutters to .06 in
○ Set margins to .03in
○ Set Columns to 3
○ Set Rows to 3
• Place the designs within the squares to design the pattern.
○ Feel free to copy and rotate the designs to add variation to the pattern

Lesson 7: Define a Pattern
• Select all the design elements on the canvas
• Edit > Define Pattern
• Name the pattern
• Click Save
• You can hide everything, create a new layer, choose the paint bucket, change the fill to pattern
• Select pattern we made and fill the canvas with the pattern
• Create a new document that is larger than 300px wide
• Test the pattern by filling the canvas.
• If you want to modify the pattern, you must edit the original pattern design and re-define the pattern as a new pattern.
○ Extra modifications could be as simple as adding simple shapes
○ If the assets are many layers, you can organize the layers with folders.

Challenge 2: Create your own unique pattern
• Incorporate your own designs
• Make new graphics make your own pattern scheme
• Add your own colors
• Make something unique that will really pop!

Section 3: Sublimation face masks
• Make sure to get the sublimation cloth for this to work.
• Polyester works the best
• With the face mask, you want to know the dimensions to base the design off of
• For the printer, I use an Epson Ecotank which is an affordable printer you can convert to a sublimation printer. The printer must have a rear feed to run the paper through
• For the paper, I use sublimation paper
• For ink, I use sublimation ink from Printer’s Jack
• All of these can be found on Amazon for a fairly reasonable price

Lesson 8: Make a print template for sublimation
• Create a letter size document
• Make a rectangle that is the same size as the facemask dimensions
○ I chose 22cm x 15cm
○ Rotate the rectangle to make sure it fits
• Import the pattern file we made in the previous lesson
• Rotate the design and make it clipping mask of the rectangle we made.
• You can add a stroke on the rectangle layer to give it a print boundary

Lesson 9: Printing our Sublimation Art
• With a printer with sublimation ink, I print on sublimation paper
• I print with the highest quality printing available
○ Since the ink is pretty cheap, I want to use the most ink I can for each print because it will make the sublimated facemask look really nice

Lesson 10: Sublimating Face Mask
• Time to sublimate the face mask!
• You will need the design printed on Sublimation paper
• Heat tape to fasten the mask to the paper
• Turn on Heat press
• A heat mat
• Turn on the heat press and set it to 400 degrees
• Place teflon sheet on heat pad
• Place the facemask on the center of the sublimation print
• Fasten the facemask with the thermal tape so the art doesn’t move during sublimation
• Place the sublimation paper facing up, place a teflon sheet on top of the paper
• Heat press the mask for 60 seconds with moderate pressure
• Let cool for 60 seconds
• Remove the paper and tape from the mask to admire the artwork

Section 4: Building the App Experience
• With the sublimation and designing done, time to build the AR experience!

Lesson 11: Setup Unity
• Open the Unity HUB
• Create a new project > name it > Create!
• With Unity open, change build settings
○ File > Build Setting > Switch Platform > Android
• Download Vuforia SDK
○ Download Package from developera.vuforia.com
• Import Package into Unity
○ Assets > Import Package > Custom Package

Lesson 12: Setup AR Scene
• Create a new scene
○ Right Click in the hierarchy
• Add AR Camera
• Delete Main Camera
• Add License to Vuforia Configuration in the AR Camera Component in Inspector
• Set Vuforia Configuration to Optimize quality
• Add image target in the AR Scene

Lesson 13: Prepare our image target from the design
• Rotate the image 90 degrees
• Flip the image horizontal
• Make the design a smart object
• Within the Smart Object, crop the bounding box
• Make a rectangle with the same dimensions as the mask
• Try to make the shape the same shape as the mask
○ Add a mask to the rectangle
○ Try to recreate it as close as possible
○ On the mask layer, erase as much as you can to fit the mask shape
• Set the clipping mask to the new shape layer rather than the old one
• Save and export the image as a transparent png

Lesson 14: Setup our AR Image Tracking in Unity
• Add the image file to Unity by dragging and dropping
○ Create a new folder to place it to
• In the Image Inspector, change image to sprite 2D
○ Click Apply to save it
• In the AR Scene Hierarchy, select the Image Target
○ Change the image setting to from Image
○ Choose the design you imported in
○ Double check the Scale in cm
• Place a Cube on the image target
○ Create > 3D Object > Cube
○ Move the center of the object up so the object’s bottom is on top of the image plane

Lesson 15: Add rotation animation to the AR Experience
• Create an empty game object as an animation Anchor
○ Name it RotationAnchor
○ Create 3D shapes and place them around the cube
○ Hide the Cube
• Create a new Script for rotation
○ Name it – RotationScript
○ Place the script on the RotationAnchor GameObject
• Open visual studio by double clicking script
○ In the update Method, Type: transform.Rotate();
○ Within the Function, Type: new Vector3(0,30,0) * Time.deltaTime
○ Save the script and test it

Lesson 16: Add more animated elements
• Add more 3D Objects: cubes, capsules, cylinders, etc
• Change the sizes and spread out the designs
• Make another rotation script give it another name
○ Copy code to the news rotation script
○ Change the values in the script to (15, 25, 35)
○ Place it on all the new shapes
• Change the colors of all the shapes
○ Create new materials
○ Change the colors
○ Place them on the shapes

Section 5: Improve Tracking for AR
• As you can see, the experience happens, but can be spotty at times
• Patterns are great, but we often need a main element to anchor our tracking
• We will tweak the design so we can have better tracking.
• This will align more with the center of the face

Lesson 17: Improve tracking on the AR Cloth Facemask
• In the design pattern, we will add a character to the center of the facemask pattern
○ Rotate it and scale it as needed
○ Give it a stroke from the blending options menu
§ With the stroke colors, vary them for more contrast

Lesson 18: Remaking the AR Cloth Facemask with Modified Design
Make a super cut of the various clips to music: 30 sec – 1 minute clip

Lesson 19: Prep the new image for improved AR Tracking
• Make sure to mirror the image to have the best recognition
○ Image > Image Rotation > Flip Canvas Horizontal
• Needs to be mirrored to track correctly
• Import the mask image in unity
• Replace the old image target image with the new one
• Test it

Lesson 20: Build out the test app
• With our app prototype tested and functioning on our computer, it is now time to test it out
• Open the build settings in Unity
○ File > Build Settings
○ Select Add Open Scene
○ Select Build > Name it > Save
○ Connect your phone to your computer
○ Copy the .apk to the device
○ Open on the device and install it
○ Run the app and test the AR face mask

Section 6: Customizing the AR experience further
• This course is not about learning to 3D model, but if you have 3D models that you made, you can add them to your experience to make it even more unique

Lesson 21: add custom 3D models to the AR experience
• Take the 3D model you have as either an fbx or obj
• Make a folder in your assets
○ Create > Folder > Name it
○ Feel free to create folders for you scripts and materials
○ Move the 3D model to the right folder
• Select the 3D model
○ In the inspector, select materials tab
○ Extract materials to the 3D folder
○ Add the map to the folder
○ Add the map to the material’s albedo section

Lesson 22: Replace 3D shape models with custom models
• Select each one of the models
• Add nimbus to each gameobject
○ The 3D model should be a child of the 3D shape
• Increase the size accordingly and give them a random rotation
• Remove the mesh renderer component on all the 3D shape objects
○ Turning them off does not completely hide them in our AR scene

Lesson 23: Duplicate the Models and give them depth
• Duplicate the RotationAnchor GameObject
○ Rotate it and make it smaller
○ Raise it up to give it a new plane
○ Repeat that for another one
○ Test it out once you finish the duplicate models

Lesson 24: Make each rotation layer unique
• In our rotation script set a public class
○ Type: public float rotationAmount;
○ Replace 30 with rotationAmount in the y-value of the rotation in the update method
○ Save it
• In the inspector, Select the RotationAnchor GameObject
○ The Rotation Script will have an input field to change the values
○ Add different values to each of the RotationAnchor Gameobjects to have them rotate at different speeds
• Test it out!

Lesson 25: Improve on the rotation scripts
• In our other rotation script set a public class
○ Type: public float xRotation;
○ Type: public float yRotation;
○ Type: public float zRotation;
○ Replace 15 with xRotation in the x-value of the rotation in the update method
○ Replace 25 with yRotation in the x-value of the rotation in the update method
○ Replace 35 with zRotation in the x-value of the rotation in the update method
○ Save it
• In the inspector, Select the individual 3D model GameObjects
○ The Rotation Script will have an input field to change the values
○ Add different values to each of the Gameobjects to have them rotate at different speeds
• If there are any patterns or consistency you want, you can do it based on shape or size.
• Test it out!

Lesson 26: Add more animation to the AR Experience
• Create a new folder > name it
• Create new Empty Game Object > AnimationController
○ Add the RotationAnchor GameObject to the AnimationController
• Add Timeline
○ Windows > Sequencing > Timeline
○ Lock it in the top right corner
• With AnimationController GameObject Selected, Select Create in the Timeline window
○ Name the timeline
○ Save it to the animation folder.
• Add activation tracks in the timeline for each Rotation anchor
• Add an animation track for each of the rotationanchor game objects
• Select the red record button on the rotationanchor animation layer in the timeline to begin animating
• Go to different areas of the timeline to place a keyframe and modify the transform values to add the keyframe for animation
○ You can change the Scale and Position of each one
• Find unique ways to animate each of the layers in so that they really pop!
○ If you understand basic animation principles, then you can really explore those techniques here
• Turn off play on awake
• In the image target, On Target Found()
○ Click + > Insert Animation Controller GameObject in Field
○ In function dropdown menu, PlayableDirector > Play()
• In the image target, On Target Lost()
○ Click + > Insert Animation Controller GameObject in Field
○ In function dropdown menu, PlayableDirector > Stop()
• Test it out and tweak as needed!

Challenge 3: Add more 3D models and animation to the AR experience
• Build on the stuff we did to push your creativity
• Build out your app and share your experiences

Wrap-up:

We finally made it! Throughout the journey, were able to make a one of a kind augmented reality facemask.

In this course you learned how to:
• Design a character with simple shapes
• Design a pattern based of your character
• Make the pattern repeatable
• Sublimate a cloth facemask
• Build an augmented reality experience for our facemask with Unity and Vuforia
• Code a rotation animation with C#
• Improve the tracking of our experience by tweaking the design
• Add 3D models to the experience
• Add custom animation to each of the 3D models using the timeline
• And build an augmented reality app for an android phone

The skills you learned are the very same skills I use in my work as a full stack augmented reality mobile developer. That means you can create every aspect of the augmented reality experience by yourself. I think as a creator, being able to build experiences out makes the creative process really dynamic and unique because you can create things that often you would only think to do navigating many of the required skill sets.

I hope this course helped you explore many new ideas! Be sure to check out my other creative courses where I explore animation, illustration, augmented reality, comics, and more. If you haven’t already, follow me on social media @stuckonaneyelnd to follow all the other projects I am working on.

How do you create augmented reality fashion?

Augmented reality fashion is the use of augmented reality technology to enhance or augment clothing, accessories, and other fashion items. This can be done in a variety of ways, such as by adding digital elements, animations, or interactive features to physical fashion items or by creating virtual fashion items that can be viewed and interacted with through an augmented reality app or device.

To create augmented reality fashion, designers typically use specialized software and tools to create and design the digital elements that will be used to augment the fashion items. This may involve using 3D modeling software to create 3D models of the fashion items, using animation software to create motion and interactivity, and using augmented reality development platforms to create the augmented reality experience.

In addition to the technical skills needed to create augmented reality fashion, designers also need to have a strong understanding of fashion design principles, as well as an ability to think creatively and come up with innovative ideas for how to use augmented reality to enhance the fashion experience. Overall, creating augmented reality fashion requires a combination of technical skills, artistic skills, and an understanding of fashion design.

In conclusion, this course teaches you how to take your art to the next level with the power of 2D animation and augmented reality. By the end of the course, you will have a dynamic and immersive sticker that you can share with the world. With the guidance of an experienced instructor and a focus on intermediate learners, you will learn a range of skills that will give you a solid foundation in using technology to enhance your art. Whether you are a beginner or an experienced artist, this course has something for everyone. So why wait? Join us and let’s explore the world of animated and augmented stickers together!

Augmented Facemask Quiz

This quiz will test your understanding of the concepts and techniques covered in the course, led by Steven Christian. In this course, you learned about designing and crafting a cloth face mask, building an augmented reality experience with Unity and Vuforia, coding rotation animation with C#, improving tracking, adding 3D models and custom animation, and building an AR app for Android. To complete the course, you needed access to various tools and software, including photo editing software, sublimation paper and printer, Unity 3D, and 3D modeling software. Let’s see how much you remember about the course with this quiz!