[Example Project] Make a Snap Camera Lens!

Hi everyone! 

Today I want to share with you some tips on how to modify your lens to work nicely with Snap Camera. Snap Camera allows you to use Snapchat Lenses as input to any desktop webcam software (e.g. for Twitch, OBS, Zoom, Meet, Teams, etc.). 

I’ve also created a quick start project that will help you with those lenses. It has a setup that will work properly with different screen aspect ratios.

Download Project

(p.s Segmentation template is a great way to quickly add a background to your Lens, or take your segmented Lens to the next level by adding UIs!)

Main difference that you should keep in mind while working on Snap Camera lenses is the screen’s aspect ratio. On the Snapchat app we are used to a vertical aspect ratio, but Snap Camera is made to be compatible with a widescreen web camera format. 

This post could alternatively be called, dealing with different screen sizes!

Stretch Modes on widescreen format

Given that we need to deal with different screen sizes, the first thing we will want to make sure is that our image always looks as we expect. 

Depending on your image different Stretch Mode would work best for your needs. To see how it will look on the widescreen use device simulation menu in Preview window. 

Here are some quick comparisons:

As you can see generally using Fill will give you the best result - image will cover the whole screen and have no stretching artifacts, regardless of the screen size.

In case adjusting Stretch Mode doesn’t work for you, you can have two separate setups for widescreen/vertical experience. For example, if you need a specific part of your image to be visible. You can write script that chooses correct option based on input image aspect ratio

In the example project, you can download this script which will allow you to just pick Scene Objects that you want to be visible in widescreen/vertical modes

Adding Fullscreen Background

We can easily add a green screen like background to our Lens using a Segmentation mask and fullscreen Screen Image. 

A segmentation mask allows you to “cut” something out--for example, cutting out the background image such that the user appears on top of the image. 

You can add Segmentation Mask directly to the whole Camera to cut out everything that the camera renders, or use some Image material to mask out specific images. 

To cut out everything the camera renders, select the Camera object in the Objects panel, and in the Inspector panel, add your segmentation texture to the Mask Texture field.

In the provided Lens Project I use custom material that masks out an image. This way, rather than masking out the whole camera, I can just mask out my background! 

Screen Images Layout

When dealing with images, you can use the corners of the screen as the reference point to make sure that they work in both horizontal and vertical screen sizes. 

You can use the Pin to Edge option on the image’s Screen Transform with padding to align your image close to the screen edges.

You can enable “Fix size” mode on our stickers, which will keep our image size stable in relation to screen texture size and aspect ratio.

Pro tip: Using Tap Trigger

If your lens has a Tap trigger Snap Camera users are able to use it in more than one way! They can just tap on preview in the Snap Camera window, or set up a custom hotkey.

Hotkey can be set up by clicking the “Enter your hotkey” field. After setting up keyboard combinations, pressing the hotkey will trigger actions assigned to TapEvent.

As always, don’t forget to add a TAP! hint in Project info so that people know they can interact with your Lens!

Conclusion

We can help a Lens reach a wider audience by making it work everywhere. There are several ways we can make the Lens aspect ratio independent, so that it can work on both different types of mobile phones, and even the webcam!

• Use a segmentation texture as a mask to instantly create a green screen
• Use the Fill mode option when you want your texture to always fit the screen
• Use Pin to Edge for screen images to be better aligned to various screen sizes
• Use Fixed Size to keep image size consistent between various screens
• You can use a script to enable and disable objects to further make your Lens custom to each device

Thanks everyone!

P.S. Pro tip #2

But wait! Some of you may realize that since paddings are measured in world units they depend on screen size. This can cause issues when your image is a getting further away from the screen edge

Let’s take a look at how we can fix this :)

Note that a full screen image has a bounds of -1,1,-1,1 (left, right, bottom, top). These coordinates represent the edges of the screen. Because these are normalized coordinates, no matter the screen size, these values will always work to cover the full screen.

So one way we can solve our problems of placing stickers, is by dividing the screen into more manageable areas. Let’s imagine an example where we want to have an image be placed near the four corners of our Lens.

We can do this by creating 4 Screen Image containers that correspond to Top Left, Top Right, Bottom Left and Bottom Right screen regions. And then, we will place our image stickers inside those containers. 

By doing this, our stickers will always be near the corners of the screen, no matter the aspect ratio. This works because every Screen Transform is related to their parents, and the parents screen transform is always a corner of the screen!

So I’ll do something like this: enable Pin To Edge setup on the screen edge I want them to always be attached to, and have the other side meet at the middle of the screen. 

For the top left container, it will look like this: the Left and Top Bounds Pin to Edge are enabled, and the Bottom and Right bounds are set to 0.

Now you can see how our stickers work well regardless of screen size!