Physics Lab
The Physics Lab Template showcases fun physics puzzles which are built with Lens Studio’s Content Editor Tools. The Physics Lab consists of two parts: Tutorial and Sandbox. This guide will navigate you through both parts and help you get familiar with using the Content Editor Tools for your own projects.
1 - Tutorial
The Tutorial consists of seven puzzles each of which demonstrates one of the Content Editor’s manipulation tools (ie. Scale Manipulator, Rotation Manipulator, etc.). Completing each puzzle will take you to the next one. After completing all seven, you will progress to the Sandbox.
In every puzzle you can see a “Skip Tutorial” button above the Snap Button. Pressing “Skip Tutorial” will skip all remaining puzzles and enter the Sandbox immediately. We recommend that you complete all of the puzzles before entering the Sandbox.
1.1 - Select Manipulator
The “Select” puzzle demonstrates how the Select Manipulator enables Snapchatters to select 3D assets within the Lens. To complete the puzzle just tap on the ball. The Selection Manipulator allows the ball to be selected.
Please keep in mind that “Select” is one of the fundamental manipulations of the Content Editor. In each of the following puzzles you will need to perform “Select” manipulation before any other manipulations.
In Tutorial puzzles a yellow line will appear between the task text and some piece of content, indicating that you should select that piece of content.
1.2 - Move Manipulator
The “Move” puzzle demonstrates how the Move Manipulator lets Snapchatters move selected 3D assets in the Lens. To complete this puzzle, tap to select the ball again, and drag the selected ball to move it into the yellow box.
1.3 - Scale Manipulator
In the “Scale” puzzle you will learn how to use a manipulation button: the Scale Manipulator. Unlike the “Move” Manipulator, the Scale Manipulator requires dragging a Scale button before Snapchatters can adjust the scale of a selected 3D asset within a Lens. To complete the “Scale” puzzle, tap to select one of the weights. A menu will pop up around the weight. Hold the Scale button and then drag to increase the weight.
1.4 - Rotation Manipulator
The “Rotate” puzzle introduces the Rotation Manipulator, which allows Snapchatters to rotate selected 3D assets within a Lens. The goal is to rotate the platforms so that the cannonballs go through the hoop. To complete this puzzle, tap to select a platform, then hold the Rotate button, and drag to adjust its rotation until the ball goes through the hoop.
Content Editor has also two other Rotation manipulators which represent remaining axes of rotation. You will be able to try them in the Sandbox.
1.5 - Clone Manipulator
The “Clone” puzzle demonstrates the Clone Manipulator which lets Snapchatters make copies of selected 3d assets within a Lens. The goal of the puzzle is to get the cannonballs to land in the hoop by copying platforms to manipulate the scene. To complete the puzzle, tap to select the highlighted platform, then hold the Clone manipulator button, and drag from the platform out-ward to pull out a clone. When you drag far enough from its original position – the clone of the platform will be created. Now you can drag the cloned platform to a position where it helps guide the cannonball through the hoop.
1.6 - Delete
The “Delete” puzzle teacheshow Snapchatters can delete selected 3D assets from a Lens using the Delete Manipulator. The goal is to free a balloon from its ballast. To complete the puzzle, tap to select the ballast weight, then tap the Delete manipulation button to free the balloon.
Don’t be afraid to delete your content pieces. You always can use the Undo button to put your deleted content back into the scene.
1.7 - Parent Manipulator
The last but not least, “Parent” puzzle demonstrates one of the most powerful manipulation tools of the Content Editor: the Parent Manipulator. The Parent Manipulator lets Snapchatters group a selected 3D asset under another 3D asset in the Lens. This way, if the parent moves or rotates, the children will move or rotate with it. The goal of the puzzle is for the gear to deliver the weight into the target zone. To complete the puzzle, tap to select the highlighted weight, then hold the Parent manipulator button. Dragging the weight to the center of the gear results in the gear becoming the parent of the weight. Now when the gear rotates, the weight will be moved to its target.
When in the Sandbox, try combining Parent manipulation with Clone manipulation. You will be able to quickly create a bunch of unique results.
2 - Sandbox
When you complete the last Tutorial puzzle, you will enter the Sandbox. The Sandbox starts with an empty scene. You can add 3D assets to the Lens from the Content Provider menu and edit the 3D assets using the same Content Editor Manipulators from the Tutorial.
2.1 - Content Editor Tools
Physics Lab Template provides you with a ready-to-go setup of the Content Editor Tools. Let’s take a closer look at every component’s place and function in the Lens Studio project.
2.1.1 - Content Editor
The Content Editor custom component is a foundation of your Content Editor Tools project. It allows users to perform a set of different manipulations on editable Scene Objects in the Lens scene. Content Editor also provides built-in UI: toggle bar which includes Play/Edit button and Undo/Redo buttons, reticle with manipulation buttons and info text.
Tap the Play button to start the simulation.
The Content Editor’s Inspector view has two groups of settings: Inputs and Options.
- Inputs (Required):
- Content Camera – inputs a Camera component which renders content visuals.
- Render Target – inputs a Render Target texture which is used as a Live Target in the Scene Config, it is used to include Content Editor’s UI visuals into the render pipeline of the Lens.
- Options:
- Start In Edit Mode – this flag tells Content Editor to enter Edit Mode on the start of the Lens.
- Use Aim To Select – this flag allows Content Editor to seek for editable content in front of the Content Camera, if enabled you will see a small reticle in the center of your screen, which will show a Select button when the content is visible in the small reticle.
- Set Render Order – when this flag is checked you will see a hidden input field with Render Order integer, use it to change render order of the Content Editor’s UI when required.
- World Understanding – inputs a World Understanding instance, it enables Magnetic placement manipulator with information about your real world surroundings.
- WorldUnderstanding: To use the World Understanding feature, first drag the World Understanding component from the
Asset Browser
panel to set the typename. Afterwards, another input appears for the World Understanding instance in your Scene.
"Inputs" and “Options” groups in the Inspector view is a common thing across all of the Content Editor Tools custom components. The “Inputs” part is mandatory while the “Options” one is optional.
Some of the manipulation buttons of the Content Editor were not demonstrated in the Tutorial part. We encourage you to try every manipulation button of the Content Editor, when in the Sandbox.
2.1.2 - Content Provider
The Content Provider custom component’s main function is to provide your Lens scene with content. It comes with its own default UI menu for picking content.. More options and categories can be added to the Content Provider using Content Provider Option and Content Provider Category custom components. We will tell more about these components and how to use them in chapter “2.3 - Adding Custom Content”.
Content Provider’s component inputs are all placed under the "Options" group. Thus no action is required from you by default when setting up the Content Provider. However when the Create Default UI flag is checked, its sub-groups contain some mandatory input fields:
- ContentEditor: inputs a typename of the Content Editor custom component in your project (required for later input of the Content Editor custom component instance).
- Options:
- Target – Ttarget for content spawning, e.g. the parent Scene Object for newly spawned content pieces (If using persistant content withtypically Content Storage, set the Content Storage’s Scene Object is used as the Target).
- Use Default UI – this flag tells Content Provider to use the default UI menu for picking contentits own built-in Default UI Controller.
- Default UI Inputs:
- Content Editor – inputs an instance of the Content Editor custom component. , (Uit is used to adjust the default UI menu based on the track Content Editor’s UI state .)and adjust Content Provider’s Default UI Controller view based on it.
- Content Camera – Tinputs the Camera component which renders the contentcontent visuals., (Uused tofor positioning of the newly spawned content pieces.)
- Render Target – The inputs Render Target texture setwhich is used as thea Live Target in the Scene Config. (U, it is used to include Default UI Controller visuals in the Lens’into the render pipeline.) of the Lens.
- Default UI Options:
- Set Render Order – check to when this flag is checked you will see a hidden input field with Render Order integer, use it to change the render order of the default UI menuDefault UI Controller when required.
- Content Distance – the distance in centimeters atin which content pieces will be spawned in front ofrelatively to the Content Camera.
- Content Scale – a scale multiplier which will be applied to the spawned content pieces.
- Content Editor – inputs an instance of the Content Editor custom component. , (Uit is used to adjust the default UI menu based on the track Content Editor’s UI state .)and adjust Content Provider’s Default UI Controller view based on it.
We strongly recommend starting from the default UI as a base, as it is fine tuned to work well with the Content Editor’s UI modules.
2.1.3 - Content Storage
The Content Storage custom component enables spawned content to be saved at the location they were spawned. It stores the Snapchatter’s editing progress using Location Cloud Storage Module. A Location Asset Proxy is used by default, this type of Location Asset doesn’t have any location related to it, but still allows you to use Location Cloud Storage capabilities. When stored data is retrieved by Content Storage, it then relies on the Content Provider component to restore the stored content in the scene.
To store content at your own specific real world location, refer to the Custom Location AR Template guide for information on how to create your own Custom Location Asset .
The Content Storage custom component’s Inspector inputs described below:
- ContentProvider: inputs a typename of the Content Provider custom component in your project (required for later input of the Content Provider custom component instance).
- Inputs:
- Content Provider – theinputs an instance of the Content Provider component in your scene.custom component, (Uit is used to track newly spawned content that needs to be stored.)and persist them if needed.
- Location Cloud Storage Module – theinputs a special asset, called Location Cloud Storage Module from your project
Asset Browser
panel., (Uwhich is used to discover location stores for listing, saving and deleting information about persisted content.) - Location Asset – theinputs a Location Asset to be, which is used by Location Cloud Storage Module to discover related location stores.
- Collection Name – the name of the current collection of stored content.persistable collection, (Ccan be used to switch between different sets of persisted content within one Location Asset.)
- Options:
- Stores Parent – theinputs a Scene Object to use, which will be used as a parent for location store Scene Objects. Typically this input is left empty or the same as the provided with a parent Scene Object of your Content Editor Tools scene.
- Wait For Tracking – this flag when checked tells the Content Storage to wait for the Device Location Tracking Component to track before discovering location stores.
2.1.4 - World Understanding
The World Understanding custom component enables the Magnetic Placement Manipulator in the Content Editor. The Magnetic placement manipulator can snap content to real world surroundings like floors, walls, tables etc.
The World Understanding component’s Inspector inputs:
- Inputs:
- Content Camera – theinputs a Camera component which renders the spawned content .visuals, u(Used to render for rendering of the detected real world surfaces.)entities.
- Device Tracking – theinputs a Device Tracking component instance in your Scene., which is u(Used to initialize tracking capabilities of the World Understanding.)
- Options:
- Active Material – theinputs a Material to render a target detected surface during Magnetic manipulation.asset, which is used for rendering of the detected entities when the Content Editor is engaged in Magnetic manipulation.
- Inactive Material – theinputs a Material asset, which is used for rendering of the detected entities at any given moment of time when Active Material is not used.
The Learn more about how World Understanding component uses the same World Tracking Planes explained in the’s tracking works from World Tracking Planes Template.
2.2 - Adding Custom Content
To add your own assets to the Content Provider, we will go over adding your own Content Provider Option that references an Object Prefab containing your custom asset and its desired features: Content Editable, Content Persistable, and Content Configurable.
We’re going to use a Ducky asset from the Asset Library in our example, but you can use any asset you want.
2.2.1 Create Content Provider Option component
First we will need a Content Provider Option component placed under one of the categories in the Content Provider’s Scene Hierarchy
panel.
Content Provider Option Inspector inputs:
- Content Key – a unique string to identify this specific asset. (If using Digital Goods, we recommend matching this key with the digital goods SKU)
- Content Prefab – the Object Prefab that will be spawned. This should contain your asset alongside it’s desired features (ie Content Editable, Content Persistable, and/or Content Configurable)
- Content Icon – the Texture to represent this asset in the Content Provider’s default UI menu.
2.2.2 Add Content Editable component
A Content Editable component is required for content to use the Content Editor Tools (Select, Rotate, etc.) Let’s add a Content Editable component to the Ducky Object Prefab. Adjust the Bounding Size input in the Inspector so that the yellow box encapsulates your asset. Then hit “Apply”.
2.2.3 Add Content Persistable component
A Content Persistable component is required content to be stored by the Content Storage component so it can persist in future uses of the Lens. Let’s add a Content Persistable to the Ducky Prefab and press “Apply”.
2.2.4 Add Content Configurable component
Let’s add a Content Configurable component to the Ducky Prefab and press “Apply”. This will be used by the Physics Configuralbe script which adds custom configuration options to the Ducky.
2.2.5 Add Physics Configurable script
The Physics Configurable script should be placed on any editable content that uses physics.
Physics Configurable Inspector Inputs:
- Content Editor - the Content Editor component instance in this scene.
- Content Configurable - the Content Configurable component instance on this prefab.
- Body Component - the Physics Body component used for this asset.
First, let’s add physics to our Ducky by adding a Physics Body Component to the Ducky Mesh.
Learn more about Lens Studio physics from Physics Template.
Now that our Ducky uses physics, we will add a Physics Configurable script to the Prefab, set its inputs, then hit Apply.
Now that the changes are saved into the prefab, you can remove the prefab from the Scene Hierarchy
panel and try spawning it in the Preview Panel.
2.2.6 Try it
Start the Sandbox in the preview. Hit the Plus button to open the Content Provider’s default UI menu. Press the Ducky icon to add your Ducky asset to the scene. Edit the Ducky using the Content Editor Tools. When you reset the lens, you should see the Ducky persist how you left it thanks to Content Storage.