Panels
Lens Studio is made up of a series of modular panels. The following guide walks through each panel's function in Lens Studio and the associated interface elements.
If you ever get lost in Lens Studio, you can also click Window > Panels > Default Layout
in the Lens Studio menu bar to reset your Project window.
Scene
The Scene
panel is where you can interact with the 3D objects in your scene. In the Scene
panel, you'll be able to visually move, rotate and scale objects. The Scene
panel's toolbar gives you access to various controls for the camera.
Scene Screen Mode
The View 2D Scene
and View 3D Scene
buttons toggle between the 3D scene and the 2D scene of your Lens project. The 2D scene mode is primarily used for visualizing and editing 2D objects like Screen Image, Post Effect and Face Effects. By default, selecting an object in the Objects
panel will automatically select the best scene mode for that object. This can be disabled in the Lens Studio preferences by unchecking Auto Switch 2D / 3D Scene Panel
.
Scene Object Selection
Objects in the 3D Scene
can be selected by clicking the object in the Scene Panel. Similarly, in the 2D Scene
, all 2D elements are rendered in the scene and can be selected by clicking them in the Scene
panel. For information on manipulating objects, refer to the Toolbar and Shortcuts guide.
Scene Camera Orientation
Clicking on a face of the camera orientation cube allows you to set the scene camera to a specified orientation. The available orientations are Front, Left, Right, Back, Top and Bottom. Clicking the Home button will return you to the default camera orientation. Clicking on the Setting button will give you more options for visualizations.
Objects
The Objects
panel shows you the hierarchy of all objects in your scene. Objects can be parented and un-parented in the objects panel by dragging them up and down the hierarchy while holding the Left Mouse
button down. For 2D effects like Screen Image
and Post Effect
, the Objects
panel also controls the render order. The bottommost objects are rendered last making them appear in front of the topmost objects.
An object's Render Order
setting in the Inspector
panel must be set to Auto
for them to respect the Object
panel's order for rendering. Objects default to Auto
enabled. If Auto
is disabled, the object's render order must be configured manually.
By default, 3D objects respect depth in relation to other 3D objects to determine render order. However, in relation to 2D objects, a 3D object's render order is determined by its order in the Objects
panel.
Add New Object
The +
button allows you to add new objects to your scene. The Empty Object
selection adds an empty object while the Empty Child Object
adds an empty object as a child of the currently selected object. Additionally, with the Add New Object
button, you're able to add objects that come with preset components including the Camera, Light, Image, Liquify, Mesh Visuals, Screen Image and Post Effect objects.
Search
Clicking this icon will prompt for a search keyword. The Objects
panel hierarchy will then be filtered by the inputted keyword.
Enabled / Disabled Objects
Objects can be enabled and disabled by clicking the checkbox icon to the right of the object name. Disabled objects will not be visible.and will not execute script.
Display Mode
You can change the display mode of the objects panel to sort by Layers or Render Order.
Inspector
The Inspector
panel allows you to add and edit components on the selected object. Components are the building blocks of objects. They define what an object does and how an object is visualized. In addition to adding components, the Inspector
panel allows you to edit parameters of existing components. Note, all objects are required to have a Transform
component. The Transform
component gives you the ability to tune the object's Position, Rotation and Scale.
Render Order
The Render Order
option becomes active for any object that has a visualization (e.g. MeshVisual). By default, all visual objects begin with Auto
enabled. For 3D objects, Auto
means that the objects are rendered by depth. For 2D objects, Auto
means that the render order is determined by their order within the Objects
panel. For more information on how object ordering within the Objects
panel works, please see the above Object
panel section. If Auto
is disabled, render order must be manually configured via the Render Order
text field. When manually configuring render order, low numbers are rendered first (below) while high numbers are rendered last (on top).
For the most part, you can ignore Render Order
and keep Auto
enabled. Only when you are having render ordering problems that can't be solved by ordering objects in the Objects
panel will you have to manually configure the Render Order
text field.
Render Layers
The Layers
box allows you to configure which render layer the object should be part of. Each Camera
object in your scene allows you to configure which render layers the camera can see.
For the most part, you can ignore Layers
and keep it set to the Default Layer
. You only need to worry about Layers
when working with multiple cameras in the scene.
Collapse Component
Clicking the component name will collapse the component for a cleaner Inspector
panel.
Enable / Disable Component
Clicking the check box will toggle the component to be enabled or disabled.
Remove Component
Clicking this icon will allow you to remove or disable the component.
Add Component
The Add Component
button allows you to add desired components to the selected object. Clicking Add Component
will give you a list of all available components that can be added. Selecting from the list will then add it to the object.
Resources
The Resources
panel lists out all resources currently available in the project. Resources include Meshes, Materials, Textures, Scripts, Sounds and more. Resources can be added to the project by dragging and dropping a valid resource into the Resources
panel. For more information about managing resources, follow the Importing and Updating Resources guide.
Add New Resources
The Add New
button allows you to add new resources to your Lens Studio project. Once selected, select the Import Files
option to add in your own custom resources. Some resource types, like Mesh and Material, have built-in resources that you can add to your project. The Mesh resource type will allow you to add some basic primitive meshes. The Material resource type will allow you to add some basic materials like Unlit, Diffuse, PBR and more. On top of that, the Add New
button allows you to create folders to keep your resources organized.
Filter Resources
Use this drop down to filter the Resources
panel by type of resource.
Search Resources
The Resources
panel can be filtered by keywords by clicking the search icon and typing in the search box.
Resources View Mode
The view mode of the Resources
panel can be toggled between a list view and a grid-based icon view.
Preview
The Preview
panel allows you to see what your Lens would look like within Snapchat without having to open your device. The Preview
panel updates in real time as you make changes to your scene. For more information on the Preview
panel and its features, see the Previewing Your Lens guide.
Scene Config
The Scene Config
panel allows you to set the Live Target, the Capture Target and quickly rearrange the camera render order. For more information on the Scene Config panel and its features, see the Camera and Layers guide.
Pair To Snapchat
The Pair Your Device
button allows you to pair Lens Studio with your Snapchat application. When paired, changes made in Lens Studio will be automatically synced to your device for testing. For more information on pairing, see the Pairing to Snapchat guide.
Logger
The Logger panel provides insights into the state of your Lens as well as Lens Studio itself.
You can use the print()
function in a script in order to print to the debugger. Check out the Debugging guide for more information.
Option Bar
At the top of the Logger
panel, there are several options which you can use to help you find the log lines you are looking for.
Clears the current logs.
Clears the logs every time the Lens is refreshed.
When surrounded by a light gray box, informational logs will be visible.
When a log is hidden, the number of logs hidden is shown next to the type icon:
When surrounded by a light gray box, warning logs will be visible.
When surrounded by a light gray box, error logs will be visible.
You can create an error message using the JavaScript throw function. For example, throw("This is an error!");
would result in:
Filters the log based on the text inputted.
When surrounded by a light gray box, logs pertaining to Lens Studio, including when a project is saved, will be visible.
When surrounded by a light gray box, logs pertaining to the Lens, including errors from a script used in Lens, will be visible.
Additional Options
The Settings button provides additional options for modifying what is visible.in your logs, such as whether time is shown or logs with the same messages are grouped. Additionally, you can change the size of the messages printed, or export the logs as a text file.
When a log is grouped you will see a number next to the log line.