Creating AR with Snapchat and Lens Studio | Jake Anstey | Skillshare

Creating AR with Snapchat and Lens Studio

Jake Anstey, Software Engineer

Creating AR with Snapchat and Lens Studio

Jake Anstey, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (20m)
    • 1. Setting up Lens Studio

      3:32
    • 2. Playing With Components

      2:02
    • 3. The Hierarchy

      2:33
    • 4. 3D Space

      5:48
    • 5. Importing and Using 3D Objects

      3:36
    • 6. Publishing Your Lens

      2:18
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

125

Students

--

Projects

About This Class

Have you ever played with augmented reality, whether through the mainstream app called Snapchat, or through something as cool as Google Glasses? Have you ever wanted to know what it takes to create your very own augmented reality content to spread to the masses?

Creating AR (augmented reality) is super simple, a child can do it, and the audience for the content is growing rapidly. Snapchat offers its free program called Lens Studio as the gateway between consumer and creator.

This course requires absolutely no previous knowledge of AR, coding, or 3D modeling to become a pro at AR, and this course will show you how from the very beginning to publishing your very first lens.

Meet Your Teacher

Teacher Profile Image

Jake Anstey

Software Engineer

Teacher

Computer programmer, augmented reality developer and enthusiast and community contributor.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Setting up Lens Studio: welcome to learning any are with Snapchat and lends studio. In this course, I'm going to go through Snapchats own idee integrated development environment for augmented reality called Lens Studio. First, you're gonna want it down with this program. It's located at lens studio dot Snapchat dot com. As seen in my browser. It will bring you to their dashboard page, where you'll see a big yellow button that says, Download Downloading Lens studio after you agreed to their privacy policy and you're not a robot will eventually lead you to their program opening their program. You're going to see a lot of different examples pre built for you that are provided by Snapchat themselves and have a lot of different objects inside that you can play with to create your own augmented reality. The first thing you're gonna want to do is log in to your Snapchat account. You're gonna want to hit. Continue on this page to allow Snapchat to access leading studio. Now you'll be signed into Snapchats Lens Studio with your Snapchat account, which will give you access to pairing your device and publishing your lenses. Lenses are what they call each product of augmented reality so every project you create is called a lens. Let's click into one of these examples and check out what's inside. Now. Each project is set up with resources and objects that exist within the lens. You'll also get your project info where you're able to add a preview. An icon tags for it, the name of it. Now, over here, we can play with a few settings where it says Do not add it or edit me. If we click on this script here, which is already highlighted, you'll see on the right side you have a few options you can play with. So the base color we can change to something like red, and you'll see it immediately affected Snapshots, demos, air Very intuitive with their variables that you can play with to understand how things work. Now, if you want to know what's going on behind this script, you go over here to hair coloring scripts and then we'll click the hair color controller. It'll will look like gibberish at first because you may not understand JavaScript or how their program works. But just understand that this script here is powering the hair color, and we will get into this further. Now we're gonna pair our device to our Snapchat so that we can actually play with it on our own device. It will provide you with a Snapchat QR code that you'll open up your Snapchat app, turn your camera to a computer screen and then tap and hold on your screen, where it will automatically scan this QR code and you'll see a button that says, Pair. It should detect that your phone is being pared. But if it hasn't just try again. Perfect. Now that my devices paired that actually took me quite some time, I had to close the project reopen. I went to the pairing and then I clicked. Disconnect, and then I just tried twice more times. It can be a bit finicky, but ultimately, when it is paired, you will not have issues with it. So now that we're paired, you can click. Push your land steer device. You'll get a push notification on your device that says your lenses ready to preview. And if you just go on your camera through Snapchat, tap the screen and scroll over to the icon that matches the one in your project. You'll be able to play with your blends right away. 2. Playing With Components: lends studio is packed full of components that you can use towards your augmented reality projects. To explore these, we're going to create a new project inside your project. You can see these add new buttons, and there's two different ones here. This one is typically for a resource that you would like to add, whether it be a script or a mesh or a material, and these ones are four components. To check out these components, all you have to do is click on one. For example, I'll show you pixel ization. It will automatically added to the project and applied this effect. As you can see, your end result is pixel ized. We can click the effects and delete them and just try again with a different one. We can see edge detection, and if you click on the material that it uses edge detection. If you click on the material down here, you can play with the different colors that it outputs. As you can see, there's a wide variety of choices you can apply to your lenses to make them very unique and add personal touch. Next, we'll look at something like eye color and again It gives you a very detailed window here, to which when you apply the eye color, it will show you what it looks like on every I not every I type, but a lot of different types and looking at your end results on the right window. So go ahead and play with these mix and match some components together and see what you come up with. This requires no code whatsoever, and you could even make an entire lens without importing any other materials. 3. The Hierarchy: next, let's dive into the object hierarchy. First, let's open up a project from template Face baseball cap. Now, after playing around with objects in the last video, you've probably become more familiar with the object hierarchy. Like what happens if we click a button to enable or disable something? Or what happens if we drag things on top of each other? And this might not necessarily effect the actual and result. We can sort our hierarchy by two different options. Layers and render order render order being this number here counting from 0 to 3, then objects that don't have a render order or stored down here. If you go to the layers mode, you can see this little blue dot here on all of these objects. If you click the blue dot, we can add a new layer. Let's click the edit pencil and call this one face. Now, if we only add components that correlate to the face to this layer, I will note that the end result does not include the's objects. This is because the camera doesn't actually render the new layer called face to allow the camera to render. The new layer will click on the camera over here till layers click default. Also, click face. No. You can also add a new camera that renders Onley face and keep the original camera rendering the default layer. This could be beneficial for very complex lenses. We can also filter the hierarchy by component type or search for specific components. No, we can rename any one of these components by just clicking ones and clicking again a few moments later. If you would like to add an image to your lens, come up to your hierarchy. Click. Add new empty object, then drag your image onto the empty object. Inspector. We can rename this to image Note. You can see the image in the distant to make the image bigger. Simply click on it. Hover your mouse in the three D space, press R on your keyboard and click the middle box and drag diagonally out. Know your image will get bigger. We'll dive deeper into the three D space. In another video 4. 3D Space: Let's move to the three D space. First, we'll create a blank project inside every project. You're going to see your three D space. You can move the inspector in preview over so that you have more space to work in the three D space as well as your hierarchy. Also, you can show in high different panels by going toe, window and panels to move around in three D space. If you have a track pad, you can use space and click to move up and down and around. Or, if you right click, you can rotate around the point. If you have a mouse, you can use your middle mouse scroll wheel. If you click that, you can move around. The point scrolling in the Net will get you closer and further away from your object. Let's add a cube. Go to your hierarchy, click add new scroll down to find box. This a lot of box in front of your camera, some keyboard shortcuts to keep in mind. Our W are and E W will allow you to move left right back and forth. End up and down X y and Z axis. He will allow you to rotate the device on fixed axes. No, I'm using my right click to move around. Or, if you want, you can actually click anywhere other than the lines, and it will rotate freely. Seem as if you were to click. W. Click the center point. You can now rotate the object freely, and if you click, are you can resize the object on X, Y and Z axes as well as if you click the center box. You can resize all three at the exact same rate hit. Delete well at a new box. Let's add a material. Scroll down until you see the Purple Material icon. Click Simple PBR. Let's click this and click again to rename it. We'll call it box material on your right, Inspector. We can go ahead and uncheck based texture, lighting and tone mapping. We'll click based color. It will make it something like Blue. Next click your box, and you can either click default and click box material. Or you could take box material and drag it onto the material. You have a blue box. Let's resize the box of that. It's back in view, maybe rotated, heading E so you can see a bit better and w let's move it away from ourselves. We can also make this material transparent. Click the color. Go to Alfa Channel. We'll make it translucent. Type 100 hit a go to blend mode and hit normal. Now we have a translucent box. Likewise, we can drag this number all the way down to zero, and the box is invisible. I'll put that 200 for darker, translucent color. Let's out ahead binding. Go to your hierarchy and click. Add new scroll down to face effects and click head binding. This will add a few different components. If you expand head binding zero, you'll see you have a face. Include er highlighting. This will make it visible in the three D space. If we zoom closer, we can see it better. This secluded demonstrates the average human head, and any objects inside of it will not be shown. If we drag her a box on your head binding and we move forward, we can see how it gets cut off with the face. This is a brilliant feature if you want to make head masks because the masks will know how to fit around the head. We can reset our view by clicking this little home button in the top right corner. Let's resize our box to just about bigger than our head will move it back a bit, will rotate it back to normal, move it up, out and then resize one last time back. And just repeat this process until you have something that looks good and maybe we'll just need to expand it vertically a tiny bit. And as you can see, since this box is inside of head binding, it will follow the users head. If we want to support multiple people in our lens, we can go ahead and right click the head, binding zero and duplicate. Now we have had binding one. You'll also need to click on the head, binding one and ensure that this index is set to one zero being number one one being number two. And if we go to our preview, we can click idle person one and find two people idle, and now they have two boxes around their heads. This is beneficial for creating a lens that supports more than one person 5. Importing and Using 3D Objects: your lens doesn't necessarily need to include three D objects, but that's what defines augmented reality. Placing three D objects in the world. You can either create your own three D objects, or you can use a website to download free three D objects with Creative Commons licenses. I like to use a website called Sketch Fab. We can navigate to sketch fab dot com and then search for anything. Let's go ahead and search for sunglasses. Well, sort by downloadable, and then we'll choose something like these glasses here. Make sure you're logged in and go ahead to click. Download three D Model. We're looking for O B J or FBX will open up the zip and we'll take both of these navigate to our desktop. Let's open up the source folder and extract this test Zip file. Copy everything out of here and paste. Close this and let's create a new lens studio project from your resources tab. Let's click. Add new and at the very bottom click import files. Go to your desktop and source folder, and now we can click this O. B. J file. If you open this object up, you should see a yellow box looking icon. This is your moment. You can actually drag this yellow model up to your objects. This is what's called a pre fab. As you can see, all of your textures have being assigned to the object automatically. Let's go ahead and add head binding into our objects. Open up the head, binding. Now let's choose our glasses over over here and let's rotate them back to normal so that they're facing the camera. Remember to hit E on your keyboard as a shortcut. We'll get them as good as possible because from the export they were not rotated perfectly , it are to resize. Let's shrink them right down to face size. Let's look around with right clicking our mouse. It w to move them up, paying attention to our preview window. And at this point, let's go ahead and drag this on to the head binding. That way it moves with the person we'll switch our person one dot jp g to video. That way we have a moving reference, and we'll choose someone who might suit the glass is better. Zoom in here and let's move the glasses around to match the eyes. Once you get the glass is situated on the person's face properly. That's all you need to know to import a three d object. 6. Publishing Your Lens: So you've created your lens and you're ready to submit Super easy. You're gonna need two things. An icon and a preview. The icon has to be supplied by you, and the preview can be pre defined based on what Lens studio provides you. I'll show you an example. For a Nikon, it will need to be a square image. The easiest option is on a Windows machine. Open up, snipping tool and take almost a square image. I like to get an image of the preview. Click. Save will save toward that. Stop. Just save it is capture in project info. Go to choose lens icon, Go to desktop and click capture. As you can see, it allows you to move the circle to where you want on your square image. Save the icon. Adding a lens preview is easy. Let's select the idle person we'll name our lens. Allow it to work on both cameras, not with spectacles. Three. If you are using the new version 2.2, we can add a hint. Typically, smile works the best and then click apply. Next. We can go to publish lens, had some tags. Make them interesting and easy to search. All you have to do now is click submit. You'll notice your status will be in review for the first while and after about 10 minutes . It should be life. Within a few minutes, your status should have changed to life. You can now click this to expand and scan it with your Snapchat That concludes this class. Thank you for watching.