SuperHi FM

Search:

Catalog Cart About Sign in

BEGINNERCOURSE

Instagram Filters + Spark AR

Everything you need to create your own augmented reality filters for Instagram and Facebook Camera using Spark AR.

Rik Lomas

Taught by

Rik Lomas

New Romantic

New Romantic

Lesson 01

Welcome to New Romantic

Lesson 02

Adding a face mesh and material

Lesson 03

Making a texture in Figma and adding to our project

Happy vs Chill

Happy vs Chill

Lesson 01

Welcome to Happy vs Chill

Lesson 02

Adding 2d text to a face tracker

Lesson 03

Opening the Patch Editor

Popout

Popout

Lesson 01

Welcome to Popout

Lesson 02

Preparing our textures

Lesson 03

Adding textures to meshes

Metal Mask

Metal Mask

Lesson 01

Welcome to Metal Mask

Lesson 02

Adding metallic material

Lesson 03

Adding a 3d mask

Cone Head

Cone Head

Lesson 01

Welcome to Cone Head

Lesson 02

Adding a cat model from Google Poly

Lesson 03

Adding a cone to our foreheads

Eggs Is Eggs

Eggs Is Eggs

Lesson 01

Welcome to Eggs Is Eggs

Lesson 02

Cutting out our users from the camera

Lesson 03

Adding animation sequences from textures

Which Coding Language Are You?

Which Coding Language Are You?

Lesson 01

Welcome to Which Coding Language Are You?

Lesson 02

Adding the question and answer planes

Lesson 03

Adding a screen tap to toggle panels

Bingo

Bingo

Lesson 01

Welcome to Bingo

Lesson 02

Plane tracking with 3d models

Lesson 03

Emitters and particle systems

Duotone

Duotone

Lesson 01

Welcome to Duotone

Lesson 02

Replicating our camera texture

Lesson 03

Altering hue, saturation and lightness

Gradient Sampler

Gradient Sampler

Lesson 01

Welcome to Gradient Sampler

Lesson 02

Making a gradient texture in Figma

Lesson 03

Making the camera texture grayscale

Warhol

Warhol

Lesson 01

Welcome to Warhol

Lesson 02

Project setup

Lesson 03

Adding a texture sampler to repeat

Super LUT

Super LUT

Lesson 01

Welcome to Super LUT

Lesson 02

Color grading: the easy way

Lesson 03

Creating our own patch asset

Color Splitter

Color Splitter

Lesson 01

Welcome to Color Splitter

Lesson 02

Picking colors by red, green and blue channels

Lesson 03

Adding inputs to our patch asset

Get access to Instagram Filters + Spark AR

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Rik Lomas

Founder + CEO

Course structure

Chapter 01

New Romantic

Lesson 01
Welcome to New Romantic
Lesson 02
Adding a face mesh and material
Lesson 03
Making a texture in Figma and adding to our project
Lesson 04
Using the Face Reference assets
Lesson 05
Retouching skin
Lesson 06
Adding a plane to the face tracker
Lesson 07
Adding our real assets
Lesson 08
Using a cutout mask and material
Lesson 09
Testing and publishing our filter

Chapter 02

Happy vs Chill

Lesson 01
Welcome to Happy vs Chill
Lesson 02
Adding 2d text to a face tracker
Lesson 03
Opening the Patch Editor
Lesson 04
Putting text on the forehead the proper way
Lesson 05
Adding logic blocks to change output
Lesson 06
Adding a happy or surprised face
Lesson 07
Testing and adding a delay

Chapter 03

Popout

Lesson 01
Welcome to Popout
Lesson 02
Preparing our textures
Lesson 03
Adding textures to meshes
Lesson 04
Adding animation and transition patches
Lesson 05
Branching our animations

Chapter 04

Metal Mask

Lesson 01
Welcome to Metal Mask
Lesson 02
Adding metallic material
Lesson 03
Adding a 3d mask
Lesson 04
Using the patch editor to rotate lighting

Chapter 05

Cone Head

Lesson 01
Welcome to Cone Head
Lesson 02
Adding a cat model from Google Poly
Lesson 03
Adding a cone to our foreheads
Lesson 04
Adding a sheen effect to our filter
Lesson 05
Introducing the head occluder
Lesson 06
The face distortion block
Lesson 07
Pitch-shifting the audio

Chapter 06

Eggs Is Eggs

Lesson 01
Welcome to Eggs Is Eggs
Lesson 02
Cutting out our users from the camera
Lesson 03
Adding animation sequences from textures
Lesson 04
Adding a start instruction
Lesson 05
Adding a screen tap and option picker
Lesson 06
Adding text to debug

Chapter 07

Which Coding Language Are You?

Lesson 01
Welcome to Which Coding Language Are You?
Lesson 02
Adding the question and answer planes
Lesson 03
Adding a screen tap to toggle panels
Lesson 04
Adding a switch that turns off after a delay
Lesson 05
Adding interaction on camera record

Chapter 08

Bingo

Lesson 01
Welcome to Bingo
Lesson 02
Plane tracking with 3d models
Lesson 03
Emitters and particle systems
Lesson 04
Fixed target tracking with emitters

Chapter 09

Duotone

Lesson 01
Welcome to Duotone
Lesson 02
Replicating our camera texture
Lesson 03
Altering hue, saturation and lightness
Lesson 04
Using lightness to control the color mix
Lesson 05
Adding a screen tap and option picker
Lesson 06
Adding the picker UI

Chapter 10

Gradient Sampler

Lesson 01
Welcome to Gradient Sampler
Lesson 02
Making a gradient texture in Figma
Lesson 03
Making the camera texture grayscale
Lesson 04
Sampling the camera texture and gradient texture
Lesson 05
Multiplying the gradient sample
Lesson 06
Adding the slider UI
Lesson 07
Adding an option picker on screen tap

Chapter 11

Warhol

Lesson 01
Welcome to Warhol
Lesson 02
Project setup
Lesson 03
Adding a texture sampler to repeat
Lesson 04
Increasing our sample on tap
Lesson 05
Making our frame with a Patch Asset

Chapter 12

Super LUT

Lesson 01
Welcome to Super LUT
Lesson 02
Color grading: the easy way
Lesson 03
Creating our own patch asset
Lesson 04
Adding a property to our patch asset, plus senders + receivers
Lesson 05
Mapping RGB to a point on our LUT texture
Lesson 06
Making our own look up table textures
Lesson 07
Adding a screen tap and option picker

Chapter 13

Color Splitter

Lesson 01
Welcome to Color Splitter
Lesson 02
Picking colors by red, green and blue channels
Lesson 03
Adding inputs to our patch asset
Lesson 04
Blending color channels together
Lesson 05
Adding movement to each channel
Lesson 06
Adding a slider UI
Lesson 07
Reusing the patch assets

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

SuperHi has collaborated with some of the world's best creatives to produce 13 different filters which we'll show you not only exactly how they were made but how to add many different variations to them.

In this course, you'll learn everything you need to create your own augmented reality filters for Instagram and Facebook Camera using Spark AR from scratch.

From working with textures and materials, to adding your own interactions to trackers within the Patch Editor, to testing and launch, we'll give you everything you need to create your own filters.

What you’ll learn

How to work with Spark AR to make filters for Instagram and Facebook Camera.
Working with textures, materials and animation sequences to create your own augmented reality experiences.
Using the Patch Editor to add interactive elements and triggers to face and plane trackers.
Working within a 3D environment and how to add 3D-rendered models to your project.
How to extract and draw textures to create your own samplers and color shaders.
How to test, submit and launch your own filters to Instagram and Facebook

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. You’ll also want to set up a Notion and Figma account (they're free and we'll walk you through setup in the course). That’s it!

Target Audience

This course is aimed at creative people who are interested in learning how to make augmented reality filters for Instagram or Facebook Camera.

While there are a few concepts that may be familiar to designers or coders during this course, this is a beginner course so you don't need any previous experience of AR (augmented reality), 3D, design or coding to join this. All you need is a creative mind!

In the first project, we explore Spark AR and Figma, the two programs we'll be using together to make filter effects!

We discover the Patch Editor for the first time to make our 2d text change from Happy to Chill whenever we smile!

In Popout, we layer up several masks with alpha textures and an extracted face texture, then hook them all up to the Patch Editor to pop out when we're surprised!

In this lesson, we talk about metal materials and how we make them reflective. We also add a loop animation so we can spin our lighting to show off our 3d metal mask.

Ever wanted to look like a cutie with a cone on their head? Now's your chance. In Cone Head, we add an ice cream cone to our heads, add facial distortion and pitch-shift our input audio.

In our effects, we may want to cut out our users from the camera, and add them to an eggy background. In this project, we'll talk about camera segmentation, animation sequence and how to change backgrounds on tap.

The SuperHi spin on a popular filter... find out exactly how the What X Are You filters are actually made using a combination of pulses and switches!

We don't always want to look at our face. We may want to look into the real world. In this project, we'll talk about the alternative trackers, plane and fixed target, and add particle systems to them both!

How do we play with color when it comes to our camera? In this lesson, we'll take our camera texture, take every pixel and change its color to something brand new!

A common technique in filter effects is to use a reference texture when it comes to changing our color schemes. In this project, we'll add a gradient texture so as to sample colors based on their real-world lightness.

Time for soup! Just like Andy, we dig repetition so in the Warhol filter we repeat ourselves over and over and over again by taking our camera texture and multiplying it!

Who needs VSCO? Look Up Tables are the perfect way to add our own color grading and tones to our filters. In this project, we'll talk about how to use a 3D look up table (or LUT) to map our camera pixels to a reference texture.

In the final project, we will take everything we've learned to make our own reusable patch assets to split out the red, green and blue color channels to remix them into a new color effect.

Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.