1. CARDBOARD VR: BUILDING
LOW COST VR EXPERIENCES
Mark Billinghurst
mark.billinghurst@unisa.edu.au
April 14th 2016
CHIuXiD

2. What You Will Learn
• Virtual Reality Fundamentals + History
• How to Build Cardboard VR Viewer
• Example Cardboard VR Applications
• Basics of Unity Programming
• How to Make Panorama VR Applications
• How to Create VR Scenes
• How to Add Interactivity to VR Applications
• Cardboard Design guidelines

3. VIRTUAL REALITY

4. Virtual Reality
Computer generated multi-sensory simulation of an
artificial environment that is interactive and immersive.

6. David Zeltzer’s AIP Cube
! Autonomy – User can to
react to events and stimuli.
! Interaction – User can
interact with objects and
environment.
! Presence – User feels
immersed through sensory
input and output channels
Interaction
Autonomy
Presence
VR
Zeltzer, D. (1992). Autonomy, interaction, and presence. Presence: Teleoperators
& Virtual Environments, 1(1), 127-132.

7. Key Technologies
• Autonomy
• Head tracking, body input
• Intelligent systems
• Interaction
• User input devices, HCI
• Presence
• Graphics/audio/multisensory output
• Multisensory displays
• Visual, audio, haptic, olfactory, etc

8. Early Experimenters (1950’s – 80’s)
Helig 1956
Sutherland 1965
Furness 1970’s

9. The First Wave (1980’s – 90’s)
NASA 1989
VPL 1990’s
Virtuality 1990’s

10. Jaron Lanier
• Founded VPL, coined term “Virtual Reality”

11. Desktop VR - 1995
• Expensive - $150,000+
• 2 million polys/sec
• VGA HMD – 30 Hz
• Magnetic tracking

12. Second Wave (2010 - )
• Palmer Luckey
• HMD hacker
• Mixed Reality Lab (MxR)
• Oculus Rift (2011 - )
• 2012 - $2.4 million kickstarter
• 2014 - $2B acquisition FaceBook
• $350 USD, 110o FOV

13. • sddg

14. Oculus Rift
Sony Morpheus
HTC/Valve Vive
2016 - Rise of Consumer HMDs

15. Desktop VR 2016
• Graphics Desktop
• $1,500 USD
• >4 Billion poly/sec
• $600 HMD
• 1080x1200, 90Hz
• Optical tracking
• Room scale

16. https://immersivelifeblog.files.wordpress.com/2015/04/vr_history.jpg

17. Market Size

18. Computer Based vs. Mobile VR

19. Mobile VR
CPU: 300 Mhz
HDD; 9GB
RAM: 512 mb
Camera: VGA 30fps
Graphics: 500K poly/sec
1998: SGI O2 2008: Nokia N95
CPU: 332 Mhz
HDD; 8GB
RAM: 128 mb
Camera: VGA 30 fps
Graphics: 2m poly/sec

20. Mobile Phone AR & VR
• Mobile Phone AR
• Mobile phone
• Live camera view
• Senor input (GPS, compass)
• Mobile Phone VR
• Mobile phone
• Senor input (compass)
• Additional VR viewer

21. VR2GO (2013)
• MxR Lab
• 3D print VR viewer for mobiles
• Open source hardware + software
• http://projects.ict.usc.edu/mxr/diy/vr2go/

22. Multiple Mobile VR Viewers Available

23. • zxcvz

24. CARDBOARD VR

25. • dsfsaf

26. Google Cardboard
• Released 2014 (Google 20% project)
• >5 million shipped/given away
• Easy to use developer tools
+ =

27. Cardboard
($2)
Lenses
($10)
Magnets
($6)
Velcro
($3)
Rubber
Band
(1¢)
Software
Components

28. Assembling the Cardboard Viewer

29. Version 1.0 vs Version 2.0
• Version 1.0 – Android focused, magnetic switch, small phone
• Version 2.0 – Touch input, iOS/Android, fits many phones

30. Many Different Cardboard Viewers

31. SAMPLE CARDBOARD
APPLICATIONS

32. Cardboard App
• 7 default experiences
• Earth: Fly on Google Earth
• Tour Guide: Visit sites with guides
• YouTube: Watch popular videos
• Exhibit: Examine cultural artifacts
• Photo Sphere: Immersive photos
• Street View: Drive along a street
• Windy Day: Interactive short story

33. 100’s of Google Play Cardboard apps

34. Sample Applications

35. Cardboard Camera
• Capture 360 panoramas
• Stitch together images on phone
• View in VR on Cardboard

36. Google Expeditions
• Teacher led VR experiences
• https://www.google.com/edu/expeditions/

37. Building Your Own Application
• Cardboard Viewer
• https://www.google.com/get/cardboard/
• Smart phone
• Android/iOS
• Cardboard SDK
• iOS, Android, Unity
• https://developers.google.com/cardboard/
• Unity game engine (optional)
• https://unity3d.com
• Content

38. Cardboard SDK
Features:
1. Lens distor-on correc-on.
2. Head tracking.
3. 3D calibra-on.
4. Side-by-side rendering.
5. Stereo geometry configura-on.
6. User input event handling.
Unity Cardboard SDK

39. INTRODUCTION TO UNITY

41. Unity 3D Game Editor

42. SETUP

43. Download and Install
• Go to unity3d.com/download
• Use Download Assistant – pick components you want

44. Getting Started
• First time running Unity you’ll be asked to create a project
• Specify project name and location
• Can pick asset packages (pre-made content)

45. Unity Interface
• Toolbar, Scene, Hierarchy, Project, Inspector

46. Customizable Interface

47. Building Scenes
• Use GameObjects:
• Containers that hold different components
• Eg 3D model, texture, animation
• Use Inspector
• View and edit object properties and other settings
• Use Scene View
• Position objects, camera, lights, other GameObjects etc
• Scripting
• Adding interaction, user input, events, etc

48. GameObjects
• Every object in Scene is a GameObject
• GameObjects contain Components
• Eg Transform Component, Camera Component

49. Adding 3D Content
• Create 3D asset using modeling package, or download
• Fbx, Obj file format for 3D models
• Add file to Assets folder in Project
• When project opened 3D model added to Project View
• Drag mesh from Project View into Hierarchy or Scene View
• Creates a game object

50. Positioning/Scaling Objects
• Click on object and choose transform

51. Unity Asset Store
• Download thousands models, scripts, animations, etc
• https://www.assetstore.unity3d.com/

52. UNITY BASICS

53. Making a Simple Scene
1. Create New Project
2. Create Game Object
3. Moving main camera position
4. Adding lights
5. Adding more objects
6. Adding physics
7. Changing object materials
8. Adding script behaviour

54. CreateProject
• Create new folder and project

55. New Empty Project

56. Create GameObject
• Load a Sphere into the scene
• GameObject -> 3D Object -> Sphere

57. Moving main camera
• Select Main Camera
• Select translate icon
• Move camera

58. Add Light
• GameObject -> Light -> Directional Light
• Use inspector to modify light properties (colour, intensity)

59. Add Physics
• Select Sphere
• Add Rigidbody component
• Add Component -> Physics -> RigidBody
• or Component -> Physics -> RigidBody
• Modify inspector properties (mass, drag, etc)

60. Add More Objects
• Add several cubes
• GameObject -> 3D Object – Cube
• Move cube
• Add Rigid Body component (uncheck gravity)

61. Add Material
• Assets -> Create -> Material
• Click Albedo colour box in inspector
• Select colour
• Drag asset onto object to apply

62. Add Script
• Assets -> Create -> C# script
• Edit script using Mono
• Drag script onto Game Object

63. Example C# Script
GameObject Rotation
using UnityEngine;
using System.Collections;
public class spin : MonoBehaviour {
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
this.gameObject.transform.Rotate(Vector3.up*10);
}
}
#

64. Scripting C# Unity 3D
• void Awake():
• Is called when the first scene is loaded and the game object is active
• void Start():
• Called on first frame update
• void FixedUpdate():
• Called before physics calculations are made
• void Update():
• Called every frame before rendering
• void LateUpdate():
• Once per frame after update finished

65. Final Spinning Cube Scene

66. Resources
• Unity Main site
• http://www.unity3d.com/
• Holistic Development with Unity
• http://holistic3d.com
• Official Unity Tutorials
• http://unity3d.com/learn/tutorials
• Unity Coder Blog
• http://unitycoder.com

67. IMMERSIVE PANORAMAS

68. Steps
1. Create a new project
2. Load the Cardboard SDK
3. Load a panorama image asset
4. Create a Skymap
5. Add to VR scene
6. Deploy to mobile phone

69. New Project

70. Load Cardboard SDK
• Assets -> Import Package -> Custom Package
• Navigate to CardboardSDKForUnity.unitypackage
• Uncheck iOS (for Android build)

71. Load Cardboard Main Camera
• Drag CardboardMain prefab into Hierarchy
• Assets -> Cardboard -> Prefab
• Delete CameraMain

72. Panorama Image Asset
• Find/create suitable panorama image
• Ideally 2K or higher resolution image
• Google “Panorama Image Cubemap”

73. Add Image Asset to Project
• Assets -> Import Asset
• Select desired image
• Set Texture Type to
Cubemap
• Set mapping to Latitude-
Longitude (Cylindrical)

74. Create Skybox Material
• Assets -> Create -> Material
• Name material
• Set Shader to Skybox -> Cubemap
• Drag texture to cubemap

75. Create Skybox
• Window -> Lighting
• Drag Skybox material into
Skypebox form

76. Panorama Image in Unity

77. One Last Thing..
• CardboardMain -> Head -> Main Camera
• Set Clear Flags to Skybox

78. Test It Out
• Hit play, use alt/option key + mouse to look around

79. Deploy to Mobile (Android)
1. Plug phone into USB
• make sure device in debug mode
2. Set correct build settings
3. Player settings
• Other settings
• Set Bundle Idenitfier -> com.Company.ProductName
• Resolution and Presentation
• Default Orientation -> Landscape Left
4. Build and run

80. Deploying to Phone
1. Plug phone into USB
2. Open Build Settings
3. Change Target platform to Android
4. Resolution and Presentation
• Default Orientation -> Landscape Left
5. Under Player Settings
• Edit Bundle Identifier – eg com.UniSA.cubeTest
• Minimum API level
6. Build and Run
• Select .apk file name

81. Running on Phone
• Droid@Screen View on Desktop

82. CREATING 3D
ENVIRONMENTS

83. Key Steps
1. Creating a new project
2. Load Cardboard SDK
3. Replace camera with CardboardMain
4. Loading in 3D asset packages
5. Loading a SkyDome
6. Adding a plane floor

84. New Project
• Camera replaced with CameraMain

85. Download Model Package
• Magic Lamp from 3dFoin
• Search on Asset store

86. Load Asset + Add to Scene
• Assets -> Import Package -> Custom Package
• Look for MagicLamp.unitypackage (If not installed already)
• Drag MagicLamp_LOD0 to Hierarchy
• Position and rotate

87. Import SkySphere package
• SkySphere Volume1 on Asset store

88. Add SkySphere to Scene
• Drag Skyball_WithoutCap into Hierarchy
• SkySphere_V1 -> Meshes
• Rotate and Scale as needed

89. Add Ground Plane
• GameObject -> 3D Object -> Plane
• Set Scale X to 2.0, Z to 2.0

90. Testing View
• Use alt/option key plus mouse to rotate view

91. Adding More Assets
• Load from Asset store – look for free assets

92. ADDING INTERACTIVITY

93. Adding Movement
Goal: Move in direction user looking when
Cardboard Button pressed.
• Key Steps
1. Start with static screen
2. Create movement script
3. Add movement script to Camera head
4. Deploy to mobile

94. Static Scene

95. Create Movement Script
• Add new script object
• Assets -> Create -> C# Script
• Edit script in Mono

96. Add Script to Scene
• Drag Script onto Head object
• CameraboardMain -> Head
• Uncheck Track Position Box
• Adjust movement speed

97. Adding More Interactivity
• Load Cardboard Demo application
• Assets -> Import Package -> Custom Package
• Load CardboardDemoForUnity.unitypackage
• Launch Demo Scene
• Assets -> Cardboard -> DemoScene

98. Features Shown
• Gaze reticle + selection
• Viewpoint teleportation
• Menu panel overlay
• Audio feedback
• Event system

99. DESIGN GUIDELINES

100. Google Design Guidelines
• Google’s Guidelines for good VR experiences:
• Physiological Considerations
• Interactive Patterns
• Setup
• Controls
• Feedback
• Display Reticle
• From http://www.google.com/design/spec-vr/designing-
for-google-cardboard/a-new-dimension.html

101. Physiological Considerations
• Factors to Consider
• Head tracking
• User control of movement
• Use constant velocity
• Grounding with fixed objects
• Brightness changes

102. Interactive Patterns - Setup
• Setup factors to consider:
• Entering and exiting
• Headset adaptation
• Full Screen mode
• API calls
• Indicating VR apps

103. Interactive Patterns - Controls
• Use fuze buttons for selection in VR

104. Interactive Patterns - Feedback
• Use audio and haptic feedback
• Reduce visual overload
• Audio alerts
• 3D spatial sound
• Phone vibrations

105. Interactive Patterns - Display Reticle
• Easier for users to target objects with a display reticle
• Can display reticle only when near target object
• Highlight objects (e.g. with light source) that user can target

106. Cardboard Design Lab Application
• Use Cardboard Design Lab app to explore design ideas

107. CONCLUSION

109. Conclusion
• Virtual Reality industry starting to boom again
• Google Cardboard provides a great entry for VR
• Consumer hardware
• Cheap/free viewer
• Industry standard game engine
• High quality content
• Many tutorials/learning resources
• The time to get started is now!

110. RESOURCES

111. Useful Resources
• Google Cardboard main page
• https://www.google.com/get/cardboard/
• Developer Website
• https://www.google.com/get/cardboard/developers/
• Building a VR app for Cardboard
• http://www.sitepoint.com/building-a-google-cardboard-vr-app-in-unity/
• Creating VR game for Cardboard
• http://danielborowski.com/posts/create-a-virtual-reality-game-for-
google-cardboard/
• Moving in VR space
• http://www.instructables.com/id/Prototyping-Interactive-Environments-
in-Virtual-Re/

112. www.empathiccomputing.org
@marknb00
mark.billinghurst@unisa.edu.au