[Example Project] Make a Snap Camera Lens!Featured
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.
(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!
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
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!
Thanks, Actually I wasn't paying attention to Snap Camera lenses, but when I sow the statistics of my lenses I sow that many people use my lenses within the app.
It will be fun to do online meetings as many people now working from home.
You are welcome UAEpro!
I definitely use Snap Camera on every meeting now :D
BTW When you make lens and publish it you can copy its url directly into Snap Camera search box to quickly find and test it out
I'm trying to pin a bottom border to the bottom of the live view and the logos seem to get distorted pretty bad when streaming through Zoom. What is the ideal size of the graphic I should create in order for it to fit across the bottom of a desktop computer? I'm at 2048 wide now but wondering if that's not the right size. Thanks in advance for the help.
2048 should be enough! If it is being distorted then most likely the problem is not in texture resolution but in Image Component / Screen Transform set up.
I would use something like this to make sure it's stays in place
Pin To Edge: pin to left - right - bottom edges to keep it attached to the bottom of the screen
Fix Size: locking image height in place
Stretch Mode: Fit Width will work here nicely since you have horizontal image
Vertical Alignment: attaching texture to the bottom edge of its bounding box
This is how it looks in snap camera
And on mobile device
You can also add bottom padding to the screen transform if you don't want it to be all the way down there :)
Download this project
Let me know if it works for you!
Since the last update, the OrientationTypeController script doesn't work. It divides the background in half between the background image and the background color. It will work briefly if you start in horizontal mode with the Fullscreen Background vertical and Background horizontal unchecked then checking both. But if you switch to a phone mode and back to horizontal mode, the effect is broken.
Okay I had to move the Background Widescreen image up in 3D view and it works now. Great project!
دخول حسابي سناب
Thank you for the great tutorial! I submitted my lens and it was approved, however when using it on the Snap Camera application I see it distorted. Any advice on what could be the issue?
Hey is there a straightforward way to ensure the the lens preview and the image captured stay in a constant aspect ratio irrespective of the aspect ratio of the device.
I saw such an option to fix aspect ratio while placing images, but not for camera previews.