An Introduction to Snap Lens Studio for the COMP 4010 course, taught on July 27th 2021 by Mark Billinghurst

1. SNAP LENS STUDIO
A crash course
Mark Billinghurst
mark.billinghurst@auckland.ac.nz

2. 2016 Superbowl Ad

3. 2016 Superbowl Advertisement
• 30 second slot cost ~ $4.5 million USD
• Viewed by ~112 million people

4. 2016 Tacohead
• Taco Bell mobile AR campaign
• 224 million views in one day
• $500K-$750K USD to develop
• Snapchat sponsored lens

5. Snapchat
• Founded in 2011
• Picture based social media application
• Over 280 million daily users (5/21)
• >4 billion pictures send everyday (2020)
• 82% of US teens use Snapchat once a month
• $2.5 Billion revenue in 2020

6. Snapchat Lenses
• Introduced in 2015 (Snap acquired Looksery)
• Add AR content to live camera view
• Use face detection/tracking
• In 2017 AR “World Lenses” introduced
• Virtual content fixed in space

7. Lens Examples

8. World Lens
https://www.youtube.com/watch?v=K6x44v8prFA

9. Making Snap Lenses
• Lens Studio (2018)
• Visual authoring tool
• https://lensstudio.snapchat.com/

10. Setting Up
• Go to https://www.snapchat.com/
• Install Snapchat on mobile phone
• Create an account
• Download and install Lens Studio
• https://lensstudio.snapchat.com/

11. Lens Studio

13. EXAMPLE – TACO-HEAD

14. Process
1. Add taco image to resources
2. Add Face Image to scene objects
3. Set face image texture to taco
4. Resize taco image
5. Add Face Inset for mouth
6. Add 2 Face Insets for eyes
7. Publish lens
8. Done

15. 1. Add Resource
• Find Taco image with transparent background
• Download to local machine
• Drag into the resources area

17. 2. Add Face Image to Scene
• Hit ‘+’ to add object to scene
• Search for Face Image
• Add to scene
• Select Head Binding
• View inspector
• Attach to point Face Center

18. 3. Set Face Image to Taco
• Select Image 1
• Open inspector
• Click and drag taco image from
resources into texture slot

20. 4. Resize Taco Image
• Select Image1
• Open Transform in inspector
• Set x, y scale values to 120.0, 120.0
• Or whatever looks good to you

21. 5. Add Mouth Face Inset
• Add face inset to scene
• Select Face Inset 1
• In inspector make sure Face
Region is set to Mouth
• Select Face Inset Binding 1
• In inspector, in Head Binding set
Attach To Point to Mouth Center
• Rename Face Inset Binding to
Mouth Face Inset

22. 6. Add Left and Right Eye Insets
• Add Face Inset to scene
• Select Face Inset
• Set Face Region in Face inset to Left Eye
• Select Face Inset Binding
• Set Head Binding Attach to Point to Left Eyeball
• Rename Face inset binding to Left Eyeball
• Repeat for Right Eyeball

23. Project Demo

24. 7. Publish Lens
• Click Publish Lens button
• Fill in project information
• Use front camera only
• Add taco-head logo
• Complete submission on web

25. 8. Done
• Wait for Snapchat lenses website review (10 minutes?)
• Share Snap code with friends

26. Lens Insights
• asdf

27. ADDING BEHAVIOURS

28. Methods for Adding Interaction
• Drag and drop
• Simple behaviours
• Using object components
• Visual Scripting
• Node based
• Coding
• Javascript

29. Adding Taco Behaviour
• When mouth open !Taco! text appears
• Key Elements
• Taco Text
• Text positioning
• Text material/colour
• Mouth open detection
• Mouth close detection

30. Key Steps
1. Create text object
• Attach to face, set font size, colour
2. Create Scene Manager object
3. Create Visual Script and add to Scene Manager
4. Add nodes to visual script
• Mouth open/closed, text input, set text nodes
5. Done

31. 1. Create Text Object
• Create text object in Object list
• Drag to be under head binding object
• Attaches to head video
• Open text object inspector
• Type in sample text
• Set text properties
• Font size, colour, drop shadow, etc.
• Position/rotate text

32. 2. Add Scene Manger Object
• Add Scene Object to object list
• Place at top level
• Rename as SceneManager

33. 3. Add Visual Script
• Add Visual Script to Resources
• Resource called Script Graph
• Add script component to SceneManager
• Set SceneManager script to VisualScript
• Drag Script Graph resource into Script field

34. 4. Creating Visual Script
• Node based visual programming
• Basic workflow
• Open Script Graph editor
• Double click on Visual Script
• Load up needed nodes
• Wire nodes together
• Set parameters
• Test logic

35. Load Nodes
• Right click in script graph editor, or hit tab
• Search for key terms (e.g. Mouth)
• Needed Nodes
• MouthOpenEvent – detect when mouth open
• MouthCloseEvent – detect when mouth closed
• TextInput – set the text object value
• SetText – set text string value
• Important: Delete text in TacoTex object

36. Nodes
• Delete OnAwake, UpdateEvent nodes – not needed
Start
End

37. Adding Input Into Scene Manager
• Purple notes are input nodes
• Every purple node you add, adds an empty input field into the Scene Manger
• To specify input, need to drag objects or resources into these input fields

38. Specifying InputText Object
• To associate TacoText object with InputText node
• Select Scene Manager script and check inspector
• Drag TacoText object into empty Text input field

39. Arrange Nodes in Visual Script
• Duplicate SetText Node
• Set SetText values
• Select node, enter text value in variables view
• “!TACO!” in one node, “ “ in the other

40. Wire Nodes Together
• Output from MouthEvent nodes
to trigger of setText nodes
• setText nodes to InputText node
• Note: impossible to connect
incompatible nodes

41. Final Result

42. NEXT STEPS

43. Complete the Happy Birthday Tutorial

44. Try Out Other Templates

45. Video Tutorials
• Search for Snapar on YouTube – look for tutorial channel

46. Visual Scripting Tutorials

47. Visual Scripting Template
• Explore visual scripting template
• Demonstrates dozens of visual scripts
• Copy existing visual scripts into your own project

49. Work Through Tutorial Guides

50. Join the Creator Community Forums

51. Questions?

52. www.empathiccomputing.org
@marknb00
mark.billinghurst@auckland.ac.nz