Creating your First VR

Experience for Education

3
Objectives
● IDENTIFY the unity interface and the Editor
● UNDERSTAND VR and its applications
● CREATE a learning module using Unity and Google VR
● LEARN and DEMONSTRATE usage of the Unity Editor and
tools for VR.
 Assets Used

Customizable planet shader ADAM BIELECKI ADAM BIELECKI

SciFi Music Pack Milky Way Skybox

Google VR SDK
https://github.com/googlevr/gvr-unity-sdk/releases
Solar system textures
https://www.solarsystemscope.com/textures/
Assets Used are from Asset store
and some from other sources
About Me
Pre-Requisites
● 64 bit Operating System.
● Laptop/Desktop with USB Mouse
● Download and install Unity 2018.4 LTS
● Create Unity account on website, validate the email id.
● login into Unity
● UnZip shared file and put it on desktop
● Download and install Android Studio.
Learning Cycles
1. Getting Started
2. Basics
3. Building a scene
4. Mobile VR Setup
5. Menu Scene
6. Solar System
7. Polishing the App
8. Building your App
 Cycle 1:
Getting Started
Cycle 1: Getting Started
1) Open the project ( Solar-system ) and create a new scene (File -> New Scene)
2) Open the Lighting Window (Window -> Rendering-> Lighting Settings)
a. Uncheck Realtime Global Illumination
b. Uncheck Baked Global Illumination
c. Uncheck Auto Generate

3) Select Gameobject > 3D object > Cube option from the menu bar.
4) Save the scene (File -> Save Scene As)
5) Name the scene “Hello World”.
Cycle 2:
Basics
Cycle 2: Basics
1) Practice navigating the Scene View
a. RMB + Drag = Look Around
b. RMB + WASD = Move Around
c. RMB + QE = Move Up / Move Down
d. F = Focus on Select Object
e. ALT + Left Mouse = Orbit around
f. ALT + Middle mouse = PAN Screen
g. ALT + Right Mouse = Zoom In/Out
 Cycle 3:
Building a Scene
Cycle 3: Building a Scene
1) Select Cube Game object in the hierarchy.
2) Practice placing 3D objects around the scene
3) Practice using the scene tools:
4) Q – Hand tool – used for panning
5) W – Translate tool – used to move objects
6) E – Rotate tool – used to rotate objects
7) R – Scale tool – used to scale objects
8) T – Rect tool – used to move 2D objects like UI
 Cycle 4:
Mobile VR Setup
Cycle 4: Mobile VR Setup
1) Install Android studio, JDK and JRE. Download from :
https://developer.android.com/studio/
2) JDK : https://www.oracle.com/technetwork/java/javase/downloads/
3) Install Android SDK.
4) Install Unity Android module from Unity Hub.
5) Switch to Android and setup SDK path.
https://developer.android.com/studio/
Cycle 4: Install Unity Android platform
1) Goto Unity Hub > Installs Tab.
2) After selection
3) click Done.
Cycle 4: Switch to Android platform
1) Goto File >Build Settings.
2) Under Platforms, Select
Android
3) Click Switch Platform.
4) Goto Edit > Preferences and
Select External Tools.
5) Under Android section, SDK,
paste in the path for the
Android SDK.
Enable developer options and debugging

1. Open the Settings app.

2. (Only on Android 8.0 or higher) Select System.
3. Scroll to the bottom and select About phone.
4. Scroll to the bottom and tap Build number 7 times.
5. Return to the previous screen to find Developer options
near the bottom.

At the top of the Developer options screen, you can toggle the
options on and off. You probably want to keep this on. When off,
most options are disabled except those that don't require
communication between the device and your development
computer.
Next, you should scroll down a little and enable USB debugging.
This allows Android Studio and other SDK tools to recognize your
device when connected via USB, so you can use the debugger
and other tools.
 Cycle 5:
Main Screen
Cycle 5A: Main Screen
1) Create new scene, File > New Scene.
2) Drag Milky Way Material ( Assets > Milkyway>Material folder) from Project
window to Scene view.
3) Save the scene (File > Save scene As ) and name it “Solar system vr”. ( if not
done earlier ).
Cycle 5A : Main Screen
1) Create new scene, File > New Scene.
2) Drag Milky Way Material ( Assets >
Milkyway>Material folder) from Project
window to Scene view.
3) Save the scene (File > Save scene As ) and
name it “Solar system vr”. ( if not done
earlier ).
4) Your game window should show the galaxy
skybox.
Cycle 5B : Prefabs
1) Add PlanetSphere prefab in the scene from the project
hierarchy ( search by name in “PlanetSphere” ).
2) Scale the planet to 6.3 in all Axis.
Cycle 5C : Earth
1) Create a new Material in Project window ( Right click >
Create > Material), name it Earth_Mat. ( It is using
Standard Shader ).
2) Apply Earth Texture “4k_earth_daymap” in Albedo slot.
3) Drag and drop the material on the planet.
4) Apply EarthMobile material on the planetsphere object.
(_Scene1 > Materials > Mobile > EarthMobile).
Cycle 5D : Rotation
1) Add Rotation script to the planet object, Click on Add
Component > Scripts > Rotation.
2) Set Speed property as 0.02.
Cycle 5E : Audio
1) Add AudioSource (Gameobject > Audio > AudioSource)
to the scene and name it “Background Music”.
2) Assign 25_BlueWater Warning clip to “AudioClip”
property.
3) Mark PlayOnAwake and Loop to True or checked ON.
Cycle 5F : UI
1) Place Camera as shown below. Use Scene View to get
the placement and orientation.
2) Select Main Camera and then goto GameObject > Align
with View.
3) Add Text Element, Gameobject > UI > Text TextMeshPro.
4) Change properties to get things like in screenshot.
Change Font asset, Size, Color, Alignment.
Cycle 5G : 3D UI
1) Convert Canvas to WorldSpace, In Canvas component,
Change RenderMode property to WorldSpace.
2) In canvas component, Event Camera Property, Assign
MainCamera reference.
3) Add Component > LookAt Script on Canvas.
4) In Target property of LookAt assign Main Camera
reference.
Cycle 5H : VR
1) Goto Edit > Project Settings > Player > XR Settings
2) Enable Virtual Reality Supported.
3) Add Cardbaord VR SDK by clicking on the + button.
(Remove any other SDK present )
4) Add VR-Reticle-Canvas as Child of Main Camera.
5) On Camera, add scripts > GvrPointerPhysicsRaycaster &
Recticlesetter.
6) Assign Reference of VR-Reticle-Canvas on Reticlesetter
> Reticle Pointer property.
Cycle 5H : VR
1) On Event System GO
a. Disable Input module
b. Add GvrPointerInputModule on EventSystem GO.
2) On canvas
a. Add GvrPointerGrahpicRaycaster
b. Disable Graphics Raycaster
Cycle 5 - I : Helper Text
1) Add another 3D UI Canvas, two texts and parent it to
camera ( Make it like screenshot)
2) On Planet Sphere
a. Add Sphere collider, Adjust size as needed
b. Add Event trigger Component > on Pointer Enter
event and add reference of text component , modify
the text to earth
3) Add Event trigger on Text component on canvas (text>
solar system) and Set the text to
solar system on enter event
Cycle 5 -J : Interactions
1) Add Couple of Cubes in scene, assign them different
materials. (Optional : add 3D Text on top of them,assign
lookat at the 3d canvas if added )
2) First Cube, add Event Trigger component.
a. Add Pointer click event and assign PlanetSphere
object reference and set AudioSource.Stop event
b. Add PointerEnter Event,add text reference of helper
text and set Text.text as Music OFF.
3) Add GVREditorEmulator prefab into the scene for Easier
debugging.
Cycle 5 -K : Interactions
1) Add a new canvas, make it WorldSpace.
a. Add Two Buttons, one for Solar System and another
Galaxy.
b. Add LookAt Component
c. Add Vertical Layout Group Component
d. Add GvrPointerGraphicRaycaster component.
e. Disable GraphicsRaycaster component.
2) Next step will load galaxy package in and assign it to
load.
Cycle 5 -L : Scene Management
1) On SceneCanvas, Galaxy button
a. Add Load Scene Component.
b. SceneName property > GalaxyScene ( Scene
filename)
c. Add Event Trigger component > Add PointerClick
Event.
d. Assign self object reference and call LoadScene.Load
function.
2) Open Build Settings(File > Build Settings), Click Add
Open Scenes .
3) Add GalaxyScene in the builds list ( Assets > Scenes >
GalaxyScene).
4) Do same for second button, scene load will call the new
scene that will create next.
Cycle 5 -M : Post Process
1) On MainCamera, Add FastBloom component.
2) Adjust settings as shown
3) Optional : Add helper text on the buttons.
4) Play and see.
 Cycle 6:
Solar System
Cycle 6 -A : Basic setup
1) Create a new Scene.
2) Save it as Solar System and save in Scenes Folder.
3) Add skybox - Milky Way
4) Add Planetshpere prefab in scene.
5) Rename this to Sun
6) Add mat_sun material to PlanetSphere GO.
7) Add FastBloom component on camera
Cycle 6 -B : VR setup
1) Parent Main Camera to another go, name it
camera_parent.
2) Add VR-Reticle-Canvas As Chilld of Main Camera
3) On Camera
a. Add GvrPhysics Raycaster
b. Add Reticlesetter and assign reference of
VR-Reticle-Canvas.
c. Near clipping = 0.01
4) Add GvrPointerInputModule to Event System go
5) Add 2 UI text for helper text, as child of camera,Text sd
"you are looking at" and another dynamic text, position it
to bottom right of screen, adjust font properties as
needed.
Cycle 6 -C : Menu
1) Add Sphere collider on Sun, & event trigger, OnEnter >
Add reference of Helper Label and change text to SUN.
2) Add TMP Text UI ->Add Box collider > Add Event
Trigger, OnEnter change text on helper label.
3) UI canvas >Add GvrGraphics Raycaster
4) On Event system
a. Disable StandardInputModule
b. Enable GvrPointerInputModule
Cycle 6 -D - 1 : Menu
1) Make Empty GO, Rename it “UiBase” (reset it)
a. Make the text TMP object created earlier child of this
GO.
b. Add Lookat to UiBase
c. Add MoveWith to UiBase and assign camera_parent
as target
2) Create "Movers" go, make a Empty child in it called
"TOSun", add "TweenToLookat" comp. assign
references.
3) Position TOSun as you would like to see the SUN object,
( FYI : Use Gameobject > Align with view option)
4) Goto BaseUi > First Child Object, Add OnPointerClick
event, Add TweenToLookAt reference and call
"StartMovement" function
Cycle 6 -D - 2: Menu
1) Make Empty GO, Rename it “UiBase” (reset it)
a. Make the text TMP object created earlier child of this
GO.
b. Add Lookat to UiBase
c. Add MoveWith to UiBase and assign camera_parent
as target
2) Create "Movers" go, make a Empty child in it called
"TOSun", add "TweenToLookat" comp. assign
references.
3) Position TOSun as you would like to see the SUN object,
( FYI : Use Gameobject > Align with view option)
4) Goto BaseUi > First Child Object, Add OnPointerClick
event, Add TweenToLookAt reference and call
"StartMovement" function
Cycle 6 - E : Solar System
1) Add another btn in UiBase, Duplicate existing one, name
it Solar System
2) Add another GO in movers, Duplicate from existing,
name it TOSolar
3) Add TweenMoveLookat to TOSolar object.
4) Position ToSolar object as you want in scene
5) Assign references, target=Camera_parent, gotopos =
tosolar pos, time as you want.
Cycle 6 - F : Information UI
1) For Sun Add a Canvas
a. Set world space UI mode. Assign main camera
reference in EventCamera
b. Remove Graphics raycaster and add
GvrPointerGraphics Raycaster
c. Add lookat on the UI Canvas
d. UI will have Info text, close button,
2) Add collider on SUN GO, Add Event Trigger component.
3) Add OnClick event, Enable the Canvas GO on Click event.
4) UI Close button, add Event trigger > onClick event >
Disable the GO of the UI
5) Remove/Disable/False Raycast Target option from the
text fields
6) Parent this GO to the BaseUI.
Cycle 6 - G : SCALE
1) Set scale (60.9) to the sun object as relative to Earth
scale (1).
2) Update scale of UI also to the relative size of sun.
3) Update mover positions
Cycle 6 - H -1 : Earth
1) Add MARKER Text On SUN
2) Create worldSpace canvas
a) Make child of sun
b) Set MainCamera as EventCamera in Canvas
component
c) Add LookAt
d) Add Scaling script > set FixedSize=5e-05
3) DUPLICATE SUN GO,rename it to Earth
4) Setup materials as Earth Material, Shader
AHProxy>PlanetShader.
5) Change Data in canvas & update Name in canvas
6) Add UI Button in UIBase, by duplicating it in list, set
values in them to Earth.
7) Duplicate Sun Mover object, rename to Earth Mover with
TweenToLookAt
Cycle 6 - H -2 : Earth
1) Put sun and Earth in another go, name it solar system
2) Earth name canvas,scaling > fixed size =0.001
3) Put correct scale (=1) and distance(X=149.6 , Y=Z=0) for
Earth.
4) Remember to add Info UI Canvas
5) Add mover Object and set it up
6) Add UIBase button and add events
Cycle 6 - I : Earth
1) Add orbit Around Script on earth > Orbit around, put
sun GO as reference.
2) On Earth, Add Rotation script, set speed as 0.2.
3) Add Particle trail > Effects > Trail as child of Earth,
setup values as Desired.
4) Enable repeat option on TweenToLookat for Earth
5) Parent (Movers > Earth) to child of Earth GO (as they will
now need to be moved too. )
6) Add PlanetManager Script to Camera_parent.
7) When we click another option in Planet Menu, call
Planetmanager.DisableAllTweens function first.
Cycle 6 - J : Other Planets
1) Add other planets and info about them.
2) Setup Shaders, Rotation, Canvases on Planets, Movers
3) Buttons in UIBase
4) Setup Button callbacks.
 Cycle 7:
Polishing the App
Cycle 7 : Polish Items
1) Add vfx Prefab to Main Camera
2) Add new event callback on all Buttons,OnPointerClick
event > add VfxHandler reference and call Activate
function.
3) Add Halo on SUN Go, set size as 13.
4) Parent UI to camera, right of viewport. Change button
references.
5) Add ambient music, GameObject > AudioSource. Set
Clip as 27_Dark_synnergy
Cycle 7 : Polish Items
1) Add button sound - OnPointerEvent, add
robot_blip as
reference of sound source, add
one shot > AudioSource.PlayOneShot
2) Add Hover on buttons, OnPointerEnter Event,
make text font bigger > TextMeshPro.fontSize =
40.
3) OnPointerExit > , make font smaller, >
TextMeshPro.fontSize = 36.
4) Set this up on all interactable objects.
 Cycle 8:
Building the App
Cycle 8: Building the App
1) Go to File->Build Settings
2) Click Add Open Scenes to add current
scene to the build and other scenes to
the list. (Already done on prev. step)
3) Click Build
4) Save the App file and enjoy!
 Get The Assets:

Slides
https://tinyurl.com/vrworkshopslides
APK
https://tinyurl.com/vrworkshop-apk