Building Your First Spectacles Lens
This tutorial walks through the steps to build your first Lens on Spectacles.
Through this tutorial you will become familiar with the workflow of Lens Studio and be ready to continue your Spectacles journey to build robust AR experiences.
Prerequisites
- Download the latest compatible version of Lens Studio
- Download the Spectacles mobile app
Setting up Your Lens
Open a New Project
This tutorial series will build a Lens starting from the default Lens Studio project.
If this is your first time opening Lens Studio, you will automatically open to a new Default Project.
Add a Box to the Scene
In the top left of Lens Studio, you will find the Scene Hierarchy panel. The Scene Hierarchy panel contains everything that is in your Lens.
Click the + button to add an object to the scene. In our case, we will add a box.
Adjust the placement of the box
Select the Box by either clicking its name in the Hierarchy panel or selecting it directly in the main Scene view. Then you can select a modifier tool in the top bar or by using the following hotkeys:
- W: Translate tool, for changing the position.
- E: Rotate tool, for changing the rotation.
- R: Scale tool, for changing the size.
- F: focus view on selected object.
- Mouse Scroll: change zoom.
- Middle Mouse click + drag: move through scene.
- Right Mouse click + drag: rotate the view in the scene.
Adjust Preview Window Settings
The Preview Window on the right of Lens Studio is the visualization of your Lens as it runs.
Let's change the settings to get a better idea of how this Lens will look on Spectacles.
- Set the simulation mode to Spectacles (2024)
- Switch the Preview mode at the top to Interactive Preview
- Untoggle the Full Screen Spectacles Simulation
- Set the simulation Frame Rate
Move around in Preview
You can now move around the world in the Preview window:
- Right Mouse click + drag: rotate the view in the scene.
- WASD keyboard keys: move through the scene.
Let's fix this in the next step!
Add Device Tracking Component
Scene Objects, such as our Box, or Camera Object are comprised of components which can be easily added to adjust their behavior in your Scene.
As you work in Lens Studio, much of your workflow will be adding various components and configuring their values.
Let's add the Device Tracking component to the Camera Object by selecting the Camera in the Hierarchy, then clicking Add Component in the Inspector panel.
Finally, set the Tracking Mode of the new component to World
The Device Tracking Component allows us to track the position of the camera as we move around the world and thus will make it so objects in the Scene will stay in their locations as we move around.
Move Around in the Preview, again!
Now we can see that if you move around in the preview panel, the box will stay in the same location in space as we change the view.
Note: If you are having a difficult time locating the box, you can reset the Interactive Preview using the reset button in the lower right corner of the panel.
Great work! Now in the next section, we will test our Lens on the device!
Testing on Spectacles
Adjust Project Settings
Open the Project Settings window and select Spectacles in the Lens is Made For option.
Connect Spectacles
Next, ensure your Spectacles are turned on and select the Connect Spectacles button in the top-right corner.
Additional connection options for Spectacles can be found on the Connecting Lens Studio to Spectacles page.
Preview Lens on device
Once connected, select the Preview Lens dropdown and Send to Connected Spectacles
At this point the Lens will be automatically sent to your device.
Test the Lens on Spectacles
Now you can move around your space and see your box in the world.
Great!
Now we have successfully tested our Lens and can see that everything is working perfectly.
In the next section we will take this Lens further by adding interactions with the world around us.
Spawn Object on Surface
Import the Surface Detection Asset
The Asset Library is a collection of assets created by Snap and the community that will help you build your Lenses.
Select the Asset Library button in the upper left corner to open it.
Once open, select the Spectacles section to find several helper assets designed specifically for Spectacles.
When ready to proceed, import the Surface Detection asset.
Add Surface Detection to Scene
When we import the asset into our project, it is added to the Asset Browser in the lower left corner.
The Asset Browser contains all of the assets available for use in your project, but assets here will need to be included in the scene to apply in the Lens.
Open the asset folder, to find the SurfaceDetection_ADD_TO_SCENE prefab.
Prefabs are preconfigured and reusable assets that are ready for use in your Lens.
Select the prefab and drag and drop it into the Hierarchy.
Set Refereneces in Component
When you add the prefab to your scene, you will notice an error in the Logger at the bottom of the screen.
This error is due to a missing reference in one of our newly added components. In this case, it is a missing reference in the SurfaceDetection script.
Select the SurfaceDetector object and in the Inspector you can see there is no value in the Cam Obj field.
Drag and Drop the Camera into this field to set the reference.
Deactivate Box
Looking at our new objects, we can see the Visuals [REPLACE CONTENT] object in the Scene Hierachy has a groundPlane and cube as child objects.
These came preconfigured with the SurfaceDetection Prefab we included in our Scene.
Since this prefab already includes a cube which will be placed on a surface, let's set our Box to inactive so it will no longer appear in the scene by deselecting the checkbox.
Preview Surface Detection Lens
Let's test again on our Spectacles by selecting the Preview Lens dropdown > Send to Connected Spectacles.
On our device, we can now look at a surface, and once the surface is confirmed, our cube will appear!
Import a 3D model
Boxes are fun and all, but let's level up this experience by replacing the provided cube with a new 3D object.
Return to the Asset Library, select the 3D category, and choose an asset that you want to bring into your world!
We will use the Kitty in our example.
Replace Visal Content
As the Visuals [REPLACE CONTENT] object indicates, we can easily swap the content that appears on the surface.
Delete the groundPlane and cube objects.
Then drag and drop your newly downloaded prefab onto the Visuals object. This will add it as a child of the Visuals object.
Test on Device
Finally, we are ready to see our kitty in our world.
Select Send to Connected Spectacles again and there we go!
Great job!
Summary
Great job! With this tutorial completed, you are now familiar with the workflow for building Lenses for Spectacles.
As a next step, continue onto the Spectacles Interaction Kit section of the documentation to get up to speed on pre-built ways to interact with your AR content.
Tip:If you return to the Lens Studio Home Page, and select the Spectacles Starter Project. The Spectacles Starter Project includes the Spectacles Interaction Kit, and provides optimal settings for building Lenses for Spectacles.
Happy Building!