Unity Asset Store — Top Unity Asset

AR Masks (AR Face Filters)

AR Masks (AR Face Filters) — Unity Asset, Photo/Video App Template for Mobile Platforms with Augmented Reality, Face Recognition (AR Face Tracking) & Mask Creating with Photo & Video Textures, which can be loaded natively from Phone Gallery to Your Face.

Let’s make some Instagram & AR Faces!

Unity Asset Store | Download Button

Features of AR Masks

Bring the enchanting Power of Augmented Reality into your amazing Game or App:

  • Enjoy HQ AR Face Tracking with AR Foundation (ARKit, ARCore) (iOS only for now because of Video Recording).
  • Express Yourself with 1 AR Mask (Custom Texture) & Unlimited Variations of Appearance.
  • Load Textures from Phone Gallery to Your Face with Native Gallery:
    • Photos;
    • Videos.
  • Control 6 Material (Texture) Parameters with 1 Unified Slider in Runtime:
    • Offset X & Y;
    • Tiling X & Y;
    • Transparency (Alpha Channel of Color);
    • Rotation.
  • Use Screen Tap Experience:
    • Change Texture Wrap Mode (Repeat & Clamp). So the user can create interesting Art Mask in 1-click, especially for Videos with plenty of Colors on Edges.
  • Feel familiar UX with Instagram-style UI (Masks).
  • Take Photos (Native Gallery).
  • Record Videos (Apple ReplayKit (iOS only)).
  • Check AR Support before App Start & Assign Callback for every case.
  • Mobile Optimizations: TextMesh PRO.

Project is positioned as Instagram App Template (Clone) in section of Stories (AR Face Tracking).

Instagram-style UI (Masks)

App implements Instagram-style UI (Masks) to provide users familiar & seamless UX right after App Launch.

AR Masks (AR Face Filters) UI — Unity Asset — AR Foundation (ARKit, ARCore) — iOS, Android

Mask Parameters

Mask Parameters are Dynamically Generated Toggles that can control State of AR Mask.

Next Parameter Settings can be easily customized in script of Target Mask:

  • Order,
  • Name (Status Text),
  • Icon (it’s Loaded from Resources Folder),
  • Values (Initial, Min, Max)
  • Target Callback.

UI Options:

  • Parameter Reset When Second Click on Toggle for Activated Parameter.
  • Scrolling of Parameters:
    • Parameter will be Activated & its X Position will be Animated To Screen Center When:
      • Mask Initialization (1st Parameter);
      • Uploading new Texture into Mask: (1st Parameter);
      • Clicking on Target Parameter.
    • Auto Activating Parameters (without Snapping) while Scrolling when any Parameter is in the Screen Center.
    • Expanded Clickable Area of Parameters for Comfortable Scrolling & Clicking on Small Elements.

Parameter Slider

Parameter Slider can control every parameter of AR Mask when switching to target parameter.

Slider has Expanded Clickable Area for Comfortable Clicking & Sliding.

Text Value

Display Value is Normalized (it can be from 0 to 1). System saves raw values (denormalized).

Screen Tap

Screen Tap Experience can control additional parameter.

Status Text & Mask Name

Same Script controls the next elements:

  • Status Text to Show Parameter Names & System Messages.
  • Mask Name to show the name of Target Mask.

Camera Modes & Record Button

Unified Action Button is intended for Every Camera Mode:

  • Photo: Take Photo,
  • Video: Start Video Recording.

Output Resolution of Content is equal to Screen Size.

Photo

Photos are saved to Photos (iOS) or Gallery (Android) with Native Gallery.

Video

iOS

Video Recording with Voice using microphone is implemented with Apple ReplayKit to record, save & share videos.

Permission Request (“Allow Screen Recording”) is called once per App Session: you can’t change it, it’s by design of Apple ReplayKit & iOS.

AR Masks — Unity Asset — Video Recording — Apple ReplayKit — Permission Request — Allow Screen Recording

Android

Video Recording on Android is not provided for now.

3rd Party Recommendations: Cross-Platform (iOS & Android)

AR Masks is not related with next optional assets and it doesn’t include them and support is provided only by their publishers. The next assets are recommendations as additional stuff to implement Video Recording:

AR Masks (AR Face Filters)

Custom Texture (Photo, Video)

AR Mask Custom Texture allows you to get Unlimited Variations of Appearance by Loading Textures from Phone Gallery to Your Face with Native Gallery.

Supported Content to Load into Face:

  • Photos;
  • Videos.

Mask uses Custom Shader “Texture Rotator” allowing Auto Correcting Rotation of Uploaded Videos.

Examples:

AR Foundation Support Checker

App checks AR Support before App Start. User will see appropriate Status Text if AR can’t be started.

There is an option to avoid checking in Unity Editor.

There are Public Unity Events (String — Status), so you can Assign Callback in Inspector for every case:

  • OnARReady;
  • OnARUnsupported(String);
  • OnARSoftwareUpdateFailed(String) — Only Relevant for Android.

Tutorial

Information will be added in accordance with user questions.

Getting Started with AR Masks (AR Face Filters)

Folders & Files in package by default:

  • Makaka Games;
  • XR.

Steps

If you have any issues with the first launch then just Reach Support with Invoice Number and Get Help.

If you read this tutorial from PDF, first check the latest docs online to get actual information.

  1. Create New Unity Project with Unity 2019.3.0b10.
  2. File > Build Settings > iOS > Switch Platform.
  3. Download and import Native Gallery 1.3.7 (docs) into Unity:
    1. Setup it with its own docs (there are some easy steps: no coding required).
  4. Download and import AR Masks (AR Face Filters) into Unity.
    1. Warning Window: Click “Install/Upgrade” for Package Manager Dependencies.
  5. Next Packages are provided with Unity Package Manager, and they are already installed for this Asset by default. If packages are missing (Warning Window was not appeared) then install them again with Unity Package Manager:
    1. TextMesh Pro 2.0.1:
      1. Always Required: Window > TextMeshPro > Import TMP Essential Resources;
    2. AR Foundation 3.0.1;
    3. ARCore XR Plugin 3.0.1;
    4. ARKit XR Plugin 3.0.1;
    5. ARKit Face Tracking 3.0.1;
    6. XR Legacy Input Helpers 2.0.6;
    7. XR Management 3.0.5.
  6. Restart Unity Editor.
  7. Open Scene: Makaka Games > AR > AR Masks > Scenes > Demo.
  8. Build for Mobile.

AR Foundation (ARKit, ARCore)

Open AR Foundation Docs.

“$” Game Object

It’s Game Controller. Here you can find main control scripts.

Testing

Editor

Basic Editor Testing is provided for AR Mask “Custom Texture”.

Unity Asset — AR Masks — Editor Testing — AR Face Filters

Next Options are executed only on Real Device:

  • Face Recognition,
  • User Photo/Video Loading,
  • Auto Video Rotation,
  • Texture Wrap Mode Changing.

Apps:

Mobile Devices

Real Testing is only on Real Device.

Tested with Smartphones:

  • iOS on iPhone XS Max.
  • Android version was not tested for now: Video Recording & Refund are not provided.

AR Face Material

Demo Scene has ARFaceMeshARKit — Editor Testing. It’s a convenient way to try on textures on Face Mesh only in Unity Editor. This Game Object will be turned off in Runtime.

To change Default Face Texture edit ARFaceMeshCustomTextureMaterial.

Limitations

Check Supported Devices:

Support

First of all, read the latest docs online.
If it didn’t help, get the support.

Changelog

Check the current version on Asset Store.
The latest versions will be added as soon as possible.

1.10: In development.

1.9:

  • Custom Shader “Texture Rotator” for AR Mask “Custom Texture”:
    • 6th Mask Parameter: Rotation;
    • Auto Correcting Rotation of Uploaded Videos (now supports both: horizontal & vertical videos).
  • Editor Testing for AR Mask “Custom Texture”. Real Testing is only on Real Device: some options are only executed on Real Device (e.g. Face Recognition, User Photo/Video Loading, Auto Video Rotation, Texture Wrap Mode Changing).
  • Dynamic Generating Parameter Toggles (easy configuring in script of mask).
  • Parameter Reset When Second Click on Toggle for Activated Parameter.
  • Scrolling of Parameters:
    • Parameter will be Activated & its X Position will be Animated To Screen Center When:
      • Mask Initialization (1st Parameter);
      • Uploading new Texture into Mask: (1st Parameter);
      • Clicking on Target Parameter.
    • Auto Activating Parameters (without Snapping) while Scrolling when any Parameter is in the Screen Center.
    • Expanded Clickable Area of Parameters for Comfortable Scrolling & Clicking on Small Elements.

1.8:

  • Screen Tap Experience (like on Instagram) with Status Showing:
    • Texture Wrap Mode Changing is here now for both Texture Types: Photos & Videos. So the user can create interesting Art Mask in 1 click, especially for Videos with plenty of Colors on Edges.
  • Parameter Reset when new Photo/Video was uploaded.
  • AR Foundation Support Checker — Public Unity Events (String — Status):
    • OnARReady;
    • OnARUnsupported(String);
    • OnARSoftwareUpdateFailed(String) — Only Relevant for Android.
  • Huge Refactoring with More Independent Classes.
  • Native Gallery 1.3.7.
  • Package Manager:
    • AR Foundation 3.0.1: ARCore, ARKit & ARKit Face Tracking;
    • Unused Packages were removed, so the import process of the project will be faster.
  • Fixes:
    • UI to Match Different Screen Resolutions.
    • UI Showing if “Don’t Allow” was clicked on the Permission Window of Apple ReplayKit.
    • AR Mask Parameter: “Alpha” to “Transparency” (Icon & Name). It’s more understandable to the end-user.

1.7:

  • Testing: Convenient way to try on textures on Face Mesh (ARKit) in Unity Editor.

1.6:

  • Status Text: Unified Text Field to Show Parameter Names & System Messages.

1.5:

  • AR Foundation Support Checker.

1.4:

1.3:

  • Unified Slider to Control 5 Material Parameters:
    • Tiling X & Y;
    • Offset X & Y;
    • Alpha Channel of Color.

1.2:

1.1:

  • Camera Mode: Photo.

1.0:

  • AR Mask: Custom Texture (Photo & Video Loading to AR Face).

Support for Unity Assets

I am Andrew Sirota, Founder at Makaka Games and full-time Publisher on Unity Asset Store. First of all, read the latest docs online. If it didn’t help, get the support.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close

Spelling error report

The following text will be sent to our editors: