
## Before you begin

If you're gonna make lenses (Snapchat's name for AR filters), you're gonna need a Snapchat account. Download the app and make one if you haven't already.

## Download and install Lens Studio

Next step is to [download Lens Studio](https://lensstudio.snapchat.com/). The current version as of this writing is 3.0.1. You don't need a high-end computer to use Lens Studio, but please check the system requirements before you buy a computer specifically for making lenses. The better the computer, the better Lens Studio will run. And don't forget that you'll probably be using some sorts of graphics programs to create assets for your lenses, so make sure your computer can run those too.

## Open up Lens Studio

Let's get started! Open up Lens Studio and you'll be greeted with the welcome screen. You probably won't be spending too much time here, but it's still good to get to know. The main banner in the middle contains useful tips/templates/tutorials, so be sure to check those out. At the top right you can sign in and then view your lenses that you've created. The templates are super useful, and I use them all the time, but we're also going to learn how to make a lot of them from scratch. For now let's just click on the "New Project" button.

![Lens Studio launch screen](/images/tutorials/snapchat-beginner/setup/ls-launch-screen.jpg)

Once you create a new project, you'll be taken to the main editor. Get used to seeing this window, because this is where all the magic happens. Feel free to resize the areas, and you can also drag and drop the various panels into new areas. If you change the layout and need to get back to this one, go to Window->Panels->Default Layout.

![Lens Studio main editor screen](/images/tutorials/snapchat-beginner/setup/ls-new-project.jpg)

## The panels

### Objects panel

![Lens Studio objects panel](/images/tutorials/snapchat-beginner/setup/ls-objects.jpg)

The objects panel is where you organize the different elements that make up your AR scene. This is where you add cameras, 3D objects, images, etc.

### Resources panel

![Lens Studio resources panel](/images/tutorials/snapchat-beginner/setup/ls-resources.jpg)

The resources panel is where you import and manage the various 3D models, graphics, scripts, materials, etc. that make up your lens.

### Scene config panel

![Lens Studio scene config panel](/images/tutorials/snapchat-beginner/setup/ls-scene-config.jpg)

The scene config panel is where you can change what gets displayed and in what order. We won't be in here too often, but it is an important place. Probably most important here are the live target and the capture target. The live target is what the user sees, and the capture target is what they record. If you have any sort of user interface, you'll probably be displaying it through the live target so that the recording is muddled by the UI.

### Scene panel

![Lens Studio scene panel](/images/tutorials/snapchat-beginner/setup/ls-scene.jpg)

The scene panel is where you lay out your actual effect. This is where you position your 3D models and images.

### Material editor panel

![Lens Studio material editor panel](/images/tutorials/snapchat-beginner/setup/ls-material-editor.jpg)

The material editor lets you create some pretty neat material. A material, by the way, is what controls how an object looks e.g. color, shininess, etc. There are plenty of built-in materials you can use, but you can create some pretty neat stuff here. It is a node-based editor similar to that of Blender or Unity.

### Script editor panel

![Lens Studio script editor panel](/images/tutorials/snapchat-beginner/setup/ls-script-editor.jpg)

Advanced effects usually require some sort of scripting. Lens Studio comes with a built-in editor, or you can use an external code editor. Don't worry if you aren't a coder, we'll go over a lot of what you need to now to still create awesome lenses.

### Inspector panel

![Lens Studio inspector panel](/images/tutorials/snapchat-beginner/setup/ls-inspector.jpg)

The inspector panel changes based on what you have selected in the objects panel. This is where you can change the different properties of the cameras, materials, images, etc.

### Logger panel

![Lens Studio logger panel](/images/tutorials/snapchat-beginner/setup/ls-logger.jpg)

The logger will tell you if there are any errors with your lens. You can also print out information from your scripts to help with troubleshooting.

### Preview panel

![Lens Studio preview panel](/images/tutorials/snapchat-beginner/setup/ls-preview.jpg)

The preview panel is where you can preview your lens. You can switch between still photos and video, and there are several different models/scenes to choose from depending on what sort of lens you are working on. You can also add your own footage. At the bottom you can choose the type of device to make sure your lens works on different sized devices.


Lens Studio is Snapchat's tool for creating lenses. It's super powerful and super flexible. While it's been designed to be easy to use, here's a quick overview of how the software is layed out.

Introduction to Lens Studio


`youtube:56vNBmUtt5Q`

For your very first lens we'll be making a face stretch lens. It's easy to get started and you can create some really fun effects. You can preview this effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=62e54d7fb96d47da95ed6b33ce5e0ef8&metadata=01) or by scanning the snapcode below.

![Snapcode for example face stretch lens](/images/tutorials/snapchat-beginner/first_lens/snapcode.png)

## Before you begin

Make sure you've downloaded and installed Lens Studio and that you have a Snapchat account.

## Let's go!

When you first open Lens Studio, you'll be greeted by the welcome screen. Feel free to take a look around, but we'll be jumping right into things so click that blue "New Project" button.

## Setting up the scene

For a basic [face stretch](https://lensstudio.snapchat.com/guides/face/face-effects/face-stretch/) lens, the setup is pretty simple. In the [Objects panel](https://lensstudio.snapchat.com/guides/general/panels/) at the top left, click on the little "+" button and either scroll down or search for "Face Stretch" and then add it.

![Adding the face stretch](/images/tutorials/snapchat-beginner/first_lens/add_face_stretch.jpg)

## Stretching the face

Once you've added the face stretch object, you'll have a new view of the scene in the middle of the window. Instead of a 3D view, you'll now have a 2D view of a face with a bunch of points on it. If you lose this view for whatever reason, you can click on the Face Stretch you added over in the Objects panel.

Each point you see on the face is a control point that you can click and drag. You might notice there are a few grey points and the rest are white. A white point will be influenced by the movement of any nearby points (not movement of the live lens, but movement from you clicking and dragging points). A grey point will stay put, although you can still click and drag those as well. Once you've moved a white point, it will change to grey because Lens Studio assumes that's where you want it to be. You can always click and drag the point, but the movement of nearby points won't affect it.

Down below the face there are two buttons. One button will toggle symmetry on/off (it is on by default) and the other button will reset all of the points. Use the reset button to start over if you aren't happy with how things are turning out.

Now all you have to do is move the points around until you're happy with the result. You can do subtle changes like a slight narrowing of the face for a "beauty" filter, or you can go crazy and create some weird looking faces. Speaking of crazy faces, [check out these lenses by Kriptk](https://lensstudio.snapchat.com/creator/kfYJXQs78H0EbGk-ntF1cw) for some inspiration.

Over on the right in the [Preview panel](https://lensstudio.snapchat.com/guides/general/previewing-your-lens/), if you look where it says "Idle Person 1" at the top, you can click that to select different people and facial expressions to make sure everything is looking good.

![Face stretch control points](/images/tutorials/snapchat-beginner/first_lens/control_points.jpg)

## Submitting your lens

Once you have your effect finished, it is time to submit. If you haven't already, be sure to save your project. I like to create a folder for each lens where I can store additional files such as icons, previews, graphics, etc. You can also preview your lens on your phone before you submit it. In the top right of Lens Studio there will be a button that either says "Send Lens to Device" or a button to pair your device. Follow the guide [here](https://lensstudio.snapchat.com/guides/general/pairing-to-snapchat/) if you need help getting that setup.

Before we can submit, there are a few things we need - a lens name, an icon, and a preview. You can get fancy and create an icon in something like Photoshop, but let's keep things simple for our first lens. Over at the very bottom right of the Preview panel, there is a little button that will take a screenshot of whatever is presently visible in the Preview panel. Wait for a shot you like and then click that button and save the image somewhere. We can use this for the icon.

Now click on the ["Project Info"](https://lensstudio.snapchat.com/guides/submission/configuring-project-info/) button up at the top left of Lens Studio. Give your lens a creative, catchy name. On the left side of the window, there will be a rectangular area and a circular area. Click in the circular area to set the icon. Choose the screenshot we just took and adjust the crop to your liking. Hit apply and then do the same for the preview. Lens Studio will automatically apply your effect to all the preview videos, so you just need to scroll through and choose one that you like.

![Project info panel](/images/tutorials/snapchat-beginner/first_lens/project_info.jpg)

Once all the project info is added, now you are ready to submit your lens. Click on the ["Publish Lens"](https://lensstudio.snapchat.com/guides/submission/submitting-your-lens/) button up at the top left. Add up to eight (8) descriptive tags to help people find your lens, and then for scan triggers go ahead and add "Person" as an option. Your preview will have been automatically added, so now you just need to hit that "Submit" button!

> As of Lens Studio 3.3, hitting the "Publish Lens" button will upload your lens and then open up your web browser. The overall process is the same, it just takes place through your browser rather than through Lens Studio.

![Submit lens panel](/images/tutorials/snapchat-beginner/first_lens/submit_lens.jpg)

## Sharing your lens

Once you submit your lens, you'll be taken to the "My Lenses" window. Here you'll be able to see a list of all your lenses. Snapchat's review process is usually really quick, so go ahead and hit that refresh looking button next to your profile picture. Your lens should now show as live! You'll get an email with a link to the lens, but you can also hit the arrow to the right of your lens to display the snapcode. Go ahead and share it with your friends!

The stats in My Lenses update only once per day, and there is a minimum of 100 views or something before the stats will show up, so don't worry if you don't see anything there at first.

Congratulations! You just created your first Snapchat lens!

## Further reading

- [Face stretch](https://lensstudio.snapchat.com/guides/face/face-effects/face-stretch/)
- [Panels](https://lensstudio.snapchat.com/guides/general/panels/)
- [Preview panel](https://lensstudio.snapchat.com/guides/general/previewing-your-lens/)
- [Previewing lens on your phone](https://lensstudio.snapchat.com/guides/general/pairing-to-snapchat/)
- [Project info](https://lensstudio.snapchat.com/guides/submission/configuring-project-info/)
- [Submitting lenses](https://lensstudio.snapchat.com/guides/submission/submitting-your-lens/)


There's no better way to learn lens making than by doing! Get started with Lens Studio by making your very first lens!

Create your very first Snapchat lens in 10 minutes


`youtube:KSvoPtjGFZA`

Color correction filters using LUTs (lookup tables) are super popular. Color corrections can be used to enhance the look and feel of a complex lens, or they can be used as standalone filters. LUTs are usually created using Photoshop or Lightroom, but for this tutorial we'll be using the freely available Photopea. You can preview an effect using a color correction by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=4baf3a20091049c9ab99539ab1d03a56&metadata=01) or by scanning the snapcode below.

![Snapcode for example lens with a color correction](/images/tutorials/snapchat-beginner/lut-color-correction/snapcode.png)

## What is a LUT?

You may have heard the term "LUT" used a lot in relation to Snapchat lenses/filters, but what is a LUT exactly? The word LUT is actually an acronym for "LookUp Table" and they are used to transform color values and give a certain "look" to the final product. The LUT takes the input image/video and transforms the colors by using the LUT as a reference. In film and video editing, LUTs are used during the color grading step to achieve a specific look for the video. In photography, specific looks are saved as presets that you can quickly apply to many photographs later (like an Instagram filter). Rather than making the same edits many times, the LUT is a shortcut to quickly make the same color changes to multiple images or videos. If you want to learn more, you can [read more here](https://www.studiobinder.com/blog/what-is-lut/) about LUTs. It is important to remember that LUTs are only transforming the colors; they cannot be used to add grain, blurring, sharpening, etc.

## Creating LUTs

So how do you make your own LUT? Lens Studio actually already has quite a few [built-in LUTs](https://lensstudio.snapchat.com/guides/2d/post-effect/) that you can layer together to create your own look, or you can create your own. There are already some [excellent tutorials](https://arbootcamp.com/lens-studio/color-effects) out there covering how to create LUTs using VSCO, Photoshop, and Lightroom, so if you use one of those programs I recommend you check out those tutorials. In this tutorial we will be using [Photopea](https://www.photopea.com/), a free, online image editor that shares many features with Photoshop. Let's get started.

## Get the base lookup table

LUTs come in various file formats, but Lens Studio cannot read all those various files. Instead, we will be applying our color corrections to a neutral lookup table and then importing our modified version into Lens Studio. Head over to the Lens Studio page on [Post Effects](https://lensstudio.snapchat.com/guides/2d/post-effect/) and download the Base Lookup Table image. You will start with this file anytime you want to create your own custom LUT for Lens Studio.

## Get some reference images

Applying our color corrections only to the base lookup table is not ideal because we won't be able to really see how our filter will look in Snapchat. Fortunately we can apply our changes to both the base lookup table and some reference images at the same time to see how everything is looking. Now remember, people are going to be using your color correction inside of Snapchat, so don't download a bunch of professionally edited photos to use as references. I recommend taking a couple selfies with Snapchat and supplementing with selfies from friends or from the web. A good place to find selfies is [kaggle](https://www.kaggle.com). Kaggle is a website that runs machine learning competitions. The nice thing for us about machine learning is that it requires a lot of data. There is a good [selfie dataset](https://www.kaggle.com/rahulbhalley/selfies) that you can browse through for some reference images. You don't need to download the whole dataset, just right-click and save a few of the images (you can click "Load more" at the bottom of the images to keep looking for good selfies). You won't know when or where people will be using your lens, so try to get a variety of lighting conditions and a mix of skin tones. I've seen a LUT which gives fair-skinned people a tanned look turn dark-skinned people orange. You want your lenses to be inclusive, so definitely include some dark and light skin tones in your reference images.

## Load your images

Open up [Photopea](https://www.photopea.com/) and create a New Project. Photopea won't be able to save your work (unless you pay to upgrade), but you can export the Photoshop file (.psd) and import it later if you ever need to make changes - be sure to always export your edits before closing Photopea. The size of the project don't really matter, you just want to have enough room for your reference images. I went with a width of 3000 and height of 1440. Once you've created the project, go to `File -> Open & Place` and select all your reference images and the base lookup table. Use the Move tool (you may need to enable the Transform controls) to arrange all your reference images. Place the base lookup table in the top left and do not resize it - this will make our lives easier in a bit.

![Loading reference images into Photopea](/images/tutorials/snapchat-beginner/lut-color-correction/photopea-reference-images.jpg)

## Make your adjustments

To create our LUT, we are going to use Adjustment Layers. An adjustment layer is a non-destructive edit. What I mean by non-destructive is we aren't actually editing the individual pixels. Instead, we are essentially adding a filter to our image that does some transformation. The nice thing about adjustment layers is we can add, remove, and edit them as we see fit at anytime. Both Photoshop and Affinity Photo have adjustment layers so feel free to use those rather than Photopea if you have them. However, GIMP currently does not have adjustment layers so I do not recommend using it to create LUTs. We are using Photopea for this tutorial because it is freely available online.

To add an adjustment layer, click the half-filled circle icon beneath the Layers panel. You won't want to use any of the "Fills" at the top of the menu, but basically anything else can be used to create your LUT. Explore the various types of adjustment layers and play around with their various properties, blend mode, and opacity. The great thing about the adjustment layers is that they affect everything below them, so you will see your changes applied to all the reference images you imported. If you aren't seeing this, make sure your adjustment layers are at the top of the layer list in the Layers panel.

![Our adjustment layers](/images/tutorials/snapchat-beginner/lut-color-correction/adjustment-layers.jpg)

## Exporting the LUT

Now that we have our finished effect, it is time to export. First things first, go to `File -> Save as PSD` to make sure you have the edits for later if you ever need to make changes. Now we need to export just the base lookup table. If you go to the File menu, there is an option to export our layers. Unfortunately this method does not apply our adjustment layers. But there is a way to export what we need.

Start off by selecting all the adjustment layers and the layer with the base lookup table in the Layers panel and then click on the folder icon down at the bottom. This will put all the adjustment layers and the base lookup table in a folder.

![Bundling our adjustment layers and base lookup table in a folder](/images/tutorials/snapchat-beginner/lut-color-correction/create-folder.jpg)

Right click on the folder and select "Duplicate Layer" and then right click on the new copy and select "Convert to Smart Object." The smart object bundles all our adjustment layers with our base lookup table. Now that we have the smart object, double click on the layer thumbnail in the Layers panel.

After double clicking on our smart object, we will now have a brand new project with our base lookup table up in the corner. If you look in the Layers panel you will see a folder containing the adjustment layers and the base LUT. All we have to do now is resize our image. Go to `Image -> Canvas Size` and set the width to 256 and the height to 16. In the Anchor box click on the top left corner and then click OK.

![Resizing our canvas to fit the base lookup table](/images/tutorials/snapchat-beginner/lut-color-correction/canvas-resize.jpg)

Now that our image is the right size, go to `File -> Export as -> PNG` to save your LUT! Make sure you export as PNG, otherwise you may have issues inside Lens Studio.

If we go back to the original file with our reference images and adjustments, you can now delete the smart object layer - unless you renamed things, it will probably be named "Folder 1 copy." If you need to make any changes to your LUT, you'll just have to go through the same steps of converting the folder with the adjustments and the base LUT to a smart object, resize the canvas, and then export it as a PNG file. The process is a lot easier in something like Photoshop or Affinity Photo, but Photopea is free so I'm not complaining.

## Use your LUT in Lens Studio

Head on over to Lens Studio and import your exported LUT. In the Objects Panel, add a Color Correction and select "Empty" (technically you can add any color correction). Swap out the Texture on the color correction for your imported LUT and you are good to go! You can adjust the strength of your LUT by adjusting the Alpha slider on the color correction. Go through the various preview videos as one last check to make sure your LUT looks good and you are all set!

![Using our custom LUT](/images/tutorials/snapchat-beginner/lut-color-correction/lut-settings.jpg)

## Further reading

- [Color Correction Post Effect](https://lensstudio.snapchat.com/guides/2d/post-effect/)
- [Photopea](https://www.photopea.com/)


Color correction filters using LUTs (lookup tables) are super popular. Color corrections can be used to enhance the look and feel of a complex lens, or they can be used as standalone filters. LUTs are usually created using Photoshop or Lightroom, but for this tutorial we will be using the freely available Photopea.

Make your own color correction filters with LUTs


`youtube:QGClmkOSqTQ`

Letting someone tap to change the background or a post effect is pretty common in lenses. Lens Studio does not have this feature built in, but we can set it up pretty easily with visual scripting. And the best part is, the script is 100% reusable for other projects. You can preview an effect using this technique by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=7ad78e067e9f440a9f46a06b4a7af82b&metadata=01) or by scanning the snapcode below.

![Snapcode for example lens where you can tap to cycle through something](/images/tutorials/snapchat-beginner/tap-to-change/snapcode.png)

## Scene setup

The scene setup is pretty simple. In the Objects Panel we just need to make sure we have several objects we want to cycle through. These can be post effects, color corrections, 3D objects, etc. Then in the Resources Panel, all we need to do is create a Script Graph and then open up the Graph Editor.

## Starting with a clean slate

For our tap to change effect to function properly, we need to make sure all our various objects except for the first one start out disabled. We can do this manually by enabling/disabling items in the Objects Panel, but I like to do it within the script. Why? I like to do it in the script because then I can enable/disable objects at will while working on the lens inside Lens Studio, but then when it is running on my device it will always work. If I forget to disable one of the objects, it doesn't matter because the script will take care of that.

Let's start by adding a "SceneObject Array Input" and naming it "objects." You can add nodes by right-clicking in the graph editor and then searching for the node you want to add. The trickiest part might be knowing what to search for! An array is a list of data, in this case the various objects we want to cycle through. To cycle through our array of objects, we are going to use a "Foreach" node. While we're adding nodes, let's also add a "setEnabled" node (be sure to select the one for SceneObjects, there are multiple different setEnabled nodes).

Now that we have our nodes, let's connect them. Take the "OnAwake" node and plug it into the triangle input of the "Foreach" node. The triangle inputs/outputs signify different triggers; we want our lens turning on to trigger the loop. Then plug your "SceneObject Array Input" node (which will be displaying "objects" or whichever name you chose) to the "array" input of the Foreach. Then connect the "Body" output of the Foreach to the triangle input of the "setEnabled" and the "SceneObject" output to the "SceneObject" input. The "Body" trigger will trigger for each item in the array, and the "SceneObject" output is the current object in the list.

Now add your script to your scene. Add a "ScenObject" in the Objects Panel. Select the new object and add a script component in the Inspector panel and select the script graph. Click on the "+ Add Value" button and choose all the objects you want to cycle through. Now, even if all your objects are enabled in the Objects Panel, none of them will be visible in the Preview Panel.

![Initializing our scene for the tap to change](/images/tutorials/snapchat-beginner/tap-to-change/initialize.jpg)

## Displaying the first item

You may notice that none of our effects/objects are visible after our loop. Let's go ahead and enable the first item in our list and then we'll create the loop.

First we need to add a "Get Element" node so that we can access specific items in our array of objects. Connect your list of objects to the "Array" input and leave the "index" at 0. Within Lens Studio (as well as most programming languages), we start counting through lists at 0. The first element is at index 0, the second at index 1, and so forth. It is a little confusing at first, but you'll get used to it with time. Now that we are accessing our first element, copy the setEnabled node. If you look at the Foreach node, you'll notice a "Then" output that we haven't touched yet. This trigger is fired once the loop finishes going through everything in the list. Let's connect that to the new setEnabled node, then connect the SceneObject from the Get Element node, and then check the box for "value." Now in the Preview Panel you'll see that the first item in our list is enabled.

![Enabling our first object](/images/tutorials/snapchat-beginner/tap-to-change/first-object.jpg)

## Cycling through everything

Alright, let's get to the good stuff. It is time to cycle through everything as the user taps. Go ahead and delete the "UpdateEvent" node and instead add a "TapEvent" node. As the user taps we want to disable the current object and enable the next object. To do this we'll need a way to keep track of where we are at in our list of objects. Over on the right-hand side of the Graph Editor there is a panel with an "Add Variable" button at the top. Click the button, change the name to "counter," and then change the type to "Number." We will use this variable to track where we are at in the list.

Now add a "Set Variable" node. This should default to our counter variable, but if not you can choose the variable you want to set over in that right-hand side panel. The starting value should be 0. You may notice that this node has that triangle input meaning that we need something to trigger this node. We want this to run when our lens turns on, but if you try connecting the OnAwake node, it will disconnect the Foreach. Instead, add a "Sequence" node and connect the OnAwake node to that. Then use one output of the sequence node to set our variable and the other to trigger the loop.

![Initializing our counter variable to 0](/images/tutorials/snapchat-beginner/tap-to-change/set-counter.jpg)

Are we ever going to actually cycle through our objects?? The good news is that yes, we are now finally ready to cycle through everything when the user taps. Let's head back to the TapEvent node and connect it to a new Sequence node. On the Sequence node you will want to change the count to 4. We need to disable the current object, increase our counter value, reset the counter if it goes too high, and then finally enable the next item in our array. It sounds like a lot, but we can do everything in steps.

The first item of business will be to disable the currently enabled item. We will want a "Get Variable" node to get our counter value, a "Get Element" node, and a "setEnabled" node. Connect the objects array, Get Element, and setEnabled nodes the same way as we did so before, but instead of leaving the index at 0 on the Get Element node, plug in the Get counter node. Then connect the first output of the Sequence node to the trigger of the setEnabled (and make sure the checkbox on that is not checked to disable the object).

![Disabling the currently enabled object when the user taps](/images/tutorials/snapchat-beginner/tap-to-change/tap-sequence-first.jpg)

Our next step will be to increment our counter variable. We need a "Get Variable" node, an "Add" node (from the Math section), and a "Set Variable" node. Connect them as shown below (don't forget to change the second value of the Add node to 1).

![Incrementing our counter variable](/images/tutorials/snapchat-beginner/tap-to-change/tap-sequence-second.jpg)

> As we move through our Sequence node outputs, you may notice our script graph getting a little messy and you may need to rearrange things. An alternative to using the Sequence node would be to use the output of the setEnabled node to trigger the Set counter node. This is a perfectly valid approach and might help keep the graph editor more tidy. I chose to go with the Sequence node because it is a convenient way to think about what we are doing and to go through step by step.

Our next step will be to reset our counter when it gets too high. Let's say we have 5 objects in our array. Our indices will be 0, 1, 2, 3, and 4. If we try to access index 5 of our array, we'll get an error in the script graph. When our counter reaches 5, we need to reset it to 0 to loop back through our array of objects.

We will need the get and set variable nodes, a "Length" node (from the Arrays section), an "If" node, and a ">=" node. We could just an "Equals" node, but I like a little extra safety so I'm using a greater-than-or-equals node (that's what the >= means). We will take our array length, see if our counter value is greater than or equal to it, and if true, we will set our counter to 0.

![Resetting our counter if it goes too high](/images/tutorials/snapchat-beginner/tap-to-change/tap-sequence-third.jpg)

Our last step will be to use our fresh counter variable to enable the next item in the list. All we need to do is copy the same setup as for our first step, but instead of disabling the item, make sure that value box is checked to enable it.

![Enabling the next item in the list](/images/tutorials/snapchat-beginner/tap-to-change/tap-sequence-fourth.jpg)

## Profit

The script is now all done! If you click on the Preview, you'll see your objects being cycled through and restarting when you get to the end. And the best part about all this? You never need to do it again! You can export the script graph and import it into other projects. A super win!

> Pro tip: If you want to have a state where no effects/objects are displayed, all you need to do is add a Scene Object to the objects panel and use that as an input to the script. The Scene Object is just an empty object, so the script will work with it and nothing will be displayed in your scene when you get to that entry in the list.

<a href="/assets/downloads/TapToChange.lsscript" download>Download the completed Script Graph here</a>

## Further reading

- [Visual Scripting](https://lensstudio.snapchat.com/guides/visual-scripting/overview/)


Letting someone tap to change the background or a post effect is pretty common in lenses. Lens Studio does not have this feature built in, but we can set it up pretty easily with visual scripting.

How to add a tap-to-change feature with Lens Studio


`youtube:q3PtpCixl5k`

Grain is a pretty popular addition to many Snapchat lenses. Done right, it can add a vintage look to your lenses. This tutorial will show you how to quickly and easily add grain to your own lenses. You can preview an effect using grain by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=9bbc641deec14df1a21c9f170b11ce04&metadata=01) or by scanning the snapcode below.

![Snapcode for example lens with grain](/images/tutorials/snapchat-beginner/grain/snapcode.png)

## Getting grain images

Before we add our grain, we of course need some sort of grain images. For a great source of free grain images, I recommend checking out [Film Composite](https://www.filmcomposite.com/free-film-assets). They have an entire collection of free grain images and videos. Once you find some grain you like, click on the thumbnail to get to the download page. For this particular lens I am going to use film scratch images, but feel free to use whichever type you like. Once you click on the thumbnail, you'll see a larger preview of the grain along with a `Blend Mode` and `Download Free` button. Take not of the blend mode because we'll need that later. Download the image and find some more that match it. If you can only find one grain image you like don't worry, we have a few tricks for generating multiple images from one.

## Formatting the grain

Using your favorite graphics editor (Photoshop, Affinity Photo, GIMP, etc), create a new image. I would not go above a final resolution of 720x1280 due to file size constraints for Snapchat lenses. Import each of your grain images as a new layer. The more layers you have, the more dynamic and less repetitive your grain will look because each layer will become a separate frame in the animation. Since the grain images we downloaded from Film Composite are much larger than the resolution we chose for our frames, it is pretty easy to supplement our number of frames. Take a layer and scale it down so it still fills the frame. Duplicate the layer and scale, move, and/or flip the layer to make a new, distinct frame. Repeat as many times and for as many layers as desired. Film Composite had six film scratch images, and I duplicated each layer twice to give me a total of 18 frames. Once you have your frames, export each layer as an image. You can do this manually by showing/hiding each layer and exporting, or you can use a more automated route -- here's how to [do it in Photoshop](https://helpx.adobe.com/photoshop/using/export-artboards-layers.html), [in Affinity Photo](https://affinity.help/designer/en-US.lproj/index.html?page=pages/ExportPersona/exportPersona.html?title=Exporting%20using%20Export%20Persona), and [in GIMP](https://khalim19.github.io/gimp-plugin-export-layers/).

## Import into Lens Studio

Head into Lens Studio and add a [2D Animation From Files](https://lensstudio.snapchat.com/guides/2d/2d-animation/) in the Resources Panel. Select all the grain frames you just exported and create the animation (you shouldn't need to change any of the settings). Now in the Objects Panel create a [Screen Image](https://lensstudio.snapchat.com/guides/2d/image/), set the fill mode to stretch, choose the new grain animation as the texture, and set the blend mode to whatever Film Composite listed on the download page. Voila! You can adjust the strength of the grain by changing the opacity of the screen image. You can also adjust the timing of the animation itself to make your grain faster or slower. To do this, select the 2D animation in the Resources Panel and change the `Duration` in the Inspector Panel.

It is a pretty straightforward process to add grain to your lenses. The hardest part might be finding the images and sizing them appropriately!

## Further reading

- [2D Animation From Files](https://lensstudio.snapchat.com/guides/2d/2d-animation/)
- [Screen Image](https://lensstudio.snapchat.com/guides/2d/image/)


Film grain is a popular feature of lenses, and fortunately it is easy to add to your own.

Quicky and easily add grain to your Snapchat lenses


`youtube:NyESG8jb5FQ`

In this Lens Studio tutorial you will learn how easy it is to make objects rotate around the head using the built-in tween scripts - no custom coding required. All it takes is adding your objects and using the right settings on the tween scripts. You can preview an example effect using this technique by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=ac05ed980b15450495430f16c5443429&metadata=01) or by scanning the snapcode below.

![Snapcode for example lens with objects rotating around the head](/images/tutorials/snapchat-beginner/rotate-around-head/snapcode.png)

## Setting up your scene

We don't need much to get an object rotating around the user's head. Add a Head Binding, a Tween Manager, and a Scene Object. Delete the examples that are found under the Tween Manager and then move it up to the top of the scene. Rename the Scene Object, nest it under the Head Binding, and then position it where you want the center of rotation to be.

![Setting up our scene for rotating objects around the head in Lens Studio](/images/tutorials/snapchat-beginner/rotate-around-head/scene-setup.jpg)

## Add the object

Import the 3D object(s) that you want to move around the head. In this example I'm just going to add a Sphere in the Objects Panel. Make your object a child of the Scene Object and move it and scale it accordingly. You want your 3D object to be offset from the center of rotation.

![Setting up our object offset in Lens Studio](/images/tutorials/snapchat-beginner/rotate-around-head/object-offset.jpg)

## Add the tween

Select the Scene Object that is serving as the center of rotation and add a Script Component in the Inspector Panel. For the script select "TweenTransform." Here are the settings we want to use for it:

- Change the type to "Rotate"
- Set the movement type to "Offset"
- Set a value for the "Y" (the second box) offset. I started with a value of 10
- Check the "Additive" box
- Change the loop type to "Loop" (you should now see the object continue moving around the head)
- Change the easing function to "Linear"
- Change the easing type to "In / Out"
- Adjust the Time or Y offset to control the speed of the movement

![Tween settings for constant rotation around the head in Lens Studio](/images/tutorials/snapchat-beginner/rotate-around-head/tween-settings.jpg)

The tween scripts aren't good at doing full 360 degree rotation, so instead of trying to get a full rotation like that, we instead use the offset option. Each time the tween runs, it just adds that amount of rotation. The additive option makes sure we don't reset the rotation each time and then by looping the tween we get the continuous motion. You can parent as many objects as you wish to the center of rotation and they'll all rotate together.

There is a face occluder included with the head binding that will hide the objects when they pass behind the head. You can play around with its scale a little bit and adjust the starting positions of the 3D objects to get a cleaner looking effect. Unfortunately the face occluder doesn't take into account hair, so sometimes you'll see your objects going in front of the user's hair before being hidden by the occluder.

![Weird occlusion when hair is involved](/images/tutorials/snapchat-beginner/rotate-around-head/occlusion.jpg)

## Further reading

- [Tweens](https://lensstudio.snapchat.com/templates/world/tween/)
- [3D Object Import](https://lensstudio.snapchat.com/guides/3d/3d-object-import/)
- [Head Binding](https://lensstudio.snapchat.com/guides/face/face-effects/head-attached-3d-objects/)


In this Lens Studio tutorial you will learn how easy it is to make objects rotate around the head using the built-in tween scripts - no custom coding required. All it takes is adding your objects and using the right settings on the tween scripts.

Make objects rotate around the head using tweens


`youtube:lcTdTkdQ5nc`

If you haven't made some sort of twerking lens, can you still call yourself a lens creator? Not to worry, we'll go over everything you need to know in this tutorial! All it takes is a 3D model, Mixamo, and a Lens Studio template. You can preview an example twerking lens by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=96ae32b694d7404a858e5fca006a3295&metadata=01) or by scanning the snapcode below.

![Snapcode for the alien twerk Snapchat lens](/images/tutorials/snapchat-beginner/twerk/snapcode.png)

## Prepare your 3D model

First things first, you need a 3D model. For this tutorial it does need to be humanoid (standing upright on two legs), so unfortunately no twerking deer (unless they are standing up). Ideally your character should be standing in a T-pose with their arms outstretched, but it's not strictly necessary. Feel free to model/sculpt your own character, or you can find/buy a 3D model from somewhere like [TurboSquid](https://www.turbosquid.com/) or [Free3D](https://free3d.com/). Make sure your model follows the [Lens Studio guidelines](https://lensstudio.snapchat.com/guides/3d/3d-object-export/) for 3D models and then export or download it in fbx format.

![3D character ready for export](/images/tutorials/snapchat-beginner/twerk/3d-character.jpg)

## Add the animation

If you know how to animate you can create the twerking animation yourself. But if you're like me, head on over to [mixamo.com](https://www.mixamo.com) and create a free account. On the left side of the screen you'll see a variety of animations, and on the right side of the screen you'll see a preview. When you first login the preview will probably just be standing still, but if you select an animation on the left it will start playing.

![Main screen of Mixamo](/images/tutorials/snapchat-beginner/twerk/mixamo.jpg)

To the right of the preview there's an "Upload Character" button. Click it and select your 3D character that you exported. Mixamo will load in your character and walk you through some steps to prepare it for the animation. If all goes well you will see your 3D character looking around and you can complete the setup wizard. Now any animation that you select on the left will be applied to your character.

If you search for "twerk," a single result should show up. Click on it to apply to your character. You might notice that your character's hands are going through their thighs while twerking. You can fix this by adjusting the "Character Arm-Space" setting on the right. Once you are happy with how it is looking, click the "Download" button to download a new fbx file with the animation.

## Adjust the animation

As is, everything is fine to import into Lens Studio. But the animation does include more than just the twerk, so let's take a look at how to trim our animation. The original Mixamo animation loops, but a trimmed version won't loop so we will have to do a little extra work.

Open the twerking animation in your 3D software of choice. Find a good beginning and end frame for the animation so that you capture most of the twerking and where the end frame is similar to the first frame. For this twerking Mixamo animation frames 173 to 323 seem to work pretty well. There is a jump when we start the animation over, so let's smooth that out.

Go ahead and delete some of the keyframes outside of your twerking frames to give yourself a little room to work. Extend your animation range up to frame 326, and then copy the first keyframe (frame 173) and put it on frame 327. By duplicating our first keyframe and placing it just after our animation ends, we are making sure we transition back to the beginning of the animation and make it loop. The small delay before we hit that first keyframe again helps to smooth out the transition and make it less jarring. Feel free to play around with your starting/ending keyframes until you get something you like.

![Making our trimmed animation loop](/images/tutorials/snapchat-beginner/twerk/keyframes.jpg)

## Import into Lens Studio

Now that we have our looping twerking animation, export it as an fbx file from your 3D software and head over to Lens Studio. Rather than start a project from scratch, look for the ["Animated Object" template](https://lensstudio.snapchat.com/templates/world/animated-object/) and open that up. Remove the Red Panda object and [replace it](https://lensstudio.snapchat.com/guides/3d/3d-object-formats/fbx-3d-object-import/) with your character. You might notice some really weird things going on, but don't worry, we'll get it fixed. If you notice a really weird animation, there could be multiple animations in the file (this will sometimes happen if you reuse a 3D model). Select your 3D character, and then in the [Animation Mixer](https://lensstudio.snapchat.com/guides/scripting/playing-3d-animation/), disable all the other animations. The bottom animation is probably the one you want. The entire, untrimmed animation might also be playing. Change the Range Type to "Frames" and then select the start and end frames of the animation we just looped.

![Fixing our animation by adjusting the settings in the Animation Mixer](/images/tutorials/snapchat-beginner/twerk/animation-mixer.jpg)

## Finishing touches

Once your have your animation working, all that's left is to adjust the scale of your character, make sure the materials are looking good, and then add in the shadows. To add the shadows, select the mesh in the Objects Panel and then change the Shadow Mode to "Caster" in the Inspector Panel.

## Further reading

- [3D Object Export](https://lensstudio.snapchat.com/guides/3d/3d-object-export/)
- [3D Object Import](https://lensstudio.snapchat.com/guides/3d/3d-object-import/)
- [Playing 3D Animations](https://lensstudio.snapchat.com/guides/scripting/playing-3d-animation/)
- [Animated Object Template](https://lensstudio.snapchat.com/templates/world/animated-object/)


If you have not made some sort of twerking lens, can you still call yourself a lens creator? Not to worry, we will go over everything you need to know in this tutorial! All it takes is a 3D model, Mixamo, and a Lens Studio template.

How to make a twerking lens for Snapchat using Mixamo and Lens Studio


`youtube:FzHGZmdg9bE`

In this Lens Studio tutorial we'll go over how to create a virtual background or green screen effect for your Snapchat lenses. You can preview this effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=2e313553d72344058cefe02ba6f3b4ec&metadata=01) or by scanning the snapcode below.

![Snapcode for example virtual background lens](/images/tutorials/snapchat-beginner/virtual_background/snapcode.png)

## Setting up the scene

For this effect we are going to start with a blank project. We don't need too much to create this effect. Start by adding a [Screen Image](https://lensstudio.snapchat.com/guides/2d/image/) in the Objects panel and then a [Portrait Background Segmentation Texture](https://lensstudio.snapchat.com/guides/general/segmentation/) in the Resources Panel.

![Adding the screen image](/images/tutorials/snapchat-beginner/virtual_background/add_screen_image.jpg)

![Adding the portrait background segmentation texture](/images/tutorials/snapchat-beginner/virtual_background/add_segmentation.jpg)

Things are going to look a little weird now over in the preview panel. When we add a screen image, Snapchat adds a placeholder image to let us know it is there and ready for us to edit. For this lens I am going to use space backgrounds, but feel free to use whatever you want. [Pixabay](https://pixabay.com/) is a great place to find free-to-use images. Head on over and download 3-4 images that you like. Keep in mind that our lens has an overall size limit of 4 MB, so we need to be conscious of image size. Fortunately Pixabay provides each image in several different resolutions, so when you download each image, try to find a size around 1280x720. This strikes a good balance between image quality and file size. Once you have your images, [import them](https://lensstudio.snapchat.com/guides/general/importing-and-updating-resources/) using the Resources Panel.

## Creating the green screen effect

Now that we have our images downloaded and our scene elements added, let's get the green screen effect created. In the Objects Panel, click on the Screen Image that we added earlier. You'll notice that it is nested under a Full Frame Region which itself is nested under an Orthographic Camera. A screen image is 2D only, there is no concept of depth, so it has to be added to an Orthographic Camera which is essentially a 2D only camera.

Go ahead and click on the Screen Image, and then over in the Inspector Panel, click on the Texture box and choose one of the images you added. You should now see your image overlaid in the preview.

![Setting the screen image texture](/images/tutorials/snapchat-beginner/virtual_background/setting_image.jpg)

You'll notice that the image doesn't fill the whole screen, nor is the person fully visible. Let's fix that. A few rows beneath where we set the screen image texture you'll see a dropdown for the [stretch mode](https://lensstudio.snapchat.com/guides/2d/image/). The default stretch mode is "Fit" which ensures our entire image is visible without stretching it in any direction. We are going to change it to "Fill" so that the entire screen is filled. The Fill mode will scale the image without causing any stretching. As an added bonus, it will work on any screen size, so even if someone uses this lens in [Snap Camera](https://snapcamera.snapchat.com/) on the desktop, our virtual background will look good and have no distortion.

Now that our background image is filling the screen, let's make sure we can see the person! Remember that Portrait Background Segmentation we added earlier? Segmentation is a fancy word for outlining, and the Portrait Background type lets us separate people from the background. Click on the Orthographic Camera in the Objects Panel, then in the Inspector Panel click on the "Mask Texture" box and select the segmentation texture. Voila! It's working!

## The S-word

Our lens is pretty cool with the virtual background, but wouldn't it be cooler if we could tap to cycle through the different images we downloaded? You would think there would be something built in for this, but unfortunately there isn't. This brings us to scripting.

If you aren't already a developer, scripting can be pretty confusing. Don't run away yet, we're going to walk through the process step-by-step. It's possible to make lots of awesome lenses without writing any code, but it is definitely something you'll want to learn more about if you want to take your lenses to the next level. Let's get started.

### Add a script

[Adding a script](https://lensstudio.snapchat.com/guides/scripting/scripting-overview/) to your lens is a two step process. First we create a script in the Resources Panel. Once you've done that, we need to add it to our scene. With the Orthographic Camera selected, click on the "Add Component" button in the Inspector Panel. It'll be underneath the last item in the panel. Select "Script" and then click on the "Add Script" button. Choose the script we just created and we are ready to move on to the next step!

### Set the inputs

Now that we've added our script to the scene, let's write some code so it actually does something. Select the script in the Resources Panel, then back over in the Inspector Panel click on the "Open in" button and choose "Open Built-in Editor." Now we'll see a blank code editor in the main window.

The first line in the code editor will look like the following:

```javascript
// -----JS CODE-----
```

Any line that starts with `//` is a comment line and won't actually run. It's a handy way to leave notes to help you (and others) know what specific parts of the code do. The `JS CODE` part is letting us know that our lenses can run JavaScript (not to be confused with Java).

To change our background, we need to tell Lens Studio what image we want to change, and also provide it a list of images to cycle through. To do this, Lens Studio lets us write special comment lines with `@input` to let us specify custom inputs. Let's add the following two lines to our script:

```javascript
// @input Component.Image background
// @input Asset.Texture[] images
```

Let's break this down. Component.Image is going to refer to our Screen Image that we added. The Asset.Texture[] part is going to let us input a list of images - the `[]` part means we'll be inputting a list rather than just a single item. This will be a little easier to understand in just a moment. Hit `ctrl-s` or `cmd-s` to save the script, then click on the Orthographic Camera again and look at the script component we added in the Inspector Panel. You'll now see a box to specify a Background image and a place to add values to our Images list. Go ahead and select the Screen Image for the background and your various images for the Images list.

![Setting the script inputs](/images/tutorials/snapchat-beginner/virtual_background/script_inputs.jpg)

### Detecting taps

Okay, now back to our script. Select our script again in the Resources Panel to go back to the code editor. Now that we have our background and images, we are ready to start cycling through them!

The first thing we need to do is detect when the user taps on the screen. Add the following code to your script:

```javascript
script.createEvent("TapEvent").bind(function () {
  print("Tap!");
});
```

There's a lot going on here, so let's step through it. Lens Studio has a special `script` object that we can use to interact with the lens. The `createEvent` part is a feature that the `script` object gives us, and in our case we are interested in being notified about the `TapEvent`. The `bind` part means when there is a "TapEvent" that we want the following function to run. A function is a reusable block of code. If you click inside the Preview Panel, you should see the word 'Tap!' printed out in the Logger Panel when you click. If so, awesome! If not, double check to make sure you don't have any spelling errors anywhere.

### Cycle through the images

So we have a script and we can detect when someone taps the screen. How do we change the image? You are going to add a couple lines of code so that your full script looks like this:

```javascript
// -----JS CODE-----
// @input Component.Image background
// @input Asset.Texture[] images

var index = 0;
script.background.mainPass.baseTex = script.images[index];

script.createEvent("TapEvent").bind(function () {
  print("Tap");
});
```

What in the world is going on? Most programming languages count through lists starting at `0`, so we are creating a variable to keep track of our list position and setting it equal to 0. Next, we are using `script.background` to access the background image we selected and setting the image texture to the first image in our list of images that we selected. How do we know that's how we set the texture? Fortunately, Lens Studio has some incredibly helpful reference pages for scripting which is [how I knew](https://lensstudio.snapchat.com/api/classes/Texture/) to use the `mainPass.baseTex` part. Don't worry if this all looks like gibberish. Scripting takes time to learn.

Now we are going to add a couple lines inside our Tap Event code.

```javascript
// -----JS CODE-----
// @input Component.Image background
// @input Asset.Texture[] images

var index = 0;
script.background.mainPass.baseTex = script.images[index];

script.createEvent("TapEvent").bind(function () {
  index += 1;
  script.background.mainPass.baseTex = script.images[index];
  print("Tap");
});
```

Here I just copied the same line of code that we used to set the background image, and above it we are incrementing the index by 1. The `+=` part means take the current variable value and add 1 to it. Now if you click in the Preview Panel, you should start cycling through your different backgrounds. But wait! What happens when you get to the end? Our index keeps increasing, but our list is all out of images so we get a nasty looking error in the Logger.

To take care of this, we'll just reset our index to 0 whenever we go too high. Let's add a few more lines of code:

```javascript
// -----JS CODE-----
// @input Component.Image background
// @input Asset.Texture[] images

var index = 0;
script.background.mainPass.baseTex = script.images[index];

script.createEvent("TapEvent").bind(function () {
  index += 1;
  if (index >= script.images.length) {
    index = 0;
  }
  script.background.mainPass.baseTex = script.images[index];
  print("Tap");
});
```

If our index value ever increases to the length of our images list, we set it back to 0 and we go back through our images. Now if you click in the Preview Panel, you'll jump back to the first image after you get to the last image. Congratulations on making it this far! You are all done scripting!

The really nice thing about this script is that you can reuse it in other projects. If you have another lens where you need to tap to change the background, you can simply copy the script to your other lens, add it to your scene, and then select the corresponding Screen Image and list of images.

## Finishing up

Now all that's left is naming your lens and creating an icon and a preview. Scripting can be daunting for beginners, but even simple scripts can add some pizzazz to your lenses and help them stand apart.

## Further reading

- [Images](https://lensstudio.snapchat.com/guides/2d/image/)
- [Panels](https://lensstudio.snapchat.com/guides/general/panels/)
- [Segmentation](https://lensstudio.snapchat.com/guides/general/segmentation/)
- [Scripting](https://lensstudio.snapchat.com/guides/scripting/scripting-overview/)
- [Lens Studio API](https://lensstudio.snapchat.com/api/)


Learn how to add a virtual background or green screen effect to your lenses using segmentation!

Tap to change the background in Lens Studio


`youtube:OKTgCRxE_h0`

In this tutorial we'll go over how to easily create freckles. You can preview this effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=67fa25dccb5d4936855685b61101fe17&metadata=01) or by scanning the snapcode below.

![Snapcode for example virtual background lens](/images/tutorials/snapchat-beginner/easy_freckles/snapcode.svg)

## Creating the freckles

Now, this is a Lens Studio tutorial, not a Photoshop or Illustrator tutorial, so I won't go into detail as to how to actually create the freckles. I am assuming you have access to, and familiarity with, some sort of graphics program.

- Start by going to the [Lens Studio Face Mesh Guide page](https://lensstudio.snapchat.com/guides/face/face-effects/face-mesh/) and scroll down to the `Download the Face Mesh UV` section. Right click on the image and save it to your computer.
- Open up your graphics program. I personally use the [Affinity](https://affinity.serif.com/en-us/) line of software, but you can use Photoshop, Illustrator, GIMP, Inkscape, etc. Whatever you have and are comfortable with will work.
- Use the Face Mesh UV as a guide for placing your freckles. A UV map is a 2D representation of a 3D object. The image we downloaded from the Lens Studio website is a guide for the Face Mesh.
- Once you are happy with your design, export it as a PNG file. For freckles we need the transparency, so a JPEG file won't work.
- I recommend exporting your design in all white if it is a single color design. If it is a multi-color design then it's fine to leave the colors. The benefit to a white design is that over in Lens Studio it will be easy to set the color.

## Setting up the scene

For this effect we are going to start with a blank project. We really only need to add a [Face Mesh](https://lensstudio.snapchat.com/guides/face/face-effects/face-mesh/) in the Objects Panel and import our freckles image in the Resources Panel.

## Add the freckles

In the Resources Panel, find the `Face Mesh Default` material and select it. Now, over in the Inspector Panel, swap out the Base Texture texture for your freckle image. That's it! You can change the base color to adjust the color of the freckles and add some shine with the Metal and Roughness sliders. It really is that easy. The hardest part is probably downloading the Face Mesh UV guide and creating your design.

## Finishing up

Add a [Face Retouch](https://lensstudio.snapchat.com/guides/face/face-effects/face-retouch/), [Color Correction](https://lensstudio.snapchat.com/guides/2d/post-effect/), or anything else you want.

## Further reading

- [Face Mesh](https://lensstudio.snapchat.com/guides/face/face-effects/face-mesh/)


Learn how to easily add freckles to the user's face using the Face Mesh!

Super easy freckles in Lens Studio


`youtube:SqDPwVhznp4`

In this tutorial we'll go over how to add credits to your lens/filter. Adding credits or a call-to-action to your lens could potentially help you grow your subscriber base or credit another creator with whom you've collaborated, but you don't want it to be obtrusive. Here you'll learn how to fade out the credits after several seconds and also ensure it never shows up while the user is taking a picture or video.

## Setting up the scene

For this tutorial we are going to start with a blank project, but it is easy enough to add to an existing lens. In the Objects Panel, add some [Screen Text](https://lensstudio.snapchat.com/guides/2d/text/), a [Behavior Script](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/behavior/) (found in the Helper Scripts submenu), and a [Tween Manager](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/tween-manager/) (also in the Helper Scripts submenu).

## Configure your text

When you added the Screen Text, you may have noticed that it was nested underneath a [Full Frame Region](https://lensstudio.snapchat.com/guides/2d/screen-transform/screen-region-device-simulation/). Select this frame region, and then over in the Inspector Panel change the Screen Region from `Full Frame` to `Safe Render`. Why? Well, the Snapchat interface will cover up parts of the top and bottom of the screen. The `Safe Render` region makes sure our content is not covered by the Snapchat UI. Once that is done, go ahead and edit your text. You can change the font, the size, the position, etc.

## Configure the scripts

When the Tween Manager is added to a scene, it brings along a bunch of examples. Find the Tween Manager in the Objects Panel and delete all the examples nested under it. If your Behavior script got nested under the Tween Manager, make sure to leave that. Move the Tween Manager to the top of the scene hierarchy and rename the Behavior script to something like 'Credits.' Your setup should look something like the below image.

![Scene setup in the Objects Panel for adding disappearing credits to a lens](/images/tutorials/snapchat-beginner/credits/scene_setup.jpg)

### The behavior script

Our first task will be to make sure our lens credits are never visible while the user is taking a picture or video. For that we will use the Behavior script. Select the Credits script object in the Objects Panel so that the script options are visible in the Inspector Panel.

- Change the trigger to `Recording Start`
- Change the response type to `Set Enabled`
- For the target choose your Screen Text
- Set the action to `Disable`

We'll still be adding the fade-out effect, but this behavior script makes sure that if the user takes a snap before the credits have faded out that they aren't present in the captured image/video.

![Behavior script setup for disabling an object when recording starts](/images/tutorials/snapchat-beginner/credits/behavior_script.jpg)

### Fading out with tweens

What is a tween? If we were normal people we'd be referring to a pre-teen, but since we are making lenses, it means something else. Tweening is short for 'inbetweening.' We have a start value and an end value and the tween script will take care of calculating all the inbetween values. These could be position, rotation, or scale values, but in our case we are going to use alpha (transparency) values.

Underneath the script options we just set for the Behavior script, click the 'Add Component' button and choose 'Script.' Click the 'Add Script' button and then find the `TweenAlpha` script. It is found in Tween -> TweenTypes -> TweenAlpha.

- For the Scene Object, choose your Screen Text
- Change the `Start` value to 1 (fully visible) and the `End` value to 0 (fully transparent)
- `Time` will be how long the transition lasts and `Delay` will be how long before the transition begins
- `Easing Function` will determine how the transition occurs. Most of the easing functions will give smooth transitions, the main difference being the speed at which the transparency changes at different stages.

A fun example to try would be a `Time` value of 0.3, a `Delay` of 3.0, and an `Easing Function` of Bounce. This gives a nice flickering out effect, but feel free to try out different easing functions, times, and delays to find what suits your lens best.

![Tween script setup for fading out an object after some amount of time](/images/tutorials/snapchat-beginner/credits/tween_script.jpg)

## Further reading

- [Screen Text](https://lensstudio.snapchat.com/guides/2d/text/)
- [Tween Manager](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/tween-manager/)
- [Behavior Script](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/behavior/)
- [Full Frame Region](https://lensstudio.snapchat.com/guides/2d/screen-transform/screen-region-device-simulation/)


Learn how to add your username to a lens and make it disappear automatically!

Add disappearing messages to your Snapchat lenses


`youtube:RWevNaCJ1jM`

> You can buy the finished post effect [here](https://gum.co/vyHOg)

In this tutorial we'll go over how to create a sharpening effect in Lens Studio (sometimes called "alt" by the cool kids). When used subtly it sharpens the image, and when used prominently you achieve a more HDR look to your lens. You can preview this effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=665301c383954af8a813de5025351bf1&metadata=01) or by scanning the snapcode below.

![Snapcode for example lens with a sharpening effect](/images/tutorials/snapchat-beginner/sharpen/snapcode.svg)

## Setting up the scene

The inspiration for this effect comes from an article on [creating a face smoothing effect](https://medium.com/swlh/how-i-implemented-my-own-augmented-reality-beauty-mode-3bf3b74e5507), but instead of smoothing out the details we are going to enhance them.

For this tutorial we are going to start with a blank project. In the Resources Panel add a [Graph Empty Material](https://lensstudio.snapchat.com/guides/material-editor/introduction-and-concepts/) and in the Objects Panel add a [Color Correction Post Effect](https://lensstudio.snapchat.com/guides/2d/post-effect/). Select the post effect and then in the Inspector Panel change the material to the Graph Empty material that you just added. At this point the lens preview should be solid white. Open up the Graph Empty material in the [material editor](https://lensstudio.snapchat.com/guides/material-editor/material-editor-toolbar-and-shortcuts/) and we are ready to get started.

## Creating the sharpen effect

### Adding the blur

The first thing we need to do is blur the image. Add a `Texture 2D Obect Parameter` node, a `Surface UV Coord 0` node, and a `Gaussian Blur` node. The Texture 2D object parameter node lets us select an input image for the effect. Connect the output of the Texture 2D Object Parameter to the Texture input on the Gaussian Blur node and connect the Surface UV Coord 0 to the TexCoords input of the Gaussian Blur. Select the Gaussian Blur node and set the Pixel Size input to something like `0.001` for both values. Next connect the output of the Gaussian Blur node to the Color input of the Shader node. If you select the Graph Empty material in the Resources Panel, you should see a texture input slot in the Inspector panel. Set the input texture to be a Screen Texture (the Screen Texture should have been added inside a Textures folder when you added the post effect, otherwise you can add it yourself in the Resources Panel). At this point you should be able to set the Blur Factor on the Gaussian Blur node and see a blurry image in the Lens Preview. You can add a `Float Parameter` node and connect it to the Blur Factor input which will let you control that value from the material's Inspector Panel.

![Material setup for the gaussian blur](/images/tutorials/snapchat-beginner/sharpen/gaussian-blur.jpg)

### Finishing it up

Now add `Texture 2D Sample`, `Subtract`, `Add`, and `Blend` nodes. The first thing we are going to do is subtract our blurred image from the original. Connect the output of the Gaussian Blur to the bottom input of the Subtract. Our original image in the Texture 2D Object Parameter node can't directly be connected to the Subtract node, so connect it to the Texture 2D Sample node along with the Surface UV Coord 0 node. Now connect that output to the top input of the Subtract node. Connect the output of the Subtract node to the top input of the Add node and select neutral gray as the bottom input. Neutral gray has RGB values of 128, 128, 128. If you were to connect the output of the Add node to the Shader node, you would see a mostly gray image with the fine detail of the original image. Take this gray version and connect it to the top Base input of the Blend node. Connect the output of the Texture 2D Sample to the bottom input and set the blend mode to `Overlay`. Finally, connect the output of the Blend node to the Shader node and the effect is complete!

![Material setup for the finished sharpen effect](/images/tutorials/snapchat-beginner/sharpen/final-material.jpg)

## Final thoughts

This sharpen effect is fairly simple to create and add to your lens. Because we added it as a Post Effect, anything you've added to your scene (images, 3D objects, etc.) will be included in the sharpening effect, provided they are above the Post Effect in the Objects Panel (just make sure the post effect is below everything you want sharpened, but not nested inside them). Due to how the Gaussian Blur node works, you'll start to get banding and ghost images if you increase the blur amount too much. If you stick with values of 0.001 for the Pixel Size on the Gaussian Blur node, you should be fine as long as you stay under a Blur Factor of 4.0.

> Pro tip: If you start with the "Gauss Blur" post effect and modify that instead of creating the blur from scratch, you can avoid the artifacts you get with high blur strengths.

## Further reading

-   [Material Editor](https://lensstudio.snapchat.com/guides/material-editor/introduction-and-concepts/)
-   [Post Effects](https://lensstudio.snapchat.com/guides/2d/post-effect/)


Learn how to add a sharpening or HDR effect to your lenses!

Add a sharpening or "alt" effect to your Snapchat lenses


`youtube:4FZfa_gQBjE`

Do you want to make your own ["Shrek in the Sky"](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=923fb8bd4c924d159d75ce398bb48c51&metadata=01) style filter? If so, you've come to the right place!

## Character setup

To place our character in the world we need to use the World Object Controller script. Don't worry, you don't need to write any code - we just have to import it in the Objects Panel from the "Helper Scripts."

![Importing the World Object Controller](/images/tutorials/snapchat-beginner/character-in-sky/import-controller.jpg)

You'll notice that the World Object Controller script includes an animated Red Panda. Feel free to [replace this with your own 3D character](https://docs.snap.com/lens-studio/references/guides/adding-content/3d/importing-content/overview/), but for the purposes of this tutorial I am going to go ahead and use the example character.

At this point we'll want to change our preview scene. Flip the camera in the Preview Panel and choose the "Beach" preview scene. You'll notice that the panda is locked to the camera and not tracking to the ground. Select the scene Camera, then in the Inspector Panel click on "+ Add Component" and find the "Device Tracking" component. You'll want to keep the tracking mode on "Surface" and you can enable the native [AR option](https://docs.snap.com/lens-studio/references/guides/lens-features/tracking/world/tracking-modes/#using-surface-mode) if you want, though it isn't required. Your character should now be tracked to the ground, but we are also going to select the WorldObjectController in the Objects Panel and then specify the Device Tracking component for the script in the Inspector Panel.

![Specifying the Device Tracking component for the World Object Controller script](/images/tutorials/snapchat-beginner/character-in-sky/device-tracking.jpg)

As a last step you can either disable the "Matte Shadow" object or scale it up to something pretty big like 3,000. Generally with 3D character lenses you want a shadow to help connect your character to the scene, but since we are placing the character in the sky it can be hit or miss. Feel free to turn the shadows on/off to get something you like. If you are using your lens in a flat field the shadows might look really good. If there are buildings, however, the shadow might make everything look flat.

> If you don't see any shadows, select the "Light" object, make sure the light type is directional, then enable the "Shadows" option. The rotation of the directional light will dictate the direction of the shadows. If you imported your own 3D character, select the mesh objects in the Objects Panel and make sure the shadow mode is set to "Caster."

## Placing our character

The astute reader may notice that our 3D character is not positioned correctly to appear in the sky. Select the character - be sure to select the 3D character and not the WorldObjectController - and change the scale. For the panda I used a value of 10. Now we also want to move our character back, so set the Z position to something like -5,000.

Your character should now be gone. Why is that? That's because the camera is only configured to show things less than 1,000 units away. Select the camera and change the "Far" value to something like 50,000 - just make sure it is a larger value than the distance you moved your character.

## Adding sky segmentation

So far we have a giant 3D character, but ultimately we want them only visible in the sky. Start by adding the Sky segmentation texture in the resources panel and also create an Unlit material. Select the material and change the blend mode to "Normal," set the base texture to the device camera texture, and set the opacity texture to the sky segmentation texture.

![Setting up the unit material with sky segmentation](/images/tutorials/snapchat-beginner/character-in-sky/unlit-material-setup.jpg)

Now head back to the Objects Panel and create a Screen Image. Swap out the material on the image for the Unlit material we just modified. I also like to set the stretch mode to "Stretch." You probably won't see anything change in the Preview Panel, and that is because the sky segmentation texture needs to be inverted. Select that texture in the Resources Panel and then enable the "Invert Mask" option and your character will now appear only in the sky!

## Last steps

At this point the lens is complete, but if you want to add something like a post effect I recommend you add a new camera and add your post effect in there. You can't add it to the original camera because of the segmentation.

## Further reading

- [3D Object Import](https://docs.snap.com/lens-studio/references/guides/adding-content/3d/importing-content/overview/)
- [Device Tracking](https://docs.snap.com/lens-studio/references/guides/lens-features/tracking/world/tracking-modes/#device-tracking)
- [Segmentation](https://docs.snap.com/lens-studio/references/templates/face/segmentation/)


Seen the dancing Shrek in the sky filter on Snapchat or TikTok? Learn how to create your own version!

Add a dancing character in the sky


`youtube:E3bQC5jATo0`

In this Lens Studio tutorial you will learn how to create a reduced framerate filter to mimic old fashioned film cameras. You can easily add this effect to any lens and we'll use Lens Studio's new visual scripting editor. You can preview this effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=9bbc641deec14df1a21c9f170b11ce04&metadata=01) or by scanning the snapcode below.

![Snapcode for example lens with a reduced framerate](/images/tutorials/snapchat-beginner/reduced-framerate/snapcode.png)

## Scene setup

Most of our work is going to be done with the visual scripting nodes, but we do need a little bit of scene setup. Start off by creating a new Render Target in the Resources Panel and name it "freeze" or something like that. Then create a new Camera in the Objects Panel, put it on a new layer, and set the camera's render target to the "freeze" render target you just created. Then head to the Scene Config Panel and make sure the "freeze" render target is rendered first. Then select the original camera, change the Clear Color Option to "Texture," and then for the Input select the "freeze" render target. Now if you disable the freeze camera, you will see the image in the preview panel freeze. When a camera is disabled, it outputs the last thing it "saw," so by disabling and enabling the freeze camera we can create our effect.

![Setting up a new camera and render target for our reduced framerate effect in Lens Studio](/images/tutorials/snapchat-beginner/reduced-framerate/scene-setup.jpg)

## Visual scripting

We can create our reduced framerate effect using a regular script, but let's go ahead and use the visual scripting feature of Lens Studio. In the Resources Panel, create a new Script Graph and name it something like "frameFreeze." Our approach will be to enable the freeze camera every "x" number of frames and disable it the rest of the time. Let's get started.

If your Script Graph Editor isn't already open, select the script in the Resources Panel and then click on "Graph Editor" in the Inspector panel. You should see an Initialize node and an UpdateEvent node. We will need both of these, so that's perfect. Let's start by keeping track of which frame we are on. Over on the right hand side of the screen, click on "Add Variable." Name it "count" and change the type to "Number."

![Creating a variable in the Lens Studio Script Graph Editor](/images/tutorials/snapchat-beginner/reduced-framerate/script-variable.jpg)

We want to start this number out at 0 and then increment it each frame. Right click in the graph editor window, select "Add Node," and then search for the "setVariable" node. Select the newly added node and make sure the VariableName is "count" and the value is 0. Then plug the Initialize node into the setVariable node. That is all we need to do with our scene setup.

![Initializing our "count" variable to zero](/images/tutorials/snapchat-beginner/reduced-framerate/initialize-count.jpg)

Now let's work on enabling/disabling the camera. Our script needs to know which camera to work with and how many frames to wait before enabling it. Add a "Camera Input" and a "Number Input" node and give each a good name. Feel free to give the Number Input node a default value of 2 or something. On the Number Input node you can also change the Control Type to "Slider" and specify a min and a max value. Set the Step to 1.00.

![Adding our script inputs](/images/tutorials/snapchat-beginner/reduced-framerate/input-config.jpg)

Our UpdateEvent node will trigger every time Snapchat updates the frame. Now, this is a different framerate than our reduced framerate. Our reduced framerate is only going to be an illusion because we are pausing the camera input, but in reality Snapchat will still be running at ~30 fps. So the UpdateEvent node will trigger approximately 30 times each second. What we need to do is check to see if it is time to enable or disable the camera and then increment our "count" variable. Because we have multiple things to do, let's add a "sequence" node to kick off all of our actions. Connect the UpdateEvent node to the Sequence node. Select the Sequence node and change its count to 3. We want to decide whether or not to disable the camera, increment our count variable, and then I'm also going to print out the current value of "count."

So how do we know when to enable the camera and when to disable it? For that we are going to use the modulo operator which uses the % symbol. The modulo operator gives you the remainder of a whole number division operation. Some examples are: 2 % 2 = 0 and 5 % 3 = 2. We can modulo our count by the frame delay and use that to decide. Here is an example of that using a frame delay of 3:

- Count = 0, 0 % 3 = 0 so the camera is enabled
- Count = 1, 1 % 3 = 1 so the camera is disabled
- Count = 2, 2 % 3 = 2 so the camera is disabled
- Count = 3, 3 % 3 = 0 so the camera is enabled and the frame updates again

Every time our modulo is equal to 0, we will enable the camera. Otherwise we will disable it. Add a "%" node and a "getVariable" node. We will plug our "count" variable into the top input and the frame delay into the bottom input. Next we need to check if that equals 0, so add an "Equals" node and plug the output of the modulo into the first input of that. The Equals node will output a boolean (true/false) value that we can use to enable/disable the camera. Add a "setEnabled" node from the "Component" section (there are multiple setEnabled nodes, so make sure it is for components). Plug the output of the Equals into the "condition" input, the Camera into the "Component" input, and then connect the top output of the Sequence node into the remaining input of the setEnabled node.

![Using the modulo logic to enable and disable the camera](/images/tutorials/snapchat-beginner/reduced-framerate/enable-camera.jpg)

Next I'm going to print the output of the "count" variable so I can make sure it is incrementing correctly. This won't matter for the final lens, but while scripting it can be helpful to print out variables at different times. Add a "print" node, connect the Sequence node to it, and then use the Get count node for the message. You can re-use the existing Get count node or you can create a new one. Also feel free to rearrange your nodes to keep things (somewhat) organized.

![Printing out our count variable](/images/tutorials/snapchat-beginner/reduced-framerate/print-variable.jpg)

Our last step in the script will be to increment our count. We will want to get our count variable, send it to an "Add" node which adds "1" to it, then send that to a "setVariable" node which is triggered by our Sequence node.

![Incrementing our count variable each frame](/images/tutorials/snapchat-beginner/reduced-framerate/increment-count.jpg)

You might have noticed that our setEnabled, print, and setVariable nodes have that little triangle output slot on them. Rather than use the Sequence node, we could have chained everything together in one long line. I just used the Sequence node to keep things organized a little differently.

## Add the script to the scene

Select your main camera (not the freeze camera) and add a Script Component in the Inspector Panel. Choose the freezeFrame script and then specify the script inputs. You will see an error in the logger until you select the freeze camera, but then you should start to see the count variable being printed out. If you increase the frame delay input, the preview video will get more stuttery.

## Troubleshooting

If your effect is not working, here are a few things to check.

- Make sure you've saved everything and reset the lens
- Make sure all your nodes are connected correctly and have the right values for the input
- Make sure you did not add your script to the freeze cam. Once the freeze cam is disabled, any scripts added to it will also be disabled.
- Make sure you've specified the camera input for the script after you've added it to the scene

If you are still having issues, head over to the [Lens Studio forum](https://support.lensstudio.snapchat.com/hc/en-us/community/topics) and ask away! Be sure to include a description of what is actually happening, what you expect should be happening, and then screenshots of your scene setup and your scripting nodes.

## Further reading

- [Visual Scripting](https://lensstudio.snapchat.com/guides/visual-scripting/)
- [Cameras, Layers, Render Targets](https://lensstudio.snapchat.com/guides/general/camera/)


In this Lens Studio tutorial you will learn how to create a reduced framerate filter to mimic old fashioned film cameras. You can easily add this effect to any lens and we will use the new visual scripting editor in Lens Studio.

Create a reduced framerate effect in Lens Studio using the visual script editor


## Documentation

The Lens Studio team has done a great job of documenting Lens Studio. They've created a ton of [useful guides](https://lensstudio.snapchat.com/guides/) that walk you through various types of lenses.

If you are scripting, the [API docs](https://lensstudio.snapchat.com/api/) will be your new best friend. Everything is documented, so sometimes the tricky part is figuring out what that thing you need is called.

## Forum

If you have any specific questions, take a [look at the forum](https://support.lensstudio.snapchat.com/hc/en-us/community/topics) and see if anyone's already asked your question. If not, ask away! The Lens Studio team monitors the forum, but the community of lens creators is also super helpful and will often provide an answer before the LS team.


Need more help? There are lots of great places to turn to.

Beginner Lens Studio