Module 5
Scanning your Custom Location
Snapchat’s Custom Location Creator
Scanning
- Once the Lens launches, tap ‘Create New’ to begin the creation process. For first-time users, keep settings on default.
- Begin scanning the location. Try to scan the entire object/space (or as much of it as possible).
- To finish scanning, tap ‘Done.’ Otherwise, once the mesh reaches maximum capacity, the app will automatically move to the next step.
Capturing Perspective
- Determine the location from which Snapchatters are most likely to start engaging with your Lens. Go to those locations and wave your LiDAR-enabled phone to capture as many perspectives of the location as possible.
- Once you get the minimum required captures, you can move to the next step.
Verify the Results
Note: If the scanned mesh didn’t overlay well on the camera view, repeat the process again until you get better results.
[OPTIONAL] Supporting Capture using Third-Party Software
- While at your chosen location, open the Polycam app. To start a new scan, tap the ‘+’ icon (next to the gear icon) to initiate scan mode. Select ‘LiDAR Mode’ and tap the ‘Record’ button to start scanning. Just as you do the scanning process using Snapchat’s Creator Lens, scan your location from multiple perspectives by moving to a number of different angles and waving your phone.
- Blue mesh indicates areas that do not have full coverage. For a high-quality capture, try to get rid of as much blue as you can by capturing as many details as possible. Note that Polycam automatically merges any remaining blue areas at the end.
- To finish scanning, tap ‘Stop Recording,’ then ‘Process.’ You will be asked to select between ‘Space’ or ‘Object.’ If your location is a statue or monument, select ‘Object.’ If your location is a space like a storefront, select ‘Space'
Creating a New Project and Setting Up Custom Location AR
- Open the latest version of Lens Studio on your computer.
- Select ‘New Project.’
- In the Objects panel, click the ‘+’ sign and search “custom location.”
Tip: Make sure to use the Objects panel — DO NOT use the Resource panel, as the Custom Location Object is different from the Custom Location Resource. - In the pop-up box, enter your custom location ID and hit ‘Save.’ If this is the first time the ID is being used, it may take a couple of minutes before you will be able to see the mesh.
Tip: You can find the ID within the Custom Location Creator Lens. - Download complete: It may take a few minutes the first time, but once the Location ID loads, the scanned mesh will automatically be loaded and rendered in the Scene panel and associated resources will be auto-generated: Location Asset, Location Mesh, Location Material, and Camera Script.
- Assign Marker Reference: For review purposes, Snapchat requires Custom Landmarker Lenses include an Image Marker set to an image of the location itself. In the Objects panel, click the ‘+’ sign and search “image tracking.” Select ‘Image Tracking’ from the drop-down menu and hit ‘Enter.’
- Choose an image of the actual location from the files on your computer. You should now see the image marker object appear in the hierarchy within the Objects panel.
Designing UI for Custom Hints in Lenses
Loading Message
- Loading Ring: Set the Image Component Texture to “LoadingRingTexture” and add a TweenScreenTransform Script Component. Ensure the following are set: Play Automatically, Loop, Rotation Offset -150, Additive, 1s Time, 0s Delay, Linear, Out.
- Location Image: Set the Image Component texture to “LocationIcon [REPLACE_ME].” You should replace this with a circular image of your own. The position of this image should match the loading ring, so that the ring appears to rotate around the Location Image.
- Loading Text: Fill in the Text Component text to “Loading [Lens Title]” or a message of your choice. In our Lens, we added a reminder to “Please be aware of your surroundings.”
Tip: For additional guidance about positioning Screen Transform and styling Screen Text, check out the linked Docs articles.
Loading Failed
- Duplicate the Loading Message ScreenTransform and rename it to “Loading Failed”.
- Delete the “Loading Ring” Screen Image and rename the children to “Failed Icon” and “Failed Text.”
Failed Icon: Set the Image Component texture to “FailedTexture” or one of your own.Failed Text: Fill in the Text Component text to something like “Location data failure. Try again later.”
Go to Location
- Duplicate the Loading Message Object and rename the copy “Go to Location.” Delete the Loading Ring child.
- Keep the Location Image and add a new ScreenImage for the footstep animation named “Go to Image” and rename the text to “Go to Text.”
Tracking Setup
- Duplicate the Go to Location Object and rename the copy “Tracking Instruction.” Keep the Location Image and rename the other children “Point at Image” and “Point at Text.”
Tracking Troubleshooting
- Duplicate the Tracking Instruction Scene Object and rename the copy “Tracking Troubleshooting.” Duplicate the Screen Text inside so there are two Screen Texts.
- Rename the texts “Troubleshooting Header” and “Troubleshooting List.”
AR Interaction Hint
- Duplicate the “Tracking Instruction” Scene Object and rename the copy “AR Interaction Hint.” Delete all of the children except a single Screen Text.
- Rename the text and write a hint that is applicable to your Lens. In this example, the creative includes interactive heart assets, so we’ll write “FIND HEARTS.”
Fade in With Tween
- Add “Tween” from the Objects panel.
- Move the Tween Manager to the top of the Objects panel.
- Now we can add the animations. Add a Script Component with “TweenAlpha.js” to each Screen Image and Screen Text object. Change the Tween Alpha drop-down menu to “On Start” and configure the input time to 0.50. The rest of the settings can remain on their default.
- To automatically fade out the “ARInteractionHint” object after a few seconds, drag a second Tween Alpha script from the Resources panel to the ARInstructions Inspector. Configure this one to start at 1.00 and end at 0.00, and change the delay to a few seconds to give Snapchatters a chance to read the instructions.
Lens Hint Functionality
Loading Message Functionality
Location and Tracking Setup
- Write an UpdateTrackingMessage() function that checks if the DeviceLocationTrackingComponent.locationProximityStatus is within range and enables the associated UI hint. Then, bind this function to the Update event.
Troubleshooting Tips if It’s Been Too Long
Rear Camera and Safety Hint
Interaction Hint When Location Is Found
Behavior Trigger
- Add a “Behavior” by clicking the “+” in the Objects Panel.
- Select the new Behavior object.
- In the Inspector Panel, set Trigger to “Location Event” with Event type “Location Found” with Location Tracking set to the Camera’s Device Location Tracking.
- Set Response Type to “Call Object API.”
- Set Target Type to “Script API”, and drag the Hint Controller from the Objects Panel into the Script Component input.
- Finally, set Call Type to Call Function, and Function Name to “onLocationFound.”
Adding AR Content to the Scene
- Import Assets Import the 3D assets that you want to appear at your location. For this course, we opened the Asset Library and imported “Love Jungle” by Clara Bacou.
- Place Assets To position 3D assets in the scene, drag the 3D Assets as children of the Location Mesh script. This way, they will render correctly within the Custom Location AR coordinate space.
- Setup Occluders If your 3D assets intersect with the ground or the Location Mesh, use an Occluder (a mesh with an Occluder material) to make sure the 3D assets render correctly in AR. We added a plane, positioned it at the ground, and placed an occluder material on it.
Revealing Content When AR Tracking Starts
- Add “Behavior” Object
- Click the “+” sign in the Objects Panel to add another Behavior object.
- Name it “Behavior AR”
- Disable Location Mesh on Awake
- Set Trigger to “On Awake”
- Set Response Type to “Set Enabled”
- Set Target to the Location Mesh, and Action to “Disable.”
- Hide Custom Location AR Content on Awake Drag another Behavior Script from the Resources Panel onto “Behavior AR.” This one will disable the AR Content on Awake. Use the same settings mentioned above, but this time set the Target to the parent of your AR Content.
- Show Custom Location AR Content once tracking starts Drag another Behavior script from the Resources panel onto the “Behavior AR” object. This one will be used to show the AR content once the Custom Location AR is tracking. Set Trigger to “Location Event,” Event Type to “Location Found”. Drag the main camera from the Objects panel into the “Location Tracking” input. Set Response Type to “Set Enabled”, Target to your AR content, and Action to “Enable”
Adding Spatial Triggers
- Create Script Press “+” in the Resources Panel and search for Script. Rename the script “InteractionTrigger”
- Edit Script Select the new “InteractionTrigger” and in the Inspector Panel choose “Open in” to edit the script.
- Add inputs to trigger behavior based on the Snapchatter’s position. To do so, we will need a reference to the main Camera.
Add a float input named “distanceThreshold” to limit how close the Snapchatter needs to be to the object.
Add a second float input named “angleThreshold” to limit how strictly the Snapchatter needs to be looking at the object.
Add a third float input “cooldownTime” to specify how long you want to wait before allowing the trigger to happen again.
Lastly, add a string “triggerName” to create a Custom Trigger name that can be used by Behavior Scripts. - Setup Transform Variables To compare the Snapchatter position to the Object position, first get their transforms using getSceneObject().getTransform() and save these as “cameraTransform” and “arTargetTransform”.
- Setup Update Function Add a “checkForTrigger()” function that is bound to the UpdateEvent
- Get Positions: Inside checkForTrigger(), first get the positions of the snapchatter and the target using Transform.getWorldPosition() and store these as “arTargetPos” and “cameraPos”
Aim Check
Distance Check
Finish Check
Add Trigger Reaction
Other Behavior scripts must use the same triggerName to react appropriately.
Reaction Example: Particle Burst
- Add InteractionTriggers to Target Objects: Drag the InteractionTrigger script onto each of the Heart objects. Fill in the script inputs. Drag the camera into the camera field, set cooldownTime to 2, and write a specific triggerName. We named ours trigger + the name of the object.
- Place Particles in Target Objects Drag the “GPU Particle Sparkle” Prefab from the Resources Panel onto each heart in the Objects panel so that the particles are a child of the heart object. Use the Scene Panel to confirm the position looks right.
- Hookup the event Click on each instance of the “GPU Particle Sparkle” prefab and type the same triggerName into the ParticleHandler script that is used in the associated Heart object’s InteractionTrigger script. This way, the particles will automatically react to the trigger behavior on the heart!
Test and Publish Lens
Press “Send to Snapchat.” Interact with your Lens to make sure the garment is tracking to the body and is responsive to movement. Ensure the Lens is exactly what you envisioned before you submit it to Snapchat.
CONCLUSION