You’ll need an updated version of Spark AR (an augmented reality studio created by Facebook), a question picture that asks a variation of “Which ____ are you?”, and a list of pictures for the result.
My version of the project is on Github here. Borrow from it however you want
Part One: Setup in Spark AR
Adding Textures
After opening a blank project in Spark AR, the first thing we’ll need to do is add our pictures. You will need one picture with your “Which ____ are you?” question, and then however many results you want to include.
On the bottom left, you’ll see a section called Assets. In that section, select Import: From Computer and then choose your image files.
These pictures will be added to your project in a folder called Textures. In Spark AR, you can think of textures like a top-coat of paint. Later on, we will use them to cover an AR material in the Spark AR studio.
Adding a Face Tracker
Above Assets is another menu called Scene. At the bottom right of this menu, select Add Objects, and choose Face Tracker from the popup menu. Our project can now follow the movements of the user’s face.
However, Face Tracker isn’t a ‘physical’ object so we need to right-click faceTracker0 from our Scene hierarchy, select Add, and then choose Add Plane. This will add a checkerboard patterned square in front of the person in the simulator and a plane0 underneath Face Tracker in our Scene hierarchy.
You don’t need to change the name of the plane, but select it and look at the menu on the far right. You will see an option to add a Material, which when selected will add a blank material0 to our Assets hierarchy.
First, rename material0 to display. We will reference this later in our script, so it’s important that the names match. Then, under Shader Type select Flat, and under Texture select the “Which _____ are you?” image file you added before.
You will now see your image displayed in front of the face in the simulator. You can now go back to **plane0 **and play around with the position and scale until it looks right.
#javascript #programming #spark-ar #javascript-tutorial
