Adding 3D Content
This is the second tutorial in the Building Your First Lens series. This tutorial series walks through all of the steps for creating your first AR project (Lens) in Lens Studio. At the end of this series you will have recreated the Birthday Countdown sample project, learning all of the steps and pieces to create your own AR experiences.
This step of the tutorial focuses on adding pre-built 3D content into your Lens. Note, this projects begins from the end of part 1, Built In AR effects. While the content in this tutorial can be viewed individually, it is recommended that you follow along using the project created in the previous section.
Prerequisites
- Download the latest version of Lens Studio
Adding Content To Your Lens
So far we’ve only modified what’s in the Camera. Let’s take a look at how we might add digital content to the camera!
Attaching the digital experience to the real world begins with “tracking”. That is: making the digital content track to the camera feed. Lens Studio comes with many built-in trackers to make this simple.
Let us start by adding a Head Binding which is a component that automatically tracks the user's head. It is useful for attaching content that moves with the user.
In the Scene Hierarchy panel, click the + button and search for Head Binding.
Note: that a Face Occlusion object is added along with the Head Binding. This is used to hide digital objects as they go behind the user`s head to create a more realistic effect.
Next, let's add a mesh to our Scene.
Select the Head Binding object in the Hierarchy, then click the + button, go to the 3D Section, and select one.
In this example, we are building a Birthday Countdown Lens, so we will add a Cone which we can use as the birthday hat.
The cone is now a child object of the Head Binding object and will begin to move with the user.
Child objects inherit the values of their parent's Transform component. That is, as the parent moves positions, the child will move by the same amount.
Note: The Head Binding component, is essentially changing the position and scale values of its Transform component to match the user's head, causing any child objects to do the same.
We will adjust the position of the cone in the next step.
In the meantime, we may notice that the cone is being warped. This is because it is being affected by the Face Stretch object.
To remedy this, we can set the render order of the Cone to 1.
Our cone moves with the user moves, but it isn't a very convincing hat just yet. Let's reposition it, so it is placed on the user's head.
An object can be repositioned by modifying the properties of its Transform component in the Inspector Panel.
However, it can be tedious to position things with just numbers, so in the next step, we will show how to modify these values using the Scene panel.
Note: Since the Cone is a child of the Head Binding object, the values in its Transform Component are offsets from the position of the Head Binding.
Ensure the Scene Panel is open by going to Window > Default Layout.
Select the cone in either the Hierarchy panel or 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.
Once you're happy with the position of your cone, we can modify its appearance to be something more worthy of a celebration!
To do this, we will want to create a new Texture which we can apply to the hat.
Select the GenAI Suite button in the upper right corner , then select GenAI.
This is the GenAI Suite panel which has a ton of AI features you can use to generate effects and assets for your Lenses.
Let's select Texture and enter a prompt to generate a texture which we will apply to our hat.
Click Apply to save the generated texture.
The generated texture will be added to your Asset Browser panel with the same name as the text you entered into the prompt.
The Asset Browser contains all of the assets available for use in your project. Selecting an asset will show a preview of it in the Inspector view.
Select the cone, and take a look at the Render Mesh Visual component in the Inspector.
This component controls how the 3D object will appear by rendering a mesh, a cone in our case, through the use of a Material. In the next step, we will modify this "PBR" material for our needs.
With the cone selected, click the settings button next to the PBR material in the Render Mesh Visual component. This will display various input fields for this material.
We will go into more details on Materials at a later point, but for now we want to select the Base Texture and replace it with our generated Texture.
There we have it, our cone is now a hat!
Summary
Lens Studio provides several tracking components which can be used to attach digital content to a real-world object.
Combining these trackers with assets created with the GenAI Suite can be a great, no-code workflow for creating your Lenses.
Tip: Check out the other options available in the GenAI Suite! We are always adding more!