Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Create an interactive, animated 3D face filter with Spark AR
Rating: 4.4 out of 5(45 ratings)
5,994 students

Create an interactive, animated 3D face filter with Spark AR

Learn to build, test and share a complex Instagram and Facebook face filter using Spark AR studio!
Created bySam Piggott
Last updated 12/2020
English
English [Auto],

What you'll learn

  • Add 2D and 3D elements to your face (like hats!)
  • Learn what patches are, and how you can use them to add animation and interactivity to your filters
  • Test your face filter on your computer as well as on your own mobile device
  • Upload the filter to Instagram and Facebook for anyone to download and use!

Course content

1 section • 10 lectures • 1h 25m total length

  • Getting Started - Installing Spark AR8:58

    Install Spark AR Studio, sign in with Facebook, and start a blank project to build a Harry Potter sorting hat filter; learn viewport navigation, assets, hierarchy, and inspector.

  • Adding our first 3D object11:25

    Import a 3D hat from the Spark AR library, connect Sketchfab assets, and attach it to a face tracker. Then fine-tune position with the inspector for realistic head placement.

  • Adding a Face Mesh5:20

    Add a face mesh to map the user's facial features to a hat filter using face tracker, texture extraction, and flat shading.

  • Testing & Sharing4:16

    Test the Spark AR filter on a real device using the Spark Player, preview it on your phone, and share a test link to friends on Instagram or Facebook.

  • Introduction to the Patch Editor6:25

    Explore the patch editor to build interactive three-dimensional face filter effects by using screen tap patches and a switch to toggle a hat's visibility.

  • Adding Interactions & Basic Animations11:15

    Extend a Spark AR patch to animate a hat on screen taps, using the pulse to track state and an animation patch with a vector free transition on hat position.

  • Adding 2D Elements8:36

    Learn to add 2D elements in Spark AR by building a bottom-aligned canvas with a full-width rectangle and text naming the house. Use pinning and alignment for cross-device consistency.

  • Advanced Patches8:50

    Use a dice-roll style in Spark AR, chaining random, floor, and option patches to output Gryffindor, Ravenclaw, or Severan, and display the result on a 2d text canvas.

  • Final Touches15:12

    Apply final touches to an interactive, animated 3D face filter in Spark AR, ensuring text updates with the hat on, delays synchronize with animation, and canvases stay properly positioned.

  • Uploading to Instagram & Facebook5:00

    Submit your Spark AR filter to Instagram and Facebook via Spark AR Hub, publish a new effect, and prepare for the review process with asset uploads and revision notes.

Requirements

  • No previous requirements required!

Description

Ever wanted to create your very own custom face filters for Instagram or Facebook?

This video guide will walk you through every step to create your very own interactive, animated 3D face filter, that when finished, you can upload and share with your friends and family!

Throughout this short, 90 minute course, you'll learn everything you need to create your very own custom face filters, including:

  • Get familiar with Spark AR Studio, the tool we'll be using to create our face filters

  • Add 3D and 2D elements that are anchored to your face

  • Learn to add events and triggers to your filters (like buttons and touch events!)

  • Bring life to your filter by adding simple animations in response to a user's interaction

  • Submit it for distribution on Instagram and Facebook for anybody to use!

Who this course is for:

  • Anybody who wants to learn to make 3D face filters from scratch

Report abuse