
`youtube:io169bOkqL0`

Lens Studio does a really good job of setting things up behind the scenes so that you can focus on your lens. However, some effects will require you to manually create and adjust cameras, layers, and render targets. You can see an example lens using multiple, distinct post effects by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=7680a48d4b1745a8b4f5b1b80bb7ce3c&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with multiple post effects](/images/tutorials/snapchat-intermediate/multiple-post-effects/snapcode.png)

## Introduction

Lens Studio does a really good job of setting things up behind the scenes so that you can focus on your lens. However, some effects will require you to manually create and adjust cameras, layers, and render targets. If you want to use two different color corrections or have two distinct sets of effects, the best way to do this is with multiple render targets.

## WTF are cameras, layers, and render targets?

As you've created lenses, you've probably noticed that each lens always starts with a camera. If you add 2D overlays like grain, then Lens Studio adds an orthographic camera for you. Usually that is all you need and you never need to worry about camera, layers, or render targets. But if you want to include multiple, separate post effects, we'll need to dive in a little deeper.

You can think of a camera as an information collector, layers as the information being collected, and render targets as the recipients of the information. Every object in your scene is assigned to a layer. 3D objects are automatically assigned to the "Default" layer and 2D elements are assigned to the "Orthographic" layer. But you can also create your own layers and assign each element to whichever layer you want. Each camera can be assigned to look at one or more layers. This is all handled automatically, but you can customize it. The camera that every project starts with is looking at the Default layer and the orthographic camera looks at the orthographic layer. The camera look at their layers, figure out how to draw the scene, and then output all that information to a render target. Again, this is all setup automatically when you create a new project, but you can create multiple render targets and assign different cameras to output to different render targets.

## Scene setup overview

The nice thing about render targets is that they are image textures. This means that you can take a render target and display it as a screen image. This means that for each effect we can create a camera, a layer, and a corresponding render target. Then, we'll create a final camera to put everything together. This allows us to keep our multiple effects completely separate while we are creating them, but then combine them for the final lens. Let's walk through exactly how to do that.

## Setting up the effect cameras

Before we get started, I want you to keep in mind that Lens Studio will often add new post effects and color corrections to the default camera and default layer. Every time you add something new to the scene, you will need to check which camera it is added to and double check the layer.

For the effect I am going to be building here, I want to have a slightly blurry, black and white background with a smaller view of the camera overlayed over the top with a color correction. To do this I will need a total of three cameras - one for the blurry, B&W background, one for the color correction for the overlay, and one to combine the two effects together. Each camera will also have its own layer and render target.

Let's start with the blurry B&W effect first. Start out in the Resources Panel by creating a new Render Target and naming it "BW." Then head up to the Objects Panel, create a new camera, and name it "BW Cam." Over in the Inspector Panel, click on the render target box and change that to the BW render target you just created. Then click on the Layers box, add a new layer, rename it to "BW Layer," click on it to select it, and then deselect the Default Layer. You can also click the little colored circle to change the label color for the layer.

![Setting our camera to a new layer](/images/tutorials/snapchat-intermediate/multiple-post-effects/new-layer.jpg)

Now that we have our new camera and layer, let's start adding some post effects! I'm going to add the "Gauss Blur" post effect and the "BW" color correction. You should see the two effects working in the Preview Panel, but if you look in the Objects Panel you'll see that both effects were added to the original camera! Drag the "Effects" scene object to the BW Cam and then select each post effect and change the layer in the Inspector Panel.

![Changing the layer of a post effect in Lens Studio](/images/tutorials/snapchat-intermediate/multiple-post-effects/changing-effect-layer.jpg)

After you change the post effect layers, you'll notice that our effect is no longer visible in the Preview Panel! This is what we want, but it makes it hard to adjust our effect! In the Resources Panel, there is a tab called "Scene Config" - head over to that tab. Here you will see Capture, Live, and Overlay Targets along with a list of all the render targets in our scene. The Capture Target is what the final recorded Snap will be, the Live Target is what is visible to the user (useful if you want to include a user interface but hide it in the final product), and the Overlay Target is intended for the new AR-enabled Spectacles 4. If you click on the Live Target box, you can select the BW render target and the Preview Panel will update! As we are creating our separate render targets, we can swap out the Live Target to fine tune each individual effect before setting it back to the original Render Target. As far as the Render Order goes, let's keep the Render Target at the bottom because that is we will be sending our final effect. You can click the three little dots on the left and drag to reorder the render targets. Now that we can see our blurry B&W effect again, adjust it to your liking.

Now for my second effect, I am going to follow the same steps: new render target, new camera, new layer, move my post effects to the new camera/layer, reorder the render targets, switch the Live Target to adjust the effect.

## Bringing it all together

Okay, head into your Scene Config and set the Live Target back to the original render target. In the Objects Panel, add a new Screen Image. This will also create an Orthographic Camera for us and it will already be outputting to the original render target. If you want, you can also delete the original, default camera in the scene.

Select the Screen Image and choose the BW render target as the texture. The Stretch Mode of "Fit" should be fine, but I'm a little paranoid so I set mine to "Stretch" just to be safe (the render target is the same size as the screen, so in theory the image should be filling the whole screen already). For my overlay I am going to duplicate the screen image, change the texture to my other render target, and then scale the image down a bit. On this resized image I don't want to use a "Stretch" fill mode - I'm going to go with "Fit."

## Further reading

- [Camera, Render Targets, & Layers](https://lensstudio.snapchat.com/guides/general/camera/)


Lens Studio does a really good job of setting things up behind the scenes so that you can focus on your lens. However, some effects will require you to manually create and adjust cameras, layers, and render targets.

Multiple post effects in your Snapchat Lenses


`youtube:9G-8BKX45Zc`

## Introduction

Lens Studio has some pretty nifty segmentation textures that let you mask out the background, a person, or parts of a person (face, hair, clothing, etc). But what if you want to combine two of those segmentation textures? Let's say the upper garment and lower garment segmentation textures? Fortunately there is a way using render targets and layers.

## Scene setup

Let's start in the Resources Panel. Go ahead and add the segmentation textures you want to use. For this tutorial I'll be combining the upper and lower garment segmentation textures (there is full garment segmentation, but this serves as a good example). Next create a new Render Target and name it "Mask." Now go into your Scene Config and change the Live Target to your new Mask render target. Nothing will change in the Preview Panel, so let's add a new camera to the scene.

In the Objects Panel, add a new camera. Create a new layer for it named "mask" and set the render target to our new mask render target. Change the camera type to "Orthographic" and while not strictly necessary, I like to change the clear color option to "Color" and set it to black. Now add a couple screen images to the camera and change their layer from "orthographic" to "mask."

## Combining the segmentation textures

Now that we have our screen images, let's compose our segmentation textures into a composite mask. Set the texture of one of the images to the upper garment segmentation and the other to the lower. In the Preview Panel you'll only see one of the masks active. All we need to do now is change the Blend Mode of the bottom-most image in the scene hierarchy to "Add." Black pixels have a value of 0 and white pixels have a value of 1. By adding our second image to the first we combine the two segmentation textures.

> You can also subtract segmentation textures in the case of overlapping masks (e.g. full body and lower garment). Instead of using the "Add" blend mode, use "Difference."

## Wrapping things up

Once you are happy with the mask, set the Live Target in your Scene Config back to what you had before. You can now use the mask render target anywhere you would use an opacity texture!

## Further reading

- [Camera, Render Targets, & Layers](https://docs.snap.com/lens-studio/references/guides/lens-features/scene-set-up/camera/)
- [Segmentation](https://docs.snap.com/lens-studio/references/templates/face/segmentation/)


Learn how to combine two different segmentation textures into one unified mask.

Combine segmentation textures in Lens Studio


`youtube:2CM9OhlD6Ik`

If you have spent any time at all on Snapchat Spotlight, then you have seen the [Screen Scanner Pro](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=9254193def06435bb9731a174ead43ab&metadata=01)/Time Warp/Slit Scan lens in action. This seemingly advanced lens is actually super easy to make, you just need to make one small tweak. We'll go over everything you need to know in this Lens Studio tutorial. You can see an example of this by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=154cf2dfd5c4494ea5ae26fa30a835f7&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with 3D text](/images/tutorials/snapchat-intermediate/time-warp/snapcode.png)

## Introduction

Most of our time will be spent setting up our scene. Once everything is set up, we literally have to change one single option to make this effect work. Let's go!

## Create the mask camera

A key component of the time warp effect is our mask. The mask will determine where and how strongly our time warp is applied.

- Create a new Render Target and name it Mask
- Create a new Camera name it "Mask" or something descriptive
- Change the camera type to Orthographic
- Set the camera to a new layer (also named "Mask")

Now that you have the camera, we need to create some sort of mask. We are going to be applying this mask to a material later; white will let our material show and black will hide it. You can import a custom image sequence or video, but for this tutorial I'm just going to create my own mask inside Lens Studio using a couple screen images.

- Create a new Screen Image, set it to the Mask layer, and rename to "white"
- Change the Stretch Mode to your liking (I went with Stretch)
- Use a plain white image for the texture
- Duplicate the screen image and rename it to "black"
- Use a plain black image for the texture on the duplicate

You should see nothing in the preview panel because we are outputting all of this to a separate render target. If you want to see your mask, head to the Scene Config and change the Live Target to the Mask render target. While we're here, drag the Mask render target to be rendered first (before the default Render Target).

![Setting up the mask camera](/images/tutorials/snapchat-intermediate/time-warp/mask-setup.jpg)

So far this is pretty boring, so let's add some motion to our mask. In the Objects Panel, add a Tween Manager from the Helper Scripts menu. Delete everything that's nested under the Tween Manager and then move the Tween Manager itself to the top of the scene. Select the black screen image and add a script component. For the script, find and select the "TweenScreenTransform" and adjust the settings as desired. Here is how I setup mine.

![Setting up the tween for the mask](/images/tutorials/snapchat-intermediate/time-warp/tween-settings.jpg)

Now that we see our mask is doing something, return to the Scene Config and change the Live Target back to the default Render Target.

## Create the output image

Deselect everything in the Objects Panel and create a new Screen Image (I renamed mine to Output). This should create a new Orthographic camera as well. Now in the Resources Panel create an Unlit Material, change the blend mode from "Disabled" to "Normal," and enable the Opacity Texture. Select your new screen image and swap out its material for this new unlit material. Set the Texture of the screen image to the Device Camera Texture and for the Opacity Texture select the Mask render target. I also changed my Stretch Mode to Stretch because I'm paranoid like that.

## The time warp

So far this is all super underwhelming. We've done a lot of work and are yet to see any sort of time warp going on. Not to worry, we are ready to activate it! Select the default Render Target in the Resources Panel and change the Clear Color to "None." That's it. Simple. If you look in the Preview panel, you'll see your time warp effect working and reversing as your mask texture changes. If it's hard to see anything happening, choose a preview with more movement (I chose the "Dance" video).

## Tracers or motion blur effect

Ben Knutson (another lens creator) has a [neat little tutorial](https://www.youtube.com/watch?v=ojo-H675MA8) on creating a tracers or slow-mo effect using two separate render targets. We can create the same sort of effect with our setup, but with our method we actually get some control over the strength of the effect. Turn off the tween on the black screen image and instead play with the Alpha value. A low alpha will give a mild effect, while a value closer to one will give a more pronounced effect. Need to add some motion blur to your lens? Now you have it!

## How it works

So how does this effect work anyway? When Lens Studio (or Snapchat in the case of the published lens) is rendering each frame, it needs something to start with. Usually when changing the clear color, you are dealing with the clear color option on your various cameras. For example, maybe you have a separate render target to hold UI elements. On the UI camera, you would have your main render target act as the input texture. This would lead to your UI being drawn on top of your effect. But in this case we changed the clear color option for the render target itself, not the camera. The clear color option for the render targets acts the same way as for the cameras. When "None" is selected for the camera, it grabs whatever is defined on the render target. The default setting for render targets is "Background" which is the Device Camera Texture. So every time the frame is updated, we start with what the camera sees and we layer our effects on top of that. But when we select "None" for the render target, we grab whatever already exists on screen and draw over that.

So let's return to the time warp effect. We start with a completely white mask which means on our output screen image we see the entire thing - aka the Device Camera Texture. Now on the next frame the black screen image has entered the scene. This portion of the screen is not updated with the current frame of the Device Camera Texture because of the mask. Since our clear color option on the render target is set to None, that part of the screen is not updated; it reuses what was there before. As we slide the black screen image down the screen, the same process repeats and we end up with the time warp effect.

## Further reading

- [Camera, Render Targets, & Layers](https://lensstudio.snapchat.com/guides/general/camera/)


If you have spent any time at all on Snapchat Spotlight, then you have seen the Screen Scanner Pro/Time Warp/Slit Scan lens in action. This seemingly advanced lens is actually super easy to make, you just need to make one small tweak.

Create the Time Warp effect in Lens Studio


`youtube:A2J0Ruf9cHw`

In this tutorial we'll go over how to create 3D text inside of Lens Studio. You can see an example of this by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=e8090cbca14843d2875638c04fc605b9&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with 3D text](/images/tutorials/snapchat-intermediate/3d-text/snapcode.png)

## Inspiration

I came across [ztext.js](https://bennettfeely.com/ztext/) the other day and thought it was pretty cool. I noticed that the illusion of depth comes from duplicating the text many times and offsetting the layers. With enough layers, it all runs together and looks continuous. Since Lens Studio doesn't have any actual 3D text, we can use the same technique of multiple layers to fake the effect.

## Setting up the scene

### Scene Objects

For this effect we are going to start with a blank project. In the [Objects Panel](https://lensstudio.snapchat.com/guides/general/panels/), add a Face Image and then delete the 'Look At' component in the Inspector Panel. The Look At component keeps the image facing the camera square-on, but in our case that will mask our eventual 3D effect.

### Scene Resources

Now let's head on down to the Resources Panel. We need to add the following items:

- `Text Texture` - This is the source of the text that we are going to be using. Usually when working with text we either add a Text object or Screen Text in the Objects Panel, but for this we want to use a texture because this will let us apply different materials to it. Go ahead and put some placeholder text in here for now.
- `Main Material` - This is going to the material for the face of our text. You can use whichever material you want. To keep things simple, you can start out with just an Unlit material and modify or replace it later.
- `Shadow Material` - This is going to be the material that lies behind the face of our text and gets applied to each of our layers making up the effect. I recommend using just an Unlit material for this.
- `Script` - Create a new script and name it whatever you want. Our script will be reusable in other projects, so some sort of name like 'text3D' or something might be a good idea.
- `Font` - This is optional, but go ahead and load in a custom font if you want. Lens Studio has a few built-in fonts, or you can download and import a font of your choice. For this tutorial I am going to use the 'Pacifico' font which is built-in and can be imported directly through the Resources Panel.

## Scripting

> There are multiple ways to accomplish what we want to do. This method is what works best for me.

### The inputs

To make our script reusable and customizable, we need a few inputs.

- `SceneObject parent` - This is the parent object that all our layers will live under.
- `SceneObject textImage` - This is going to be the image which has our text applied to it and will be the base for the effect.
- `Asset.Texture textTexture` - Though not strictly required for 3D text, by providing the Text Texture as input we can dynamically change what our text reads.
- `float offset = 0.02` - The spacing between the layers. We'll default to a value of 0.02 which gives pretty smooth results.
- `int numLayers = 50` - How many layers we want to use for the effect. I've found that 50 layers gives a pretty good feeling of depth, but feel free to adjust to your preferences.
- `Asset.Material shadowMat` - We are going to give our Face Image our Main material, but then apply our Shadow material to each of the layers. This helps differentiate between the front face of the text and our layers.
- `bool autoUpdate` - This is just a flag we can toggle on/off while setting up our scene. When we publish our lens we'll want to turn this off.

Your script should so far look like this:

```javascript
// -----JS CODE-----
// @input SceneObject parent
// @input SceneObject textImage
// @input Asset.Texture textTexture
// @input float offset = 0.02
// @input int numLayers = 50
// @input Asset.Material shadowMat
// @input bool autoUpdate
```

### Initializing the layers

Our first order of business will be to create the different layers. We are going to iterate through the number of layers we specify in our script input, copy the Face Image, change the material, and then save it to an array. This block of code will look like the following:

```javascript
var instances = [];

function init() {
  for (var i = 0; i < script.numLayers; i++) {
    var newObj = script.parent.copySceneObject(script.textImage);
    var imgComp = newObj.getComponent("Component.Image");
    imgComp.mainMaterial = script.shadowMat;
    instances.push(newObj);
  }
}
```

### Offsetting the layers

Now that we have our layers created, we need to offset them. For this step we'll take our instances and then offset them by a small amount behind our Face Image. We are also going to make sure we set their scales, but this is only needed for the autoUpdate flag. In our line of code were we shift the z position, you'll notice that we add 1 to the index. This is to make sure our first layer does not lie on top of our original Face Image.

```javascript
function position() {
  for (var i = 0; i < instances.length; i++) {
    var newObj = instances[i];
    var transform = script.textImage.getTransform();
    var pos = transform.getLocalPosition();
    pos.z = pos.z - (i + 1) * script.offset;
    newObj.getTransform().setLocalPosition(pos);
    newObj.getTransform().setLocalScale(transform.getLocalScale());
  }
}
```

### Adding the auto update

We only need to create our layers once when the lens is turned on. However, while editing our lens, it will be helpful to have our 3D effect update as we move and scale our Face Image. For that, we just add an "UpdateEvent" and call our `position` function if the flag is enabled. When you are ready to publish your lens, just turn off the autoUpdate flag. If you forget it won't be the end of the world, but depending on how many other scripts you are running you might start noticing an impact. We'll also go ahead and make our function calls to init() and position() when our script runs.

```javascript
script.createEvent("UpdateEvent").bind(function () {
  if (script.autoUpdate) {
    position();
  }
});

init();
position();
```

### Customizing the text

Last, but not least, let's take a look at how to programmatically set the text value on the Text Texture. If we were using a Text Component, we would just have to assign our text to the `text` property, but since this is a Text Texture, the `text` property is found inside the `control` property. For this example I'm going to pull the user's display name from the [UserContextSystem](https://lensstudio.snapchat.com/api/classes/UserContextSystem/) and use that for our text value.

```javascript
global.userContextSystem.requestDisplayName(function (displayName) {
  print("Hello " + displayName);
  script.textTexture.control.text = displayName;
});
```

### The finished script

Here is our finished script.

```javascript
// -----JS CODE-----
// @input SceneObject parent
// @input SceneObject textImage
// @input Asset.Texture textTexture
// @input float offset = 0.02
// @input int numLayers = 50
// @input Asset.Material shadowMat
// @input bool autoUpdate

var instances = [];

function init() {
  for (var i = 0; i < script.numLayers; i++) {
    var newObj = script.parent.copySceneObject(script.textImage);
    var imgComp = newObj.getComponent("Component.Image");
    imgComp.mainMaterial = script.shadowMat;
    instances.push(newObj);
  }
}

function position() {
  for (var i = 0; i < instances.length; i++) {
    var newObj = instances[i];
    var transform = script.textImage.getTransform();
    var pos = transform.getLocalPosition();
    pos.z = pos.z - (i + 1) * script.offset;
    newObj.getTransform().setLocalPosition(pos);
    newObj.getTransform().setLocalScale(transform.getLocalScale());
  }
}

script.createEvent("UpdateEvent").bind(function () {
  if (script.autoUpdate) {
    position();
  }
});

init();
position();

global.userContextSystem.requestDisplayName(function (displayName) {
  print("Hello " + displayName);
  script.textTexture.control.text = displayName;
  // The display name inside of Lens Studio is 'Snap User'
  // but Snapchat doesn't like the word 'Snap' appearing
  // in previews. Uncomment the following line, create your
  // preview, and then comment it back out.
  // script.textTexture.control.text = 'My Name'
});
```

## Configuring your scene

Now that our script is ready, let's get it added to our scene!

### Setup the Text Texture

All you need to do here is set the font and text (if you aren't setting it programmatically) in the Inspector Panel. Leave the color as white because we'll be setting the color on the material.

### Setup the materials

For both the Main and Shadow materials, set the blend mode to `Alpha Test` and the Base Texture to the Text Texture. Choose a base color for the Main material and then a darker version of the same color for the Shadow material. Most of the other settings won't matter for the Shadow material, but feel free to add specular lighting to the Main material if you want. You can also turn on Tone Mapping if you want the material to match your camera lighting a little better.

### Setup the Face Image

Now head on up to the Objects Panel and select the Face Image. Set the material to the Main material you created and you should be good to go. If you just see a solid color, try switching the blend mode between Normal and Alpha Test. Once it looks fine you should be good.

### Add the script

You can add the script to whichever Scene Object you like. I like to add mine to the camera. Once you've added your script, fill in the parameters:

- Head Binding as the Parent
- Face Image as the Text Image
- Text Texture as the Text Texture
- You can adjust the Offset and Num Layers as you see fit
- Shadow material for the Shadow Mat

At this point you should be seeing your 3D text! If not, make sure there aren't any errors in your script.

## Further reading

- [ztext](https://bennettfeely.com/ztext/)
- [Images](https://lensstudio.snapchat.com/guides/2d/image/)
- [Panels](https://lensstudio.snapchat.com/guides/general/panels/)
- [Materials](https://lensstudio.snapchat.com/guides/3d/materials/)
- [UserContextSystem](https://lensstudio.snapchat.com/api/classes/UserContextSystem/)
- [Scripting](https://lensstudio.snapchat.com/guides/scripting/scripting-overview/)
- [Lens Studio API](https://lensstudio.snapchat.com/api/)


Lens Studio does not have native 3D text, but we can still fake the effect with some pretty convincing results! Learn how to use the Text Texture resource and a little scripting to create this effect!

Create customizable 3D text in Lens Studio


`youtube:2MV5IUsXOQY`

In this tutorial we'll go over how to control an object's rotation using facial expressions. We'll use the face expressions API to get an expression weight (e.g. how open someone's mouth is) and then drive the rotation of a separate object (e.g. the rotation of a jaw bone).

## Scene setup

I am starting out with a rigged 3D skull that I imported, so make sure you have some sort of 3D object to work with. It has a single bone that controls the jaw rotation and that is what I want to control via the user's face expressions.

In addition to your 3D object, you will also need to add a Face Mesh in the Objects Panel and also a Script in the Resources Panel. Once you've created your script go ahead and add it to your scene. The Face Mesh comes with a default material that you probably won't want visible in your final lens; leave it for now, we'll come back to it later.

![Setting up our scene in Lens Studio to control an object's rotation via a face expression](/images/tutorials/snapchat-intermediate/link-to-expressions/scene-setup.jpg)

## Getting the expression weight

Open up your script for editing and let's get started! This will be a pretty straightforward script. First we need to import the face mesh as a RenderMeshVisual and our target object that we want to rotate.

```javascript
// @input Component.RenderMeshVisual faceMesh
// @input SceneObject target
```

To access the face expressions, we need to access `mesh.control` on the face mesh and then grab the weight of the expression we want. The weights range from 0-1 and a full list of the expressions Lens Studio supports can be [found here](https://lensstudio.snapchat.com/api/classes/Expressions/). In my case I want to access the `JawOpen` weight to control the jaw bone on my skull model. I'm also going to print out the weight to check and make sure it is working. Once you add the following code and save the script, you might notice an error in the Logger. That is because we are missing the script inputs. Select the script in the Objects Panel and choose the face mesh and your target object for the input parameters. Also change "On Awake" to "Frame Updated" for when the script should run. You should now see some values being printed in the Logger Panel (make sure you also choose an "open mouth" preview video).

```javascript
// @input Component.RenderMeshVisual faceMesh
// @input SceneObject target

var weight = script.faceMesh.mesh.control.getExpressionWeightByName(
  Expressions.JawOpen
);
print(weight);
```

## Hiding the face mesh

Now that we are getting the expression weights, let's hide the face mesh so it is not visible. We can't delete it because we are getting the expression weight from it, but we don't want it visible in our effect. A great way to hide things from view is to put them on a layer that the camera is not rendering. However, if you put the face mesh on a new layer, the weight value in the logger will stop updating - it gets stuck on the last value. For whatever reason, we can only access the expression weights if the face mesh is actually rendered to the scene.

Just to avoid any potential issues down the road, I am going to leave the face mesh on its own layer. However, I am going to select the camera and add the face mesh layer to it. Next I am going to select the face mesh's material and change the alpha channel on the base color to 0 to make it fully transparent. Now we are getting our expression weight again and the face mesh is hidden.

## Rotating our target object

Let's get our target object rotating. Our plan of action is to change the local rotation because the world rotation is being controlled by the head binding.

First up is to map the 0-1 weight value to the rotation range for our target object. If I select the jaw bone, it's current x rotation is -138 degrees. If I rotate it so the mouth is open, it is about -115 degrees. I'll take the difference of those two values, multiply them by the weight, and then add the minimum value to get the proper mapping. Next I need to map degrees to radians and I'll also grab the original rotation values so that we maintain the existing y and z rotations. Then I'll set the rotation of my target object. It might be a bit easier to follow looking at the below code.

```javascript
// @input Component.RenderMeshVisual faceMesh
// @input SceneObject target

var rotMin = -138;
var rotMax = -115;

var weight = script.faceMesh.mesh.control.getExpressionWeightByName(
  Expressions.JawOpen
);
print(weight);

var rotationDegrees = (rotMax - rotMin) * weight + rotMin;
var rotationRadians = (rotationDegrees * Math.PI) / 180;
var originalRotation = script.target
  .getTransform()
  .getLocalRotation()
  .toEulerAngles();
script.target
  .getTransform()
  .setLocalRotation(
    quat.fromEulerAngles(
      rotationRadians,
      originalRotation.y,
      originalRotation.z
    )
  );
```

## In closing

Once you add the above code, your script is finished! Feel free to adjust the `rotMin` and `rotMax` values to match your own object and desired preferences. Getting the expression weight is probably the simplest part of the whole process; it's getting the weight mapped to your desired range that might take a little work.

You are also not limited to just rotating objects - you can control positions, scales, and material parameters just to name a few. Happy creating!

## Further reading

- [Available Face Expressions](https://lensstudio.snapchat.com/api/classes/Expressions/)
- [Scripting](https://lensstudio.snapchat.com/guides/scripting/scripting-overview/)
- [Lens Studio API](https://lensstudio.snapchat.com/api/)


In this tutorial we'll go over how to control an object's rotation using facial expressions. We'll use the face expressions API to get an expression weight (e.g. how open someone's mouth is) and then drive the rotation of a separate object (e.g. the rotation of a jaw bone).

Link an object's rotation to a facial expression


`youtube:2LHhuZPZP9o`

In this tutorial we'll go over how to create a tritone material inside Lens Studio. This material will be configurable, reusable, and will provide a brief introduction to the power of the material editor. You can see an example of this by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=7cabec2528b14541af005f09caa4ba83&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with 3D text](/images/tutorials/snapchat-intermediate/tritone-material/snapcode.png)

## Setting up the scene

Add a Graph Unlit material in the Resources Panel and rename it "Tritone" or whatever suits your fancy. We'll also need something to preview our material on, so add a [Screen Image](https://lensstudio.snapchat.com/guides/2d/image/) in the Objects panel, set the stretch mode to `Stretch`, set the material to the new Graph Unlit material you just created, and set the texture to the `Device Camera Texture`.

## Creating the material

Select your tritone material in the Resources Panel and open up the [Material Editor](https://lensstudio.snapchat.com/guides/material-editor/welcome-to-material-editor/). If the Material Editor is not visible, go to Window -> Panels -> Material Editor. Go ahead and delete the `Float Parameter` and `Scale Coords` nodes and connect the `Surface UV Coord 0` to the `Texture 2D Parameter`.

To create the tritone effect we need a way to map portions of our image to three distinct ranges. Start by adding a `Luminance` node between the `Texture 2D Parameter` and `Shader` nodes. You should now see a grayscale image in the preview panel. The output of the this node is in the range 0-1 where 0 is black and 1 is white. This is what we'll be using for our three ranges.

![Adding the Luminance node](/images/tutorials/snapchat-intermediate/tritone-material/add-luminance.jpg)

## Creating the first split

Now that we have the grayscale version of our input texture we can start to split it into ranges. There are two parts to this process - 1) determine if the luminance falls within a particular range and 2) make a decision based on the result of that check. Let's start with our "highlight" range. Add an `Is Greater or Equal` node and connect the `Luminance` into the top input. Rather than set our threshold value directly on the node, we are going to add a `Float Parameter` to connect to the bottom input. I set the title on mine as "Highlight Threshold." The reason we are using a `Float Parameter` node is to allow us to change this threshold on the material settings without having to open the material editor every time.

Next add an `If/else` node and connect the output of the `Is Greater or Equal` node to the top input. Create a `Color Parameter` node, give it a title (e.g. "Highlight") and connect it to the middle input of the `If/else`. Now take the output of the `If/else` node and connect it to the 'Color' input of the `Shader` node. The preview panel should turn completely white, so now select your material in the Resources Panel and change the 'Highlight Threshold' in the Inspector Panel. A value of 0.5 is a good starting point. Now in the preview panel you should see a two-toned image.

> I moved my Inspector Panel to occupy the space of the Objects Panel. This gives me a little more room in the Material Editor. You can click and drag on the title of any panel to move it. If you mess something up or want to quickly revert the interface, go to Window -> panels -> Default Layout.

![Creating the first color threshold](/images/tutorials/snapchat-intermediate/tritone-material/duotone.jpg)

![Closeup of the current material setup](/images/tutorials/snapchat-intermediate/tritone-material/duotone-shader.jpg)

## Creating the second split

So for our first color split we only had to check to see if our luminance was greater than or equal to some value. We did not have to specify an upper bound because the luminance value won't go above 1, so in this particular case anything between 0.5 - 1.0 gets our highlight color. Now that we are moving on to the midtones, we will have to specify both the upper and lower bounds.

What we are going to do here is create a new `Float Parameter` node for our "Midtone Threshold" and two `Color Parameter` nodes for our "Midtone" and "Shadow" colors. For our midtones, we need to check to make sure the luminance value is both less than our highlight threshold and also greater than or equal to our midtone threshold. If both those conditions are true, we'll use the midtone color, otherwise we'll use the shadow color. And when that is all said and done, the output of that check will become our new "else" choice for our original `If/else` node. The below image shows the final setup, and the [video version of this tutorial](https://youtu.be/2LHhuZPZP9o) walks through the whole process step-by-step.

![Tritone shader conditions](/images/tutorials/snapchat-intermediate/tritone-material/tritone.jpg)

Once the material nodes are setup, you'll probably see something funky in the Preview Panel again. Choose your Midtone and Shadow colors in the Inspector Panel and set a Midtone Threshold. I went with a value of 0.3. Now you should be seeing your tritone effect.

## Including other elements

So far we've been using the Device Camera Texture as our input for the tritone effect. If there is nothing else going on in your scene, this works great. However, if you add any sort of image or object, it won't show up because we are using the raw image that the camera sees as our input to the material. We can fix this two different ways

### Using a Screen Texture

In the Resources Panel add a Screen Texture and set that as the Base Texture on the tritone material. Why does this work? The Screen Texture grabs everything else going on in the scene and includes it on top of the Device Camera Texture. Now if you have some sort of 3D object attached to the user's head, it will be included in the tritone effect.

### Using a Post Effect

Another alternative would be to delete our Orthographic Camera and Screen Image and instead add a Post Effect. It can be anything, just go with a Color Correction. Select the Post Effect in the Objects Panel, and then over in the Inspector Panel choose your tritone material for the Post Effect material (you also might need to set the texture to a Screen Texture). This also has the end result of including any other scene objects in the effect because now our tritone material is being applied as a **_post_** effect.

## Finishing up

With just a few nodes in the material editor we were able to create a configurable and reusable tritone material. Explaining node setups can get a little confusing in text form, so be sure to watch the video for perhaps a more clear explanation of what to add and how to connect it all. You can export the material by right-clicking on it in the Resources Panel and choosing the Export option. Then it is simply a matter of importing and choosing your colors and thresholds if you want to use it in another project.

## Further reading

- [Panels](https://lensstudio.snapchat.com/guides/general/panels/)
- [Material Editor](https://lensstudio.snapchat.com/guides/material-editor/welcome-to-material-editor/)
- [Screen Texture](https://lensstudio.snapchat.com/guides/material-editor/screen-texture-provider/)
- [Post Effect](https://lensstudio.snapchat.com/guides/2d/post-effect/)


Learn how to create your very own reusable and configurable tritone material in Lens Studio! Use it to convert any lens to only three colors.

Tritone material in Lens Studio


`youtube:fNXe-QrMJU4`

In this tutorial we'll go over how to create a stencil effect in Lens Studio. You'll learn how to overlay a simplified version of the user on top of the background of your choosing. You can see an example of this by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=7ad78e067e9f440a9f46a06b4a7af82b&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with a stencil effect](/images/tutorials/snapchat-intermediate/stencil-effect/snapcode.png)

## The approach

Our scene is going to consist of two main parts - the background and the foreground. We'll setup a separate camera and render target for the background to give us a little more control over things. Then we'll use the [Material Editor](https://lensstudio.snapchat.com/guides/material-editor/welcome-to-material-editor/) to create the stencil look and overlay it on the background.

## Setting up the background

The first thing we need are some images for the background. In the past I've used brick, concrete, and wood, but feel free to use whatever you want. You want something that would look cool with the stencil effect on top of it, so don't use images that have too much going on. For this tutorial I am going to use some images of paper that I got from [Pixabay](https://pixabay.com). Once you have some images, load them into Lens Studio.

Next create a new [Render Target](https://lensstudio.snapchat.com/guides/general/camera/) and name it 'Background.' Once you have that, create a new camera, put it on a new layer (potentially not strictly necessary, but I like to keep things organized), set the Render Target to the Background target you just created, and set the Camera Type to 'Orthographic.' Now add a Screen Image and make sure it is a child of this new camera and on the same layer. As it stands, we won't see anything going on in the Preview Panel because everything we just added is outputting to a non-visible render target. Just so that we can see what is going on, go to the Scene Config and select the Background render target for the Live Target (we'll switch this back in a bit). Now you should see a placeholder image for the Screen Image you added.

You can of course create this stencil effect with a single background, but I like to include several for the user to cycle through. This does require some scripting, but fortunately my [Virtual Background tutorial](https://arbootcamp.com/snapchat-beginner/virtual-background) covers that and we can just reuse the script from it. It's nothing fancy, but much easier to just copy-paste than to write from scratch. Here is the 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");
});
```

Create a new Script, copy and paste the code, then add it to your scene (either as a new object or you can attach it to something like the camera you added for the background). Once you've added the Script Component, select the Screen Image for the Background parameter of the script and your images for the Images parameter. You should now be able to tap/click and cycle through the images. Your images probably won't be filling the whole screen, so select the Screen Image and change the Stretch Mode to "Fill." Now that everything looks good with the background, go back to the Scene Config and change the Live Target back to the original Render Target. Also while we're here, move the Background render target to be first in the Render Order.

## Creating the stencil material

Now it is time to create our stencil effect. In the Objects Panel, create a new Screen Image (I also changed the fill mode to "Stretch" for it). This should create a new Orthographic Camera with your new Screen Image as a child. Now in the Resources Panel, create a new "Graph Empty" material, set the new Screen Image material to this new material, and then open the material in the Material Editor. All you should see is just a single "Shader" node.

Our approach here is going to be taking some input image (in our case the Device Camera Texture), turning it into a simple black and white version of itself, and then layering it on top of our background that we previously setup. To do all this, I am going to use a similar approach as in [my Tritone Material](https://arbootcamp.com/snapchat-intermediate/tritone-material) to threshold the image by how light or dark it is, except before I do that I am going to slightly blur the image to get smoother edges. Let's walk through this.

### Adding the blur

Start by adding `Texture 2D Object Parameter`, `Screen UV Coord`, `Float Parameter`, and `Gaussian Blur` nodes. For the texture parameter node I named mine as "Base Texture," the float I named as "Blur Strength," and then I wired everything up. For the Gaussian Blur, you will have to select the option to "Expose Size Outputs" on the texture parameter. In the Preview panel you might just see a bunch of pink boxes or something weird, so select your material in the Resources Panel and select the Device Camera Texture for the Base Texture parameter. Then you can use the Blur Strength parameter to control how blurry the image gets (if you set a min and max value on the node, the material parameter will turn into a slider).

> At very high Blur Strengths, you'll start to see some weird artifacts and duplicate images. If you need a higher strengthed blur, add the "Gauss Blur" post effect and work with that. It seems to work better for whatever reason. We won't need high blur strengths for this particular tutorial, but it is useful to know.

![Setting up the Gaussian Blur](/images/tutorials/snapchat-intermediate/stencil-effect/blur-setup.jpg)

### Adding the threshold

Now that we can blur our image, let's threshold it to get a two-toned image. Connect the output of the Gaussian Blur node into a `Luminance` node, send that to an `Is Greater` node, then finally into an `If/else` node and then into our Shader. For customizing our effect I'm also adding another float parameter for the threshold and two color parameters for the If/else. Once you connect all that, choose two different colors and adjust the value going into the Is Greater node. You should now have a two-color image in the Preview Panel. Upping the Blur Strength will smoothen out the edges, the Threshold will dictate how much of the image is one color vs the other, and then the two colors let you pick what ultimately gets overlayed. I recommend sticking with white for one color and starting with black for the other (but we'll be changing this color later to blend better with our background).

![Creating the duotone effect](/images/tutorials/snapchat-intermediate/stencil-effect/duotone-setup.jpg)

### Overlaying the effect

Now it's time to see our effect in action! Add a `Texture 2D Parameter` node and a `Blend` node. Plug the stencil effect into the top output of the Blend node (this Base) and the new texture parameter into the bottom (the Color) and change the blend type to "Multiply." Now on your material parameters choose the Background render target for the new texture input. Now you have your effect!

### Blending things in

We have our stencil effect, but it is kinda harsh right now. Luckily there are a few things we can do to blend it in better. The first and easiest thing to do is to change our black color to a different color that better suits the scene. For my paper background, changing it to a shade of brown helps blend it in better. It allows some of the background to show through which strengthens the illusion of my stencil actually being placed onto the background.

Something else that I find that helps is adding some noise to our stencil effect. Add `Random Noise`, `Multiply`, and `Mix` nodes. Set the scale of the noise to something like 1000x1000 and plug the UV coord node into the Seed of the noise, multiply it by our stencil output, and then mix that together with white using our stencil output as the Ratio. Then use that to blend with the background. Depending on your background, the noise may or may not help, but it is definitely worth trying.

![Adding some noise to the stencil effect](/images/tutorials/snapchat-intermediate/stencil-effect/noise-setup.jpg)

## Finishing up

There is nothing overly complicated about this stencil effect, but the little touches like the slight blur to smooth out the lines and then adding the noise to help blend things in help take this effect to the next level.

## Further reading

- [Material Editor](https://lensstudio.snapchat.com/guides/material-editor/welcome-to-material-editor/)
- [Camera, Layers, and Render Targets](https://lensstudio.snapchat.com/guides/general/camera/)


Learn how to overlay yourself as a stencil in Lens Studio! This is a nice artistic look that does well when used in lenses.

Stencil effect in Lens Studio


`youtube:S7T3dSk4LK8`

In this tutorial we'll go over how to use SnapML to create a style transfer lens. You can see an example of this by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=64f2815c77fa491dae11a916a6e6c7cb&metadata=01) or by scanning the snapcode below.

![Snapcode for lens created with SnapML style transfer](/images/tutorials/snapchat-intermediate/snapml-style-transfer/snapcode.png)

## What is style transfer?

Painters create art in their own particular style - Bob Ross is known for his peaceful landscapes, Picasso for Cubism, you get the idea. An artist's style is made up of their brush strokes, color palette, shapes, patterns, and techniques they use to create their paintings. With style transfer, a neural network takes an image, "learns" the style, and then applies that style to a new image. Wonder what a cubist Bob Ross painting would look like? Just train the style transfer model on Picasso and then apply it to a Bob Ross painting. Style transfer can yield some pretty amazing results, and through the use of SnapML, we can create style transfer lenses in Snapchat.

## Gathering our images

Before we can train our style transfer model, we need two images - a test image and a source image. The test image can be anything, but I like to [use an image of a person](https://unsplash.com/s/photos/person).

Our source image is going to be the image whose style we want to emulate. You can use famous paintings like van Gogh's Starry Night or [something more ridiculous like an image of spaghetti](https://lens.snapchat.com/ce69bdd2713041779c7632fe363cc36a). For this tutorial I am going to use ["Young Man with a Fountain Pen"](https://en.wikipedia.org/wiki/File:Diego_Rivera_-_Young_Man_with_a_Fountain_Pen_-_Google_Art_Project.jpg) by Diego Rivera. Make sure your style image has a distinct style that the neural network can learn - make sure there is something interesting about the color palette, patterns, shapes, etc. Once you have your style and test images, save them to your computer. I recommend keeping the names pretty simple like "person" or "style-image" and avoid using spaces in the filename.

## Training the model

Now that we have our images, it is time to train the model. Don't worry if you've never trained a neural network or even written a line of code before - the Lens Studio team has kindly provided all the code we need. Go to the [Style Transfer](https://lensstudio.snapchat.com/templates/ml/style-transfer/) page on the Lens Studio website and find where it says "download our example notebook" to download the code and then go ahead and unzip it.

Training neural networks takes a fair bit of computing power and software setup, so we are going to train our model in the cloud with [Google Colaboratory](https://research.google.com/colaboratory/) (or Colab for short). You will need to sign-in with a Google account to use Colab. Once you are signed in, there should be a window where you can create a new notebook. Up at the top right, select Upload and then find the `style_transfer.ipynb` file that we downloaded from the Lens Studio site.

This notebook that we uploaded contains all the instructions and code we need to train our style transfer model. But before we begin, we need to also upload our test and style images. Once you've uploaded your files, scroll down to the "Global variables for training" section and replace 'test_image.png' with your test image filename (make sure there are single quotes around it still) and do the same for 'style_image.png' with your style image.

![Specifying our test and style images](/images/tutorials/snapchat-intermediate/snapml-style-transfer/image-variables.jpg)

Now that we have our files named, we don't need to touch any more code. Open up the "Runtime" menu and select "Run all" to start the training process. You can follow along as each block of code does its thing. Before the model can start training, the code will install a few libraries and download some additional data which will take some time. Once all the setup is complete, the training will begin and you'll be able to follow along as the model learns the style. This process will take a few hours. Once the model finishes training, download the .onnx file (you might need to refresh the file browser to see it).

> Google Colab is free to use, and because of that it does come with some limitations. Even though your model is being trained in the cloud, you CANNOT close your browser tab. It must remain open or Google will terminate the process. You also can't walk away and leave this to train overnight; Google expects to see the tab is active. You don't need to sit and stare at it while it trains, but keep the tab open and occasionally scroll through it. If Google terminates the process, you will have to start all over again. Even if the model is finished training, a terminated process will delete the final model, so be sure you stick around and download the finished product.

## Using the style transfer model

Open up the "Style Transfer" template in Lens Studio. I recommend using the template vs doing it from scratch because the template includes a script that will adjust performance depending on the user's device. Once you've opened up the template, import the onnx file you must downloaded. You don't need to adjust any of the options in the window that appears, you can just click Import.

Select the ML Component in the Objects Panel and then in the Inspector Panel swap out the Model for the one you just imported. You should now see your style take effect!

## Further reading

- [Style Transfer Template](https://lensstudio.snapchat.com/templates/ml/style-transfer)


Learn how easy it is to create a SnapML powered style transfer lens for Snapchat!

Style Transfer with SnapML


`youtube:FGOfYiV3OSM`

In this tutorial we'll go over how to create a "Potato Boss" style lens using Lens Studio. We'll go over how to add some wobbly motion to a 3D object and how to set up the background image so that it looks good on any screen size. You can see an example of this type of effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=2265a91d26d74c259c82c0461d8fec7b&metadata=01) or by scanning the snapcode below.

![Snapcode for peanut lens](/images/tutorials/snapchat-intermediate/potato-boss/snapcode.png)

## Background

The Potato lens was created by [Phil Walton](https://lensstudio.snapchat.com/creator/RZEkhB4Nnh7d6lz_-anLQQ) and it went mega-viral after someone shared a picture on Twitter of their [boss who got stuck as the potato](https://time.com/5813683/boss-turns-herself-into-a-potato/) during a work call. That turned the Potato into a cultural phenomenon. Phil's Banana lens, which is the same style of lens as the Potato, was [used on SNL](https://www.youtube.com/watch?v=KYGDEDrrJj0). He unfortunately never received a shout-out from either the original meme nor from SNL, so let's show him some love and go [subscribe to him on Snapchat](https://story.snapchat.com/u/phillip.walton) at the very least.

> This style of lens is a signature look of Phil, so I asked him if it would be okay to make a tutorial about recreating the effect. Being the nice guy that he is, he said yes.

## Preparing your assets

You don't need much to create this type of lens. The two main ingredients are a background image of some sort and a 3D model. The 3D model can be as simple or complex as you like, the only condition is that it has some sort of rig. For my lens I am going to use a model of a peanut that I found. For the rig I added only two bones - the main root bone is at the top of the model and my second bone (the one I want to control the wobble with) is at the bottom of the model. If you haven't rigged before, feel free to look up a tutorial for whatever 3D software you are using. As you can see you don't need a complicated rig, so the setup should be pretty easy.

> Don't create another potato lens. That lens already exists and was done very well. I recommend using some other 3D object. Whether you find an existing model or create your own, there are plenty of things to choose from. If you absolutely must make another potato lens, make sure it is distinct and add your own personal flair to it.

![Example rig setup](/images/tutorials/snapchat-intermediate/potato-boss/rig.jpg)

## Setting up the scene

Once you have your assets ready, open up Lens Studio. Start off by importing your 3D model and background image. Then add a [Head Binding](https://lensstudio.snapchat.com/guides/face/face-effects/head-attached-3d-objects/), delete the Face Occluder, and attach your 3D model to the Head Binding. Scale and position your model as needed.

![Adding your model to the scene](/images/tutorials/snapchat-intermediate/potato-boss/adding-model.jpg)

Now that we have our model imported, let's add the eyes and mouth. Add a [Face Inset](https://lensstudio.snapchat.com/guides/face/face-effects/face-inset/) and make sure that Face Region is set to Mouth. You can use the 2D view to position the mouth, but then be sure to switch to the 3D view to adjust the face inset in the Z-direction. Adjust the mouth to be right near the surface of your 3D model, otherwise it will look funny when the user turns their head. In the Preview Panel, I like to use the "Smile Person 1" or "Smile Person 4" previews whenever head motion is involved because they both turn their heads from side-to-side in the video.

When you add a face inset, a new Face Inset Binding is created and the face inset is attached to that. Since we are placing the face insets on our model, we don't need that face inset binding. Drag the mouth inset so that it is a child of your model's root bone (the very first bone in the rig) and then delete the face inset binding. Now duplicate the mouth face inset and change the region to Left Eye. Now, a quirk of Lens Studio is that the left eye inset is actually the user's right eye. The name comes from being on our (the creator's) left hand side. Position it just as you did the mouth, being sure to switch to the 3D view to adjust the Z-direction. Once that is done, duplicate it once more, change the region to Right Eye, and position it accordingly.

![Adding your model to the scene](/images/tutorials/snapchat-intermediate/potato-boss/face-insets.jpg)

## Adding the wobble

So far we have our 3D model with the face setup, but it wouldn't be a Potato Boss style lens without some of that wobble/lagging motion on part of the model. Fortunately for us, a script already exists for that. There is a collection of projects, templates, and scripts maintained by some of the lens creator community on GitHub. You can [find the script there](https://github.com/FrozenAtlas/OLC-Repo/blob/master/Projects%20and%20Templates/SmoothFollow/Public/SmoothFollow.js), or I've also included it below:

```javascript
// -----JS CODE-----
// @input SceneObject target
// @input vec3 offset
// @input float smoothSpeed = 0.05

var transform = script.getTransform();

if (script.target) {
  var targetTransform = script.target.getTransform();
} else {
  print("SmoothFollow.js: Please assign the target");
}

function onUpdateEvent(eventData) {
  if (script.target) {
    var desiredPosition = targetTransform.getWorldPosition().add(script.offset);
    var smoothedPosition = vec3.lerp(
      transform.getWorldPosition(),
      desiredPosition,
      script.smoothSpeed
    );
    transform.setWorldPosition(smoothedPosition);
  }
}
var event = script.createEvent("UpdateEvent");
event.bind(onUpdateEvent);
```

The key to this effect is the `lerp` function. Lerp is short for 'linear interpolation' and will return a position along a line between two points. The lerp function takes the object position, the target object position, and a value between 0 and 1. A value of 0 will be 0% of the way between the two objects aka the object won't move because it stays put. A value of 1 will make our object stick to the target because it is at 100% of the distance aka the position of the target object. Any value in between will add that delayed motion. A value somewhere between 0.05 - 0.25 seems to work well for this style filter. That description may not have been the most clear, so let's add the script and play around with it.

We are going to leave behind our 3D model for a moment. Create a Script resource in the Resources Panel, give it a name if you wish (such as SmoothFollow), copy and paste the above code, and then save the script (ctrl-s or cmd-s). Now add a sphere in the Objects Panel and make sure it is not a child of the head binding. Add a script component to the sphere in the Inspector Panel and choose the SmoothFollow script. For the target object select the head binding and now you should see the magic happen (go ahead and hide your original 3D model while you play around with the sphere for a moment).

As the user moves their head, the sphere will follow it, albeit with a slight delay. Try changing the Smooth Speed input to 0, 1, and different values in between. Values closer to 1 will more tightly track the head, while values closer to 0 will track more loosely. This is exactly the effect we want to apply to the bottom portion of our 3D model. Go ahead and delete the sphere and reenable your 3D model if you disabled it while playing around with the sphere.

If I look at my model hierarchy in the Objects Panel, I can see that I have a Bone, Bone.001, and Bone.001_end. In my case Bone is the root bone and will move my entire model with it. On the other hand, Bone.001 is the second bone and will only move the lower half of my peanut model. It is to this bone that I want to attach the SmoothFollow script. Just like with the sphere, add a script component and choose the Head Binding for the target. Only there's one issue. Even after you get the SmoothFollow script all configured, nothing is happening in the Preview Panel - there is no motion.

The reason for this is that the bone with the SmoothFollow script is already a child of the Head Binding and thus is already tracking its position. What we need to do is select that bone (in my case Bone.001) and drag it outside of the Head Binding. Once you've done that, the SmoothFollow script will begin to work. In the below screenshot, Bone.001 is now a sibling of the head binding. Now just adjust the Smooth Speed input until you get an effect that you like

![Changing the parent of the bone which has the SmoothFollow script](/images/tutorials/snapchat-intermediate/potato-boss/bone-hierarchy.jpg)

## Adding the background

All the hard work is now done. We have our 3D model with the face and the wobbly motion. But, it doesn't necessarily look great just being overlayed on our face. Let's add in a fun background.

Start off by adding a Screen Image (which will also add an Orthographic Camera) and set the image texture to your background image of choice. Then be sure to set the Stretch Mode to fill. This will make sure that our background image fully fills the screen without any stretching no matter the screen size. This means you'll get a great looking background on both mobile screens (the Snapchat app) and desktop (Snap Camera). But now we can't see our 3D model.

To make sure our background is behind our 3D model rather than in front of it, we are going to setup a new Render Target. Now there are multiple ways to get the background behind our 3D model, but we are going to go with this method to maybe learn a few new things. In the Resources Panel, add a new Render Target and name it Background. Now select the Orthographic Camera and set its Render Target to Background. Then select the original camera in the scene and change the Clear Color Option to Texture and then select the Background render target for the camera Input.

> It is also possible to get the background behind the model without the use of a second render target. To do so, you can simply change the render order of the two cameras in the Scene Config so that the Orthographic Camera is rendered first. I opted to go the Render Target method to introduce the idea of customizing the input texture of the camera.

![Camera settings for a custom Input texture](/images/tutorials/snapchat-intermediate/potato-boss/camera-settings.jpg)

## Bonus - Adding a greenscreen

Our custom background will usually do the trick, but video conferencing software like Zoom often have greenscreen features. Let's add a greenscreen to our lens to let users customize their background during Zoom calls.

- Create an Unlit material and change the Base Color to green
- Duplicate the Screen Image that has our background image on it
- Set the image material to the Unlit material you just created
- Import the Behavior script from the Helper Scripts menu in the Objects Panel
- Configure the Behavior script to toggle the enabled state of each Screen Image on tap
- In the Objects Panel, enable the background image and disable the greenscreen image

Now when the user taps, it will toggle between the custom background and the greenscreen background.

![Configuring the Behavior script to toggle between the two background](/images/tutorials/snapchat-intermediate/potato-boss/background-toggle.jpg)

## Finishing up

All that's left now is submitting your lens! As evidenced by Phil's lenses, this style of lens is popular across both Snapchat and Snap Camera. There's no guarantee your lens will be the next Potato Boss, but in my experience they usually do pretty well. Have fun building!

## Further reading

- [Panels](https://lensstudio.snapchat.com/guides/general/panels/)
- [Face Inset](https://lensstudio.snapchat.com/guides/face/face-effects/face-inset/)
- [Head Binding](https://lensstudio.snapchat.com/guides/face/face-effects/head-attached-3d-objects/)
- [Community GitHub Repo](https://github.com/FrozenAtlas/OLC-Repo)


Create your very own "Potato Boss" style lens using Lens Studio! Move beyond rigid 3D objects and learn how to add a little more motion and life to your creations!

Make your own Potato Boss style lens for Snapchat and Snap Camera


`youtube:EoF2eQnYjT8`

In this tutorial we'll learn how to create a "Big Head" lens using texture projection. You can see an example of this by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=6ecba5496e67490497446050f29ff1ed&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with a big head effect](/images/tutorials/snapchat-intermediate/big-head/snapcode.png)

## Creating the background

The first step will be to remove the camera view from the background. Select the camera and in the Inspector Panel change the Clear Color Option to either "Color" or "Texture." With the texture option you can either load in an image to use as the camera input or get a little fancy and set up a separate render target (which I won't be covering here). For this tutorial I'm going to go with the color option to keep things simple and go with a nice sky blue.

![Setting the camera input to a sky blue color](/images/tutorials/snapchat-intermediate/big-head/background.jpg)

## Creating the head

In the Objects Panel add a Head Mesh. Select the newly created Face Mesh in the Resources Panel and enable the Eye Geometry and Mouth Geometry options.

That was pretty easy, but let's make it look like the user's head. Create a new Unlit material, name it whatever you want, and then set it as the material for the head mesh. To get the user's face onto the mesh, we are going to take the camera texture and project it straight onto the mesh. To do so, select the Device Camera Texture as the Base Texture for the material. At this point things are going to be looking pretty ugly, so let's fix that. Change the Texture UV to "Transformed UV 2" and then enable the Transformed UV 2 option down at the bottom of the material settings and change it to "Screen UV." You should now see the face projected onto the head mesh.

![Projecting the face texture onto the head mesh](/images/tutorials/snapchat-intermediate/big-head/face-projection.jpg)

## Finishing touches

That's about it as far as creating the head portion of the lens. To finish your scene, import a 3D body and size it to be proportionally too small for the head. You can also import additional 3D elements to flesh out the scene.

## Further reading

- [Materials](https://lensstudio.snapchat.com/guides/3d/materials/)


Learn about using texture projection to project the face texture onto the head mesh!

Big Head effect in Lens Studio


`youtube:dNAj1iyy-ew`

In this Lens Studio tutorial we'll go over how to add an adjustable background blur (or "bokeh" as it is sometimes called, although it technically isn't bokeh in our case) to a lens. We'll go over how to apply the blur to just the background, add a slider to let the user adjust the strength of the blur, as well as how you can layer post effects on top of the completed lens. You can see an example of this type of effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=fad8f8091cda47cb942aa385e6da588c&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with adjustable background blur](/images/tutorials/snapchat-intermediate/background-blur/snapcode.png)

## Blurring the background

### Adding the blur

Blurring the background might actually be the easiest part of this lens. Start off by adding a "Gauss Blur" [Post Effect](https://lensstudio.snapchat.com/guides/2d/post-effect/) in the Objects Panel. This will make the preview blurry (hooray!) and add a Gauss Blur material to the Resources Panel. If you select this material you can adjust the "Blur Factor" in the Inspector Panel to make the preview more or less blurry.

### Blurring only the background

So far we have a blur going on, but our subject is also blurry. Add a Screen Image in the Objects panel and a Portrait Background Segmentation Texture in the Resources Panel. Now at this point we could set the texture of the screen image to be the Device Camera Texture and then mask the camera with the segmentation, but that would cause issues if we want to add something like grain or some other overlay to our lens. Instead, we are going to apply the segmentation only to the screen image.

To do this, start by creating a new Unlit material. Select the material and set the Device Camera Texture as the Base Texture. Now enable the Opacity Texture option. If there is not an option to select a texture, change the Blend Mode of the material to Normal. Then select the segmentation texture for the opacity texture.

![Setting up the Unlit material with the segmentation](/images/tutorials/snapchat-intermediate/background-blur/unlit-material-setup.jpg)

Now select the screen image and set the material to be our unlit material we just finished setting up. The default Stretch Mode of Fit should be fine, but I like to change mine to Stretch just to be safe and make sure the image fills the screen. You may notice that ther person is blurry now instead of the background, so select the Portrait Background Segmentation in the Resources Panel and select the "Invert Mask" option in the Inspector Panel. Now you should be golden! Since the default preview videos have a plain background, I recommend you push the lens to your device so you can really see it in action.

## The user interface components

So we have a blurry background, but how blurry should it be? Very blurry, somewhat blurry, or hardly blurry? Instead of guessing, why don't we add some controls and let the user decide!

Instead of reinventing the wheel, let's use the [Lens Studio User Interface (UI) system](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/) that they've kindly created! Just underneath the Overview section there will be a link to download it. Go ahead and download the zip file and then unzip it. Now from inside Lens Studio, import the `UI_Widgets.lso` file you just unzipped. This should add a "UI" folder of goodies in the Resources Panel and you should see something that says "\[Place Under Orthographic Camera\]" in the Objects Panel, but don't do anything with it just yet.

![Importing the Lens Studio UI widgets](/images/tutorials/snapchat-intermediate/background-blur/ui-import.jpg)

## Creating a UI render target

While we want the user to be able to see and use the slider, we don't want it to appear in the final effect. Fortunately Lens Studio let's us use separate render targets for the live view and for what actually gets captured.

- Create a new render target in the Resources Panel and give it a good name, "UI Target" or something
- Create a new camera in the Objects Panel
  - Rename it to something like "UI Cam" to keep things organized
  - Change the Layers to only Orthographic
  - Change the Render Target to the new UI Target you just created
  - Change the Camera Type to Orthographic
  - Set the Clear Color Option to "Texture" and then set the Input texture to the Render Target (not the UI render target, the original render target)
- Go into the Scene Config Panel (by default this is a tab right next to the Resources Panel) and change the Live Target to the UI Target

Okay, that was a lot, and while doing all that you may have noticed some buttons and sliders show up on the screen. So what we did was create a new camera to hold our UI. We made sure it was the right camera type (Orthographic) and for the camera input choose our Render Target (which is our final effect). Now go ahead and grab that "\[Place Under Orthographic Camera\]" object and attach it to the UI camera. Now there should be a slider on the left and some buttons in the middle.

![Setting up the user interface camera](/images/tutorials/snapchat-intermediate/background-blur/ui-cam-settings.jpg)

## Tweaking the user interface

We want to adjust the strength of the blur, so the only UI widget that we need is the slider. If you expand the "UI Panel" object you can find all the various buttons and whatnot. You can delete everything in there EXCEPT for the "UI Color Picker" (you can leave the hint if you want).

We also want to get rid of the color scale from the slider because we are adjusting blur strength, not color. Let's expand everything inside that UI Color Picker and see what we have; take a moment to look around and see how it's all structured. One thing we won't need is the UI Popup. The UI Popup appears when the slider is being dragged and displays the current color off to the side. We won't need that, so you can disable or delete it. We also don't need the color displayed on the cursor. If you expand the Cursor object, you'll see a Background and a Color Visual object. You can disable or delete the Color Visual. The last thing we need to remove is the color scale. However, if we disable the Palette object, you'll notice that the cursor disappears too. Drag the Cursor outside of the Palette object and parent it to the Background object. Now you can disable the Palette object. Don't delete it because it seems to mess with the UI scripts and the cursor no longer slides, but go ahead and disable it. This will result in a partially transparent black background for the slider with a white circle for the cursor. Feel free to swap out those textures with whatever you wish if you want to customize the look of your slider.

![Setting up the slider widget](/images/tutorials/snapchat-intermediate/background-blur/slider-setup.jpg)

## Connecting the slider to the blur

Now we just need to get the slider information into our blur material. If we go back to the [UI widgets page](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/) and scroll down, we can find some more information about the color picker slider. Fortunately the Lens Studio team thought this through and created a callback named "onSliderValueChanged" that we can use. If you aren't familiar with a callback, we are telling the script to notify us of any changes. It is like if you call your friend and tell them that you are running late but that you'll let them know if anything changes. If you don't call back, your friend can assume nothing has changed. But if you are now going to miss the party, you call your friend back (hence the name) and let them know. So anytime there is a change to the slider, it will trigger the callback.

Before you stress about writing a script, most of our work is already done because at the bottom of the slider section there is an example script using a callback.
In this case it is changing the color of a material, so we just need to modify it to change our blur strength. The Lens Studio example is below:

```javascript
// Script taken from https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/

//@input Component.ScriptComponent colorPickerScript
//@input Component.MeshVisual targetVisual
// Set the target Mesh Visual's base color to the newly selected color
function changeColor(newColor) {
  script.targetVisual.mainPass.baseColor = newColor;
}
script.colorPickerScript.api.addCallback("onColorChanged", changeColor);
// Change the selected color to the color at the bottom of the palette
script.colorPickerScript.api.setSliderValue(0);
```

Now that we've seen how the Lens Studio team constructed their script, let's create ours. Before we start coding, let's talk through what we need to do. We need to listen to the "onSliderValueChanged" callback and set the blur strength of our Gauss Blur material. Other things that will help us are:

- An input to set a multiplier. The slider gives values between 0-1, but our blur strength can be higher than one. We'll just multiply our values by this number to go from 0-1 to something like 0-4 or 0-5.
- An initial value for the blur. We want to be consistent, so let's add an input for initializing the amount of blur in our lens.

With that in mind, here is the finished script:

```javascript
// -----JS CODE-----
// @input Component.ScriptComponent colorPickerScript
// @input Asset.Material blurMat
// @input float multiplier
// @input float initialVal

function changeBlur(value) {
  script.blurMat.mainPass.blurFactor = script.multiplier * value;
}

script.colorPickerScript.api.addCallback("onSliderValueChanged", changeBlur);
script.colorPickerScript.api.setSliderValue(script.initialVal);
changeBlur(script.initialVal);
```

How does this work? For our inputs we take the color picker script, our blur material, and a few float values. The `changeBlur` function takes our slider value and multiplies it by our multiplier to set the blur strength. But what is that `script.blurMat.mainPass.blurFactor` nonsense going on? The first part is straightforward, `script.blurMat` is how we access the material we specified in our script inputs. The `mainPass` part is how we access properties of the material, but where does `blurFactor` come from? The Blur Factor is a configurable input for the material, and if you take a look at the material in the Inspector Panel and hover your mouse over a parameter, you can see the Property name which is how you access that value from a script.

![How to find the names of material properties](/images/tutorials/snapchat-intermediate/background-blur/material-property.jpg)

The next portion of our script attaches our `changeBlur` function to the callback. This is just telling the color picker script that whenever the slider value changes that the specified function needs to be run. After that we position our slider at the initial value and make sure to set our blur to the same value.

Create a script in the Resources Panel, add it to the scene (make sure it is below the UI Color Picker object because that script has to be initialized before ours), set the inputs, and give it a whirl! You should now be able to control the amount of background blur with the slider!

## Finishing touches

Now that the background blur is working, your lens just requires your finishing touches. Feel free to swap out the textures for the slider background and cursor. If you want to add grain or any sort of overlay, make sure it is placed under the first Orthographic camera and not the UI camera. If you want to use a Post Effect, place it after the Orthographic camera (but before the UI camera) and change the layer to Orthographic. This will apply the post effect to the entire lens without affecting the UI.

> With the current setup the post effect might only be visible on the live target but not the capture target. You may need to place the UI camera (and all the elements underneath it) on a [new layer](https://lensstudio.snapchat.com/guides/general/camera/). I go over this step in more detail in the video version of the tutorial.

![Example post effect compatible with the background blur and user interface widgets](/images/tutorials/snapchat-intermediate/background-blur/example-post-effect.jpg)

## Further reading

- [Post Effect](https://lensstudio.snapchat.com/guides/2d/post-effect/)
- [Lens Studio UI system](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/)
- [Camera Layers](https://lensstudio.snapchat.com/guides/general/camera/)


It's not too hard to add a blurry background to your Snapchat lenses for that portrait effect. But let's take it to the next level and make it adjustable!

Create an adjustable background blur/bokeh effect with Lens Studio


`youtube:VrU9mnHTvZ8`

The material editor in Lens Studio is super powerful, but it is separate from the scripting system. If you are coming from Spark AR where both logic and materials exist together in the patch editor, this may be frustrating to you. In this tutorial we'll go over how to bridge the two and use scripts to change material parameters. We'll see how to use the behavior script, the tween script, custom JavaScript, and visual scripting to change material parameters.

## Scene setup

The focus of this tutorial is on connecting scripts to materials so I'm going to keep the scene setup pretty simple. All I've done is add a sphere to my scene and given it the "Simple PBR" material. With that added, let's get started!

> We'll be going through a few different methods of controlling materials via a script. If you are following along, make sure you disable any scripts before adding new ones to avoid overlapping and potentially conflicting behavior e.g. disable the behavior scripts before moving on to the tween script section.

## Behavior script

We can use the behavior script as an on/off switch to do some basic changes. I'm going to make my sphere green when the user smiles and red when they are not smiling. Add a behavior script and change the trigger to Face Event and use Smile Started as our event type. Change the response type to "Set Material/VFX Parameter" and wait just a moment for some additional options to appear. Once the input parameter for the material appears, go ahead and select the Simple PBR material.

The next parameter, "Parameter Name," is where a lot of people get hung up because it isn't immediately obvious what should go in this space. To find the parameter name, select the material in the Inspector Panel. Find the parameter you want to change and hover your mouse over the name. A tooltip box will appear with the parameter (or property) name. If I hover my mouse over the "Base Color" parameter, I'll see that the parameter name is "baseColor." This is the value we want to use so put that in the "Parameter Name" box on the behavior script.

![How to find material parameter names for scripting in Lens Studio](/images/tutorials/snapchat-intermediate/script-material/parameter-name.jpg)

Now that we have our material parameter figured out, we need to configure the value that we will pass to the material. Change the value type to "Color (RGBA)" and then choose the color you want to set when the user smiles. Now switch the preview video to one in which the user smiles and you should see your sphere change colors!

![Behavior script setup for changing a material base color when the user smiles](/images/tutorials/snapchat-intermediate/script-material/behavior-script.jpg)

Now for when the user is done smiling, all you have to do is copy and paste the script component and change the event type and color.

## Tween script

The behavior script is nice and all, but it is abrupt, a simple on/off. The tween script allows us to add transitions to our material parameters. Add the tween manager to your scene and then add a "TweenValue" script component.

> The tween script doesn't have as many triggers as the behavior script, so if you are wanting to run the tween on certain interactions, I recommend setting up a behavior script to run the tween as the response type.

I'm not going to do anything fancy - I just want to transition the metallic value of my material from 0-1 and back to 0 again. I am going to change the loop type to "Ping Pong" and the data type to float. I'll leave my start and end values as 0 and 1 respectively but change the easing type to "In/Out." Now, my tween is running, but it isn't doing anything to my material yet. Let's fix that.

The TweenValue script has a handy option called "On Update Callback" that we want to change to "Set Material Parameter." You can leave the Mesh Visual field blank, but be sure to select your material and for the property (or parameter name) we want to use "metallic" which I got from hovering my mouse over that parameter on my material. You should now see the sphere transitioning from not being metallic, to fully metallic, and back again in a continuous loop.

![Tween script setup for changing a material metallic value on a continuous loop](/images/tutorials/snapchat-intermediate/script-material/tween-script.jpg)

## Custom scripts and custom materials

Let's say you need to do something more complex. Maybe you have a custom material or a custom script. Fortunately it's still straightforward to connect our material and our script. To start I've made a simple HSV material that has hue, saturation, and value input sliders and I've applied it to my sphere.

![A simple HSV material](/images/tutorials/snapchat-intermediate/script-material/hsv-mat.jpg)

In order to be accessible to a script, any value you want to change on your material must be a Parameter. In my HSV material you can see there are three different float parameters, but you can also use integer, boolean, color, and texture parameters (just to name a few). If you select on of the parameter nodes, you'll see it has a "Title" and a "Script Name." The title is what you'll see displayed in the inspector panel, and the script name is the parameter name we'll be able to access from our script. You can use a different script name than the title, but try to avoid using spaces (it just makes it easier while scripting).

![Configuring the script name for a material input parameter](/images/tutorials/snapchat-intermediate/script-material/script-names.jpg)

> You don't need to write a custom script; you can use the behavior or tween scripts just as we did earlier.

In my script, I want to give the sphere a random color anytime the user taps the screen by adjusting the "hue" parameter. To access the material, I'll add an input for an `Asset.Material`. The key to setting my material parameter is to access it through the "mainPass" property as seen in the below example.

```javascript
// -----JS CODE-----
// @input Asset.Material mat

script.createEvent("TapEvent").bind(function () {
  script.mat.mainPass.hue = Math.random();
});
```

Add your script to the scene and specify the material for the script input. Now each time you tap, the "hue" parameter will be randomly set by the script!

## Visual scripting

We can do the same thing with visual scripting. You'll want to use the "Set Pass Property" node to specify which parameter/property you want to set and then connect the material's main pass to that along with the new value.

![Configuring the script name for a material input parameter](/images/tutorials/snapchat-intermediate/script-material/script-graph.jpg)

## Further reading

- [Behavior Script](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/behavior/)
- [Tween Manager](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/tween-manager/)
- [Material Editor](https://lensstudio.snapchat.com/guides/material-editor/welcome-to-material-editor/)
- [Scripting](https://lensstudio.snapchat.com/guides/scripting/scripting-overview/)
- [Visual Scripting](https://lensstudio.snapchat.com/guides/visual-scripting/overview/)


The material editor in Lens Studio is super powerful, but it is separate from the scripting system. In this tutorial we'll go over how to bridge the two and use a script to change material parameters.

Control a material parameter from a script


`youtube:DOporB-Eukg`

Letting the user change the opacity (or alpha) of an image is a pretty common question on the Lens Studio forums. Changing the opacity of an image itself isn't too tricky, but knowing how to do it with a slider so the user can control it is a bit trickier. In this tutorial we'll walk through the whole process and end up with a fully reusable script for future projects. You can see an example of this type of effect by [clicking here](https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=5ea980b84abc43a3a6c1b36aa427e55a&metadata=01) or by scanning the snapcode below.

![Snapcode for lens with adjustable background blur](/images/tutorials/snapchat-intermediate/opacity-slider/snapcode.png)

## The user interface

Before we create our script, let's go ahead and get our slider created. We are going to use the extremely handy [Lens Studio User Interface (UI) system](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/). Download the zip file, unzip it, and then from inside Lens Studio import the `UI_Widgets.lso` file. This will add a "UI" folder in the Resources Panel and a "\[Place Under Orthographic Camera\]" hierarchy of objects in the Objects Panel. We want our slider visible to the user, but we don't want it visible in the captured image/video. Let's set up a new Render Target to make that happen.

- Create a new Render Target in the Resources Panel and name it "UI Render Target" (or something like that)
- Add a new camera to the scene
  - Rename it to "UI Camera"
  - Create a new "UI" layer and set the camera to only that layer
  - Set the camera render target to the UI render target
  - Change the camera type to Orthographic
- In the Scene Config Panel, change the Live Target to the UI render target
- Drag the UI widgets to the UI Camera (make sure they are children of the camera)
- Open up the UI widgets and delete everything except the "UI Color Picker"
- Fully expand the UI Color Picker and put everything on the UI layer

![Setting up the slider on a new layer/render target](/images/tutorials/snapchat-intermediate/opacity-slider/ui-setup.jpg)

Now that we have our slider visible, it is time to tweak the appearance. We will be using the slider to control opacity, so we don't need the color bar or anything. Disable the UI Popup, Color Visual, and Palette. The cursor will disappear after you disable the Palette, so drag it out from under the Palette and parent it to the Background. You should now have the dark slider background with the cursor (the white circle) still present. You can also load in your own images for the cursor and slider background if you wish.

![Modifying the color picker to be a plain slider](/images/tutorials/snapchat-intermediate/opacity-slider/slider-setup.jpg)

## The gameplan

Now that we have our slider, let's start controlling stuff with it! We want to be able to control the opacity of images, materials, graph materials, and post effects, and ideally we'll just need one script to worry about. Fortunately, that is very doable with the right setup. Let's get started with the base script and then we'll go in and setup each of the different opacity controllers.

## The base script

The opacity of an image is controlled differently than the opacity of a material. The basic principles are the same, but the script property we use to access each is different (Component.Image vs Asset.Material). Rather than write a different script for each thing we want to control the opacity of, we are going to have one base script that lets us choose what we want to target. To do this we will be making use of the [custom script UI](https://lensstudio.snapchat.com/guides/scripting/custom-script-ui/) from Snapchat (not to be confused with the UI slider we just created). Go ahead and create a new script, add it to your scene, and then open up the Script Editor.

To start off, we are going to create a dropdown menu so we can choose what entity we are controlling the opacity of. It will be a `string` input, but we can tell Lens Studio to display a menu of choices rather than have us type in an input.

```javascript
// @input string entity {"widget":"combobox", "values":[{"label":"Image", "value":"image"}, {"label":"Post Effect", "value":"post"}, {"label":"Material", "value":"mat"}, {"label":"Graph Material", "value":"graph"}]}
```

Our first line of code will be this long line for the `entity`. The first part `@input string entity` probably looks pretty normal. The next part might be new though. This is a JSON object that specifies what sort of [script UI](https://lensstudio.snapchat.com/guides/scripting/custom-script-ui/) to show. The "combobox" is essentially a dropdown menu and the "values" are what get displayed. Each item in the list has a "label" which is displayed inside Lens Studio and a "value" which corresponds to what the value of the input is. Add this line to your script, save it, and then you should see the dropdown menu showing up. What's really cool about this is that we can conditionally display other script inputs based on what is chosen in this dropdown.

```javascript
// @input Component.Image image {"showIf":"entity", "showIfValue":"image"}
```

The above line of code specifies an image component input, but it will only show if "image" is selected in our dropdown. Pretty cool! So for controlling image opacity we only need the one input - the image. Let's go ahead and setup the rest of our inputs.

```javascript
// -----JS CODE-----
// @input string entity {"widget":"combobox", "values":[{"label":"Image", "value":"image"}, {"label":"Post Effect", "value":"post"}, {"label":"Material", "value":"mat"}, {"label":"Graph Material", "value":"graph"}]}

// @input Component.Image image {"showIf":"entity", "showIfValue":"image"}

// @input Component.PostEffectVisual postEffect {"showIf":"entity", "showIfValue":"post"}

// @input Asset.Material mat {"showIf":"entity", "showIfValue":"mat"}

// @input Asset.Material graphMat {"showIf":"entity", "showIfValue":"graph"}
// @input string property {"showIf":"entity", "showIfValue":"graph"}
// @input float multiplier {"showIf":"entity", "showIfValue":"graph"}

// @input float initialValue = 0.5
// @input Component.ScriptComponent colorPickerScript
```

Our complete input section is as above. You can see the various values we are letting the user input, including an initialValue and colorPickerScript that pertain to all types of input. This initial value will be what we want the opacity value to start at. For the most part we just need to specify the type of entity (Component.Image, Asset.Material, etc), but for the graph material we have a few more inputs. The "property" will let us specify which graph parameter we want to change (more on that later when we setup a material) along with a "multiplier." Opacity values range from 0-1 so we don't really need that, but it will be helpful to see how that works for adjusting values that lie on a larger scale (0-3 for example). Now that we can specify our inputs, let's connect our slider to our script before we get into actually adjusting opacity values.

If we refer back to the User Interface page (for the slider), we'll see that the Color Picker let's us assign a callback for when the slider changes as well as set the slider value. Let's add some code to our script to handle that. Add the following lines of code to the script, save it, select the "UI Color Picker.Script" for the colorPickerScript input on our script, and then start moving the slider. You should see the current slider value printed in the logger. Once you see those values, it is time to start adjusting some alpha values!

```javascript
function handleChange(value) {
  print(value);
}

script.colorPickerScript.api.addCallback("onSliderValueChanged", handleChange);

handleChange(script.initialValue);
script.colorPickerScript.api.setSliderValue(script.initialValue);
```

## Image opacity

Let's start with adjusting image opacity. Select the original camera in the scene and then add a Screen Image. This should create a new orthographic camera as well. If you don't see the screen image in the Preview Panel, don't worry, we'll take care of that. Go to the Scene Config and drag the Orthographic camera under the original camera. This will make sure the new orthographic camera is rendered before our UI cam is. Next, create a new Screen Image for the UI camera and drag it above the slider UI (also set it to the UI layer). For the image texture choose "Render Target." Basically what we are doing is making sure our lens is all rendered out to the Render Target (which is set for the Capture Target) but then so that we can also see it in our live target we are displaying the Render Target as a screen image on the UI camera.

![Setting up render orders for our scene](/images/tutorials/snapchat-intermediate/opacity-slider/render-order-setup.jpg)

Now that we can see our screen image, let's control the opacity! Inside our `handleChange` function we are going to add a switch. Our new function should look like this:

```javascript
function handleChange(value) {
  print(value);
  switch (script.entity) {
    case "image": {
      script.image.mainPass.baseColor = new vec4(1, 1, 1, value);
      break;
    }
    default:
      break;
  }
}
```

If you aren't familiar with a switch statement, it just takes an input and then based on the value executes a different code block (defined inside each case). If there isn't a block of code for the switch input, it executes whatever is inside the default block. For adjusting image opacity, we take our image, get the mainPass, and then adjust the baseColor. The baseColor is like the tint to the image. If it is white, then we just see the image. Otherwise it'll add a color tint. In our case we don't want to tint the color, but we do want to adjust the alpha value. It is pretty simple, but not necessarily well documented (I had to search the forum to find out how to do this). Now on your script in the scene, choose the "image" option, select the screen image, and then start moving the slider. You should see the image opacity changing!

## Post effect strength

We can control the strength of post effects in much the same way. Now, this won't work for all post effects, but it does work for those added from the "Color Correction" menu in the Objects Panel (the LUTs). Add the following snippet of code to the switch statement and give it a try! You'll notice it is basically the same as adjusting image opacity, except we are specifying a post effect for the input rather than an image.

```javascript
case 'post': {
    script.postEffect.mainPass.baseColor = new vec4(1, 1, 1, value);
    break;
}
```

## Material opacity

We can also control the opacity of materials! Add a material (add a sphere or something to the scene and give it your material). Make sure the material blend mode is set to Normal (it might default to Disabled), add the following code to the switch statement, and then give it a try!

```javascript
case 'mat': {
    var currColor = script.mat.mainPass.baseColor;
    script.mat.mainPass.baseColor = new vec4(currColor.r, currColor.g, currColor.b, value);
    break;
}
```

## Graph material opacity

Now let's get a little more tricky with a Graph Material. We won't adjust the opacity here. Instead we'll adjust the strength of the Gauss Blur post effect, but the exact same method would be used to adjust an opacity parameter for any material you might create with the material editor. Go ahead and add the Gauss Blur post effect.

```javascript
case 'graph': {
    script.graphMat.mainPass[script.property] = value * script.multiplier;
    break;
}
```

This code is going to look a little different. Instead of accessing the baseColor, we are passing in a custom property. If you hover your mouse over the "Blur Factor" slider for the Gauss Blur material, the little tooltip will name it as "blurFactor." This is the value you would set as the "property" input for our opacity script. If you were creating your own custom graph material with an opacity input, you would simply swap out "blurFactor" for whatever your parameter name is. Since our slider only goes from 0-1, the multiplier allows us to access a greater range, such as 0-5 for the Gauss Blur strength.

## The final script

Here is our final script to give us ultimate control over opacity! It isn't complicated, mostly a lot of choosing the right inputs and then just setting values. But this script is reusable in any project where you want to give the user control over the opacity of an image, color correction, or material.

```javascript
// -----JS CODE-----
// @input string entity {"widget":"combobox", "values":[{"label":"Image", "value":"image"}, {"label":"Post Effect", "value":"post"}, {"label":"Material", "value":"mat"}, {"label":"Graph Material", "value":"graph"}]}

// @input Component.Image image {"showIf":"entity", "showIfValue":"image"}

// @input Component.PostEffectVisual postEffect {"showIf":"entity", "showIfValue":"post"}

// @input Asset.Material mat {"showIf":"entity", "showIfValue":"mat"}

// @input Asset.Material graphMat {"showIf":"entity", "showIfValue":"graph"}
// @input string property {"showIf":"entity", "showIfValue":"graph"}
// @input float multiplier {"showIf":"entity", "showIfValue":"graph"}

// @input float initialValue = 0.5
// @input Component.ScriptComponent colorPickerScript

function handleChange(value) {
  print(value);
  switch (script.entity) {
    case "image": {
      script.image.mainPass.baseColor = new vec4(1, 1, 1, value);
      break;
    }
    case "post": {
      script.postEffect.mainPass.baseColor = new vec4(1, 1, 1, value);
      break;
    }
    case "mat": {
      var currColor = script.mat.mainPass.baseColor;
      script.mat.mainPass.baseColor = new vec4(
        currColor.r,
        currColor.g,
        currColor.b,
        value
      );
      break;
    }
    case "graph": {
      script.graphMat.mainPass[script.property] = value * script.multiplier;
      break;
    }
    default:
      break;
  }
}

script.colorPickerScript.api.addCallback("onSliderValueChanged", handleChange);

handleChange(script.initialValue);
script.colorPickerScript.api.setSliderValue(script.initialValue);
```

## Further reading

- [Custom Script UI](https://lensstudio.snapchat.com/guides/scripting/custom-script-ui/)
- [Post Effect](https://lensstudio.snapchat.com/guides/2d/post-effect/)
- [Lens Studio UI system](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/user-interface/)
- [Camera Layers](https://lensstudio.snapchat.com/guides/general/camera/)


Learn how to change the opacity of any image or color correction or material with a slider as we build a completely reusable script in Lens Studio!

Change the opacity of an image, color correction, or material with a slider in Lens Studio


`youtube:ahN7KVKhcWQ`

If you need to animate anything inside Lens Studio - position, rotation, scale, opacity, etc. - the Tween script is your best friend. Now don't be intimidated by the word "script" - you don't need to write any code to use the tween script. All you need to do is configure a few settings and you are good to go!

## Adding the tween manager script

Before we can start using the tween script, we need to import the Tween Manager. We do this through the Objects Panel and can find the Tween Manager either by searching or by finding the Helper Scripts section.

![Adding the Tween Manager in Lens Studio](/images/tutorials/snapchat-intermediate/tween-script-pro/add-tween-manager.jpg)

Depending on what you have selected in your scene, the Tween Manager may be added at the top level or nested under another object. You'll also notice a bunch of objects and text added to your scene. Expand the TweenManager object and delete the examples. Then, and this is important, click and drag the TweenManager all the way to the top of your object list. When a lens starts up, Lens Studio (or Snapchat when it is running on your phone) will start at the top and run down through everything. Each tween script you add to your lens relies on the TweenManager, so before any of those can run the TweenManager needs to be running. You don't need to do anything else, simply move it to the top of your scene hierarchy.

![Placing the TweenManager at the top of your object hierarchy](/images/tutorials/snapchat-intermediate/tween-script-pro/tween-manager-placement.jpg)

## Tween types

Lens Studio gives us a few different tween types to use in our lenses. The tween type you use will depend entirely on what you want to do.

- **TweenTransform** is for moving, rotating, or scaling objects.
- **TweenScreenTransform** is similar to TweenTransform but geared towards two dimensional objects (like Screen Images).
- **TweenColor** is for transitioning a material's color.
- **TweenAlpha** is good for fading objects in and out.
- **TweenValue** will transition between two numbers and is great for scripts, material properties, and VFX properties.
- **TweenChain** lets you run multiple tween scripts either in sequence or all at once.

## Tween settings

This section is not very exciting, but it's good to run through our various options before we start adding tween scripts.

- **Scene Object** If you don't specify this, the tween will act upon whatever object the script component is attached to. You'll probably be leaving this blank most of the time, but if you ever need/want to place your tween script elsewhere, you can use this field to tell Lens Studio which object should be affected.
- **Tween Name** If you want to use a Tween Chain (more on that later) or trigger your tween from a script (also more on that later), you will need to specify a name for the tween.
- **Play Automatically** If enabled, your tween will start as soon as your script component is triggered, which by default is when the lens starts.
- **Loop Type** This option determines if your tween repeats or ping pongs. The ping pong option means your tween will run, and when it is finished it will run in reverse back to the beginning.
- **Type** When applicable, this setting will let you choose the type of change e.g. moving, rotating, or scaling.
- **Movement Type** When applicable, this option will let you choose what the reference point for your tween is. `From/To` lets you specify the starting and ending points for your tween. `To` will take your objects current starting value (e.g. position) and then tween it to what you have specified. `From` is similar to `To`, but it will take your object's current position as the endpoint and start from what you specify. `Offset` will take your objects current position (or scale or rotation) and shift it. This is especially helpful if you want your object to move across the screen but don't necessarily care about the starting and ending values.
- **Additive** This option will appear when your Movement Type is `Offset`. You also need to set the Loop Type to "Loop." If disabled, your object will reset to its starting position when the tween finishes. If enabled, your object will continuously be transformed - for example it could keep rotating indefinitely.
- **Start & End** This is where you specify the starting and ending values for the tween. Depending on what Movement Type you selected, the starting or ending fields may not be present.
- **Time** This option specifies how long the tween will last and is in seconds.
- **Delay** This option will specify how long to wait before running the tween. It is also specified in seconds.
- **Is Local** This option is useful if the object you want to tween is the child of another object (like if it is tracking to the user's face). If you disable this option, then the start and end values will all be in world space and the object will not be affected by any parent objects.
- **Easing Function** This option determines how the tween value changes. If you want a constant change, Linear is what you'll want to choose. The other options can provide stylized motion (bounce, elastic) or more natural looking motion (quadratic).
- **Easing Type** This option specifies to which portion of the movement the easing function should apply.

> There is no specific combination of easing function and easing type that I recommend using. It all depends on what you want your motion to look like so I suggest playing around with a few different combinations.

## Example - TweenTransform - movement

There are a lot of different parameters we can change, so let's start working with the TweenTransform script to see what they all do. I'm going to start by adding a Box to my scene so we have something to transform, and then I'm going to add a new script component to my cube and select the `TweenTransform` script from inside the `Tween -> TweenTypes` folder. Don't add the `Tween` script to your object, make sure you are grabbing things from the `TweenTypes` folder. If you are following along, you may notice that even if you moved your box to be visible to the camera, it disappears once you add the TweenTransform. Don't worry, if you take a look at the Start and End values for the TweenTransform you'll see that it is placed at (0,0,0) which is right where the camera is. Go ahead and change your start value to (-5,0,-80) and your end value to (5,0,-80). You should now see the box move! Once it stops simply reset your lens to see the motion again.

![Our initial settings for the TweenTransform script](/images/tutorials/snapchat-intermediate/tween-script-pro/starter-settings-tween-transform.jpg)

Now let's add a Head Binding (go ahead and delete the included occluder object if you like) and make the box a child of the head binding. I'm also going to make the following changes to my tween settings:

- Loop Type: Ping Pong
- Start: (-5, 30, 0)
- End: (5, 30, 0)
- Delay: 1

Now my cube is moving back and forth across the top of the user's head. This still isn't the most exciting thing in the world, but now we are starting to see the power of the tween script. I could replace my cube with some sort of graphic or animation and I'd be well on my way to having some sort of cyberpunk or Iron Man style display.

## Example - TweenTransform - rotation

One issue people sometimes run into is trying to get an object to rotate continuously. I'm going to add a box to my scene, position it so I can see it, then I'm going to add a TweenTransform script to it. Rather than try to get it to rotate from 0 to 359 degrees, I am going to use the "Offest" Movement Type. Here are my tween settings:

- Loop Type: Loop
- Type: Rotate
- Movement Type: Offset
- Offset: (0, 10, 0)
- Additive: Enabled
- Easing Function: Linear
- Easing Type: In/Out

Now my box is continuously rotating! I can adjust the speed by changing the Time or by adjusting the Offset. What is nice about using rotation offset is that I can adjust the x and z angles of my object and it will keep rotating around the y axis (which is the axis I choose to use). You can also get fancy and add a delay to have a stepped rotation.

> You may need to reset your lens if you adjust your object's rotation while the tween script is running.

![Getting continuous, stepped rotation with the tween script in Lens Studio](/images/tutorials/snapchat-intermediate/tween-script-pro/tween-rotate.jpg)

## Example - TweenScreenTransform - scale

A great way to add some pizzazz to buttons is to have them react to being pressed. I've added a screen image to create a simple button. My button isn't actually doing anything, but you can use a Behavior Script to make it do something (this tutorial is focused on the tween script so we won't be going into any details about making buttons actually do anything).

We could add a TweenTransform script, but since this is a Screen Image with a Screen Transform, we can also use the TweenScreenTransform script. Here are some example settings:

- Script Trigger: Tapped
- Loop Type: Ping Pong Once
- Type: Scale
- End: (0.5, 0.5, 0.5)
- Time: 0.25
- Easing Function: Bounce

Now whenever you tap on the button, it will scale down then back up as if it had actually been pushed down. Animated buttons are a small detail that can help add a lot of polish to your lenses.

![Animating a button being pressed](/images/tutorials/snapchat-intermediate/tween-script-pro/button-press.jpg)

## Example - TweenChain - motion sequence

Individual tweens are great for simple motion, but they don't work so great if you have a sequence you want to follow. I added a box to my scene and I want it to move right, down, left, then up - right back to the starting position. I could try setting up my four tweens with delays, but it is a lot easier to use the TweenChain script. But before I can do that, I need to setup my four individual movements.

I've placed my box at (-8, 8, -60) in my scene. Each motion is going to involve moving 16 units. I could calculate out each starting and ending position, or I could just specify the offset for each movement. Here is my example tween for the motion to the right:

- Tween Name: "right"
- Play Automatically: Disabled
- Movement Type: Offset
- Offset: (16, 0, 0)
- Additive: Disabled
- Easing Function: Linear
- Easing Type: In/Out

Once I have that tween setup all I need to do is copy and paste it and I can setup my down, left, and up movements. Once I have those ready, then I can add my TweenChain script. All I'm going to do here is change the Loop Type to "Loop" and then click on the "+ Add Value" button four times in the Tween Names section. Then I'm going to add right, down, left, and up. Now my box will be continuously tracing a square on the screen!

![Setting up the tween chain](/images/tutorials/snapchat-intermediate/tween-script-pro/tween-chain.jpg)

You may notice a few new options on the TweenChain script. The "All At Once" option will run all the tweens at the same time rather than in order. In this example we didn't want that, but if you have multiple tweens that need to happen at once then this comes in handy. The other new option is "Recursive" which means the TweenChain script will check the children of your object for the tween names to run. This is helpful if you have a hierarchy of objects.

> The TweenChain script can also be given a Tween Name. This means you can chain together multiple chains. Just keep in mind that having too many things going on at once can affect lens performance.

## Example - TweenValue - material parameter

We can also tween material parameters. I've added a Pixelization post effect to my lens, then on my camera I've added a TweenValue script. If I look at the Pixelization material, there is a Size parameter that can go from 0 to 720. I don't want to transition across that entire range, so I'm going to pick something like 50-300 for the Start and End values on the tween script. I'm going to keep the Data Type as Int, but depending on your specific parameter feel free to change this. I'm also going to increase the Time to 5 seconds and set the Loop Type to Ping Pong.

So far nothing is happening to my pixelization effect. The TweenValue script is running, but we need to tell it what value to be changing. Change the On Update Callback setting to "Set Material Parameter." You can leave the Mesh Visual field blank, but select the material for the Material setting. Now, what is that Property setting? If you select the Pixelization material and hover your mouse over the word "Size," you'll see a little tooltip box appear that says "Property: size." That is what we want to put in the Property setting on the tween script.

![Finding material property names](/images/tutorials/snapchat-intermediate/tween-script-pro/material-property.jpg)

Once you've done that you should see the pixelization effect transitioning between super pixelized to not as pixelized.

![Material parameter tween setup](/images/tutorials/snapchat-intermediate/tween-script-pro/material-parameter-tween.jpg)

## Example - Scripting - recieving tween value

For more complex lenses, you may run into a situation where you need to monitor the current tween value or do something with it outside the realm of what the tween scripts can do. For this we can use the TweenValue script and specify a callback function to receive the current tween value.

The first thing I'm going to do is create a new script and add it to our scene. We'll keep things pretty simple so we can focus on making sure the tween script can communicate with our script.

```javascript
function receiveTweenValue(tweenValue) {
  print(tweenValue);
}

script.api.receiveTweenValue = receiveTweenValue;
```

All I have here is a function which receives one argument and prints it out to the logger. Then I am also exposing this function through `script.api` which makes this function available to other scripts.

Next I'll add a TweenValue script. I'll have it Ping Pong a value between 0.0 and 1.0 over 5 seconds. For the On Update Callback setting I'll choose "Call API function" then find my script for the Func Target Script. In the Func Name I put `receiveTweenValue` which is the name of exposed function. Now in the logger I should be seeing values between 0.0 and 1.0 printed out.

## Example - Scripting - controlling tweens

You may run into situations where you need to use the tween script but you don't know what the starting and/or ending values should be. Not to worry, you can set those values dynamically via a script along with starting and stopping tweens.

> The current tween scripting API does not let you change the duration of the tween, only the starting and ending values.

Once again I want to keep things simple so we can focus on the tween part of things and not so much our custom logic. I've created a short script and added it to my scene. Initially you'll see an error in the logger, but once you choose an input for the script the error will go away. For this example the Movement Type on the tween needs to be "To."

```javascript
// -----JS CODE-----
// @input SceneObject box

var X_RANGE = 10;
var Y_RANGE = 20;
var Z = -40;

function generateRandom(range) {
  return range * 2 * Math.random() - range;
}

function moveBox() {
  var newEnding = new vec3(generateRandom(X_RANGE), generateRandom(Y_RANGE), Z);
  global.tweenManager.setEndValue(script.box, "box_move", newEnding);
  global.tweenManager.startTween(script.box, "box_move", moveBox);
}

moveBox();
```

What this script is doing is generating random positions, setting the end value of the tween, then running the tween. You may notice that on the line with `startTween` that the `moveBox` function is included as a function argument. This tells Lens Studio that once the tween is done running, to call that function. In this case it generates a continuous process of updating the endpoint, running the tween, etc.

## Further reading

- [Tween Manager](https://lensstudio.snapchat.com/guides/scripting/helper-scripts/tween-manager/)


If you need to animate anything inside Lens Studio - position, rotation, scale, opacity, etc. - the Tween script is your best friend.

Intermediate Lens Studio