FAKE
DevLab by AT&T Hands-on workshops
Intro to Cinematic 360 Video & Virtual Reality
Š 2017 AT&T Intellectual Property. All rights reserved. AT&T, AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other trademarks are the property of their owners. Actual results and your experience may vary from those described in this case study. Information and offers subject to change. Users of this book are fully responsible for abiding by the Terms and Conditions and any other legal requirements of all companies and their products, whether AT&T or non-AT&T companies. Inclusion of non-AT&T products in this workbook does not imply AT&T endorsement of said products.
Table of Contents
Table of Contents Introduction ............................................................................ 3 Prerequisites ........................................................................... 4 Conventions Used .................................................................... 5 Lab #1: 360° Still Images ......................................................... 6 Signing in & Creating a 360 “Space” ......................................................... 6 Adding Interactive Elements to a 360 Space .............................................. 9 Panoramas........................................................................................... 10 Hotspots .............................................................................................. 11 Portals ................................................................................................ 14 Directional Sound ................................................................................. 17 Publishing ............................................................................................ 21 VR Mode and sharing ............................................................................ 22 Summary ............................................................................................ 22
Lab #2: Uploading to YouTube ................................................ 23 YouTube Sign In ................................................................................... 23 Uploading a 360 Video .......................................................................... 24 Summary ............................................................................................ 29
Lab #3: Building with Unity ..................................................... 30 Open The Project .................................................................................. 30 Empty Scene ........................................................................................ 31 Skybox and Ambient Lighting ................................................................. 32 Camera ............................................................................................... 35 Making an Environment ......................................................................... 37 Adding a BasketBall .............................................................................. 44 Virtual Reality Final Steps ...................................................................... 48 Summary ............................................................................................ 56
Appendix A: VR Playback In RoundMe ...................................... 57 Appendix B: YouTube Upload Settings & Reviewing Video ........... 58 YouTube Upload Settings ....................................................................... 58 Reviewing Video with Kolor GoPro VR Player. ........................................... 58
Appendix C: Spherical Metadata Injector (For YouTube).............. 59 Using the Metadata Injector ................................................................... 60
Page 1
Table of Contents
Appendix D: Installing Unity for Windows ................................. 63 Appendix E: Building For Android (Preparing VR Scene for Android Phone Use) ........................................................................... 65 Appendix F: Unity to Android Phone Troubleshooting .................. 67 Appendix G: Links To Resources .............................................. 68
Page 2
Introduction
Introduction Welcome to AT&T’s workshop on 360 Videos and Virtual Reality. The purpose of the workshop and this corresponding lab book is to familiarize you with concepts and techniques relative to filming and distributing 360 and/or Virtual Reality (VR) content. 360 videos and virtual reality headsets offer content creators entirely new ways of engaging their audience. The unique perspective and feeling of presence offered by 360 and VR is perhaps the best reason to get involved in the medium. With so much content currently being created for standard video, Virtual Reality is one of the best ways to stand out from the crowd and give your audience an experience they have never had before. After this workshop, you will walk away with the tools needed to begin experimenting and creating amazing content for 360 and Virtual Reality applications. By the end of this workshop, you should: • Have a basic understanding of 360 cameras and Virtual Reality headsets (lecture). • Have a firm grasp of Virtual Reality filming techniques, including the unique opportunities and potential pitfalls presented by the medium (lecture). • Be able to add interactive elements to 360 still images to create a “virtual tour” (lecture and labs). • Know how to upload and share your 360 or VR content through two different platforms (lecture and labs). • Be able to create a basic interactive VR experience in the Unity Game Engine (lecture and lab).
Page 3
Prerequisites
Prerequisites In order to complete the exercises in this workbook, you will need: • Internet connection • An iOS phone with iOS 7.0 or later, or an Android smart phone that includes a gyroscope/accelerometer. • For those interested in working with the Unity platform you will also need the following: o Windows 7 SP1+, 8, or 10. o A Graphics card with DX9 (shader model 3.0) or DX11 with feature level 9.3 capabilities) o Unity 5.5.2 (See Appendix E for Installation Instructions) o Android Studio or the Android SDK (See Appendix E for installation instructions) o Java (See Appendix E for installation instructions)
Page 4
Conventions Used
Conventions Used The following formatting conventions are used in this workbook: Type
Style
Example
URL
Monospace
www.youtube.com
User interface elements
Bold
Sign Up
File names
Bold
09-Atlantis-Exterior.jpg
Page 5
Lab #1
Lab #1: 360° Still Images Length: 30 minutes In this exercise:
Signing in & creating first 360 “Space” Adding Elements to a 360 Space Panoramas Hotspots Portals Directional Sound Summary
Signing in & Creating a 360 “Space” There are a number of tools on the market that can be used to create a 360 “tour” and to add interactive elements and other features to the 360 still. In this lab, we will add some of the more interesting features that have recently become available on the market. For illustrative purposes in this lab we will use RoundMe, though other tools are available that do similar things. Follow these steps to sign up for a RoundMe account. Note: If you have already signed up, simply log in. 1. Launch your browser and go to https://roundme.com/. 2. Click on Get Started in the center of the screen. Add sign up information and click Sign Up. (By signing up and using RoundMe you are agreeing to its Terms and Conditions.) Congratulations! You’re signed up.
1. Click Create Space. Space itself refers to a virtual area that your users can tour freely.
Page 6
Lab #1
1. A drag and drop display should appear on screen. 2. Grab the 360-image file RoundMe/09-Atlantis-Exterior.jpg from the USB drive and drop it here. 3. Wait for upload.
Once your upload completes, you’ll be taken to a page where you can provide details about your new space. Type something for the Space Title, Space Description, and select a maximum of 3 Space Categories (i.e., tags). Unless you want to share your drafts publically, you should leave the Published toggle off.
Page 7
Lab #1
If you wish, you can select a Space Location as shown below. 1. Click on the blank map and then drag the pin to the location. Here we have selected a location off the coast of North Carolina. Click Save Location.
2. Finally, Click the Save button.
Page 8
Lab #1
Adding Interactive Elements to a 360 Space Once you’ve Saved your first space, you will be transported into your first 360 Panorama image. This is what Users or those who visit your page will see. To edit your space, you can enter and exit Edit Mode via the Eye Icon in the upper-right corner of the page. Now, we are going to add elements into your 360 image. To do so, you will need to: 1. Click the Blue Icon to enter Edit Mode. The Blue Icon will become a Green (Edit) Pencil.
Page 9
Lab #1
From Editing Mode you can do a number of things, including adding new Panoramas, adding Hotspots, Portals, and Directional Sound. We will go over each of these in the following sections.
Panoramas To add a second Panorama: 1. Click the Green Upload Panorama icon indicated below. 2. Select the file RoundMe/10-Atlantis-Deck.jpg from the USB drive and click open. Your second Panorama will open.
Page 10
Lab #1
All existing Panoramas, or Spaces, will be shown at the bottom and can be switched by you or the User at any time.
Hotspots A Hotspot is an area within the Virtual Space that is interactive. Typically, these Hotspots contain more information about the scene you are presenting. Most Hotspots will contain text that give users more detail about the scene they’re viewing. You can only include Hotspots by dragging the “i” Icon as indicated on the image below. It is important to know that you do not toggle or click this icon, but instead you click on it and drag it to the place where you want it to be used. Tip: You can stop RoundMe from panning automatically by setting Autorotation Off in the More Functions menu. This menu is available when not in editing mode. To create a Hotspot: 1. With the first panorama (the 09-Atlantis-Extrior.jpg scene with the yellow submarine) selected, Drag the Hotspots (“I” Icon) towards the submarine.
Page 11
Lab #1
2. Add the title “A Yellow Submarine” and the description “Exactly what it sounds like.”
3. Click on “Create” in the “Create Hotspot” panel at the top.
You can also link to Outside Webpages using hotspots, simply by copying and pasting the desired URL into the Hotspot Description. We will use https://en.wikipedia.org/wiki/Submarine for this example. 1. Drag a new Hotspot to the submarine (just as you did when creating the last hotspot). 2. Add “Wiki on Submarine Engines” as the title and place “https://en.wikipedia.org/wiki/Submarine” link in the description.
Page 12
Lab #1
3. 4. Click Create at the top of the page. You can also embed an existing YouTube Video using hotspots. In order to do this, you must go to the YouTube page of the video you wish add to your Hotspot, in this example we will use https://www.youtube.com/watch?v=BTis6GioP2g. 1. Drag a new Hotspot to the submarine. 2. Add “How Subs work Video” as the title. Then copy the URL of the YouTube video (https://www.youtube.com/watch?v=BTis6GioP2g) and paste it in the description. The embedded video will load automatically.
Page 13
Lab #1
3. Click “Create.”
To edit a Hotspot: 1. 2. 3. 4.
Click on an existing Hotspot. Click and drag to reposition as needed. Edit title, description or links. Click “Save” to exit editing mode.
Note: Hotspots will not function in VR or Cardboard mode. However, a user can still access hotspots in “Magic Window” mode using a mobile device.
Portals Portals (also referred to as a Transports or Teleports) allow users to virtually traverse an area. For example, we’ve been looking at the Yellow Submarine for a while now, but what if we wanted to show users the view from the deck too? First, remember how we loaded a second panorama earlier, and it appeared at the bottom of the screen? (Look at the screenshot below for a reminder)
Page 14
Lab #1
That second panorama is of the upper deck. While users can simply click the bottom box and be transported to that location, a more exciting option is to create a Portal to that location. A portal is essentially a Hotspot that automatically loads a new panorama. If placed correctly, portals can give users the sense that they’re actually moving through a real place. It makes the images feel connected and brings a better sense of situational awareness, making users feel as if on a virtual tour. To create a Portal: 1. With the first submarine panorama selected, click and hold down on the thumbnail representing the second panaroma (the 09-Atlantis-Extrior.jpg scene with the on-deck shipping containers) from the bottom of the screen. 2. Drag the thumbnail (it will automatically become a portal image) to the location shown in the image below and release it when ready to place portal.
Page 15
Lab #1
3. Enter a title for your Portal. 4. Click and drag the directional arrows icon to change the orientation of the Portal icon (Note: Portals are shaped like rounded arrows. Aim the “point� at the location users will be transported to. This helps users maintain a better sense of world orientation).
5. Click Save Portal to finish editing. Users can now click on the portal and be automatically transported to new panoramas. This can be used to make the Virtual space they’re inhabiting feel more interconnected and real (like having them click on the upper deck to get there) or it can simply be used as a fun way of changing panoramas. Before leaving this section, you should add a portal to the second panorama that links you back to the original first panorama. Follow the instructions above to add the original panorama as a hotspot in the second panorama. In order to interact with Portals, enter View Mode (The Blue Eye) and simply click on the Portal Icon.
Page 16
Lab #1
Once you click on the portal, you or your Users will automatically be transported to the other panorama/location.
Directional Sound Directional Sound allows you to put audio is specific areas, and as you move closer to or further away from these specified locations, the audio will either grow louder or softer.
Page 17
Lab #1
To add Directional Sound 1. Click & hold down on the Directional Sound Icon indicated below.
2. Drag and drop the resulting icon to the location from which you want the Directional Sound to emanate.
3. Drag and drop, or open RoundMe/boat2.mp3 from the USB drive. The file must be an MP3.
Page 18
Lab #1
4. Once inserted, adjust the specific sound properties including Reach, Repeat, and Delay. a. Reach determines the angle in degrees of the trigger direction for audio. When setting it, you will see a blue hue around the area, as shown below. b. Repeat determines how many times the audio will play when facing a direction. c. Delay instructs the program on how long you want the user to linger on a spot before playing audio. For this shot of the water for instance, it may be better to have users really look at the water for a few seconds before playing audio. It makes the audio more intentional, and users won’t feel like they’re repeatedly tripping over an audio file that they are uninterested in.
When the blue hue is smaller, your end users will need to look at a tinier, more specific spot for audio to play. Similarly, if you make the Reach bigger, the area your user must look at to trigger audio will be much larger (if you want to make audio play no matter where the user is looking, simply increase Reach to its maximum value).
Page 19
Lab #1
5. Click Create to save the audio information.
Note: For the user, Directional Sound will only reveal itself in audio form, meaning there will be no icon. The sounds will simply grow or disappear as users look towards or away from an area. While the Directional Sound placed in the sea (in the photo above) has an icon representing it in editing mode, it will not be visible in viewer mode (see below). Note: Directional Sound does not currently work in iOS
To edit a Directional Sound: 1. Click on an existing Directional Sound. 2. Click and drag to reposition as needed. 3. Edit title, reach, repeat or delay.
Page 20
Lab #1
4. Click “Save� to exit editing mode
Publishing When you feel confident in your work and you are ready to share it with the world, click on the Settings Cog.
This takes you back to the original screen. Toggle the Published switch to ON, as shown below, then click Save to make your project live and viewable for all.
Page 21
Lab #1
VR Mode and sharing Now that you’ve successfully completed your first RoundMe scene, you can share it in VR Mode to share as a VR experience (provided you have a headset). You can also share it directly with friends and family using the built in Share functionality. Both of these options are available only in View Mode. Enter View Mode and click the 3 vertical dots to the left of the view toggle. Both VR Mode and Share & Embed are available in the drop down. If you have problems with the shared options, you can try installing the RoundMe app (Android or iOS) and step through steps described in Appendix A.
Summary In this lab, you learned how to navigate and interact with a 360 still images using RoundMe. You learned how to apply various interactive elements including hotspots , portals, and directional sound. Perhaps most importantly, you learned how to use these elements together in a way that creates a more cohesive experience for the end-user.
Page 22
Lab #2
Lab #2: Uploading to YouTube Length: 20 minutes In this exercise:
YouTube Sign In Uploading a 360 Video Summary For this lab, we will be using a 360 video file provided on the USB drive, which has already been prepared to work with YouTube as a 360 video. If you want to use your own 360 video you will first need to install a specialized “Metadata Injector�. The Metadata Injector literally injects your 360 video with the proper code, so that it can be read by YouTube as a 360 video. For information on obtaining and using the Metadata Injector, please see Appendix C.
YouTube Sign In 1. Go to www.youtube.com and sign in. Enter your profile name and password. YouTube is linked to Google so if you have never signed into YouTube, simply sign in with your Gmail email and password.
Page 23
Lab #2
2. If you don’t have an account with YouTube or Gmail, simply click create account at the bottom and fill out the requisite information
Uploading a 360 Video 1. Once you are logged in, click the circular profile icon to the far right, and then open the Creator Studio.
Page 24
Lab #2
You can do a number of things from the Creator Studio including managing your videos, live streaming, engaging with viewers, checking analytics & finances, and much more. But, for our purposes we are going to be uploading the video file YouTube/S01-MazeClip_injected.mp4 that is on the USB drive.
2. To upload your video, start by clicking the View Channel link in the top middle of the page. If you have previously created a channel then skip to step #6.
3. If you have not previously created a channel then you will see this page. Select Create a Channel.
4. Enter your preferred YouTube Name and click Create Channel.
Page 25
Lab #2
You will be taken to the page below.
5. On the left hand side, select Dashboard. From here you can manage a variety of YouTube related tasks, but for our purposes, this simply brings us back to the page from which we can access our newly created channel.
6. Select VIEW CHANNEL.
Page 26
Lab #2
7. To upload your first video, simply click “Upload a video�. Alternatively you can click the upload arrow in the upper-right corner of the page.
8. Choose whether you want to make your video Public or Private, and then simply drag the video file YouTube/S01-Maze-Clip_injected.mp4 on the USB drive. For this lab we will choose Public. Your File will automatically upload from this screen. Note: you can also click Select files to upload and use Finder (Mac) or Explorer (Windows) to select the file.
Page 27
Lab #2
9. From here you can change basic information about your video, including Title, Description, Thumbnails, Tags, and Social Media Sharing Options. Give your video anywhere from 1-30 minutes or more to process, depending on the video size and your network speed. 10. Once it hits the 95% mark, you should be ready to Publish by pressing the blue Done button.
11. You’ve done it! Your video is live! You can click the link to see it. Drag the image with your mouse to pan around. Be sure to save the URL so that you can return to see your video.
Page 28
Lab #2
12. To view in Google Cardboard with your phone, find your video on the YouTube App, tap your screen and select the Google Cardboard Icon in the lower-right corner of the video. The video will now play in VR mode.
Summary You have learned how to upload 360 videos to YouTube. Do not forget that in order for YouTube to recognize your content, you must first inject it with 360 Spherical Metadata (see Appendix Section C). Like RoundMe, You will be able to share your 360 content via YouTube on both your computer and your Smartphone (computer will use cursor based movement, Smartphone will use your own physical movement to adjust image in real-time).
Page 29
Lab #3
Lab #3: Building with Unity Length: 30 minutes In this exercise: Open the Project Scene View SkyBox and Ambient Lighting Camera Making An Environment Adding a BasketBall Virtual Reality Final Steps Summary Unity is a game engine made by Unity Technologies. The primary purpose of Unity is for the creation of video games for Consoles, PC, Websites, and Mobile Devices. However, it also works quite well for creating interactive non-game VR experiences. For this lab, you will create a scene with a basketball court and add the capability for the user to drop basketballs in the scene that will bounce around. You will need to install: 1) Unity 5.6.1f1 2) Android SDK 3) Java JDK Android and Java are required to build a project for Android phones. If you do not yet have the software installed, then see Appendix E.
Open The Project Copy the Unity project directory Unity/BasketBallCourt from the USB drive to your local hard drive. Open Unity. The Screen Below will pop up. Click Open.
Select the Unity/BasketBallCourt folder. You will automatically import all assets and the project will open.
Page 30
Lab #3
Empty Scene A window will be open on the far left side. This displays the Scene panel, which shows the virtual environment from a user-operated perspective. Below is an image of what the most basic Unity Empty Scene looks like before adding objects to the scene (The panel should look similar to the picture). Tip: Click and hold the RIGHT mouse button to move around the scene.
Page 31
Lab #3
In the upper right-hand corner of the Scene panel is a Perspective rotation tool. Click the small lock symbol to the top right of the Perspective tool to prevent unintentionally changing Perspective. Depending on the background color, that small lock image may be difficult to see, but it is still there and can be clicked. Once the lock has been clicked and becomes closed, the Perspective Icon will look transparent.
Skybox and Ambient Lighting The Skybox in Unity is what gives the Scene a background image and is equivalent to a 360 image as created in earlier labs. 1. To access the Skybox and Ambient Color options, select the Window dropdown menu, then Lighting, and then Settings.
Page 32
Lab #3
The Lighting panel as shown below will open. This panel allows us to insert a Skybox, which in this case will be a 360 image of a basketball court.
2. To insert the Skybox, keep the Lighting panel open. Look down and to the left of the lighting panel and notice the panel called Project. This panel contains resources and assets for your project. From here, click on the Assets>Materials folder.
3. Next, drag-and-drop BasketballCourt Skybox asset into the Skybox Material field of the previously opened Lighting panel (beneath Environment in the Lightingpanel as shown in the image below). The result should look similar to this:
Page 33
Lab #3
All fields should stay the same except fot the Skybox field, which will now read “BasketbalCourt Skybox”. You will see the “Skybox” or the background basketball image loaded in the Scene panel. You can now close the lighting panel. Make sure to save your Project and Scene. You should do this often, as an unexpected Unity crash could cause loss of progress. Select File and click on Save Project, which will save your project configuration. Then select File and click on Save Scene as, which will save the properties of of your current (projects can contain multiple scenes) scene. Select the Scenes directory. Give your scene a new, personalized name, and click Save.
Page 34
Lab #3
Camera The Camera is an Object that is placed at the position and orientation from which the application will render the scene. The Scene panel (the panel in which the skybox is currently drawn) shows a general view of the world, regardless of if or where a camera is placed. The Game panel (next to the Scene panel) shows what the camera sees. Without a camera, the end-user will not be able to see anything when they run the Unity-built application. 1. Add a Camera to the Scene by clicking on the GameObject dropdown menu, then click Camera.
This will make a Camera appear in the Scene and will make the camera’s perspective show in the Game panel, as shown below.
The Inspector panel will appear on the right, if it is not already there. It shows detailed information on the selected Object within a Unity Project. 2. Next, we want to reset the Camera’s position to the origin position of 0, 0, 0. This can be done by resetting the Transform (position, orientation, and scale) of the Camera within the Inspector. Click on the Cog symbol then click Reset.
Page 35
Lab #3
The result of the Camera Transform should look like this:
The Game panel shows what the Camera and end-user sees. The Game panel can be a firstperson character perspective, a third-person character perspective, or a camera that is pointed at a menu screen. In our case, we will be using a first-person perspective camera (the default).
Page 36
Lab #3
Making an Environment When you are first starting, it is beneficial to get plenty of practice using Unity Assets. In order to fill an empty Scene with Game Objects, you will want to practice with basic generated shapes or download free Unity Assets. Among the free Assets, there are environments which can give ideas for the look of the Scene you plan to make. The end goal of this Lab is to create a Basketball Scene in which Basketball Objects (which will be added later) bounce off a virtual floor using Physics. To have the basketballs bounce, we must first create a solid Floor. To do this: 1. Start by clicking on the GameObject dropdown menu, then click 3D Object, and then click Cylinder.
Page 37
Lab #3
There is now an Object called Cylinder within the Hierarchy panel.
2. Since that Cylinder will become the Floor of the Basketball Court, rename it Floor by right-clicking the name Cylinder, clicking Rename, and typing ‘Floor’.
If it is not currently selected, select the Floor object in the Hierarchy. Note that this opens the Inspector panel if it is not already open. 3. In the Inspector panel, notice the area Marked Transform. This controls position, rotation, and scale of objects. In the upper right corner of this box is a Cog. Before changing the Transform variables, you should always reset the Transform by clicking on the cog in the upper right and choosing Reset.
Note that all information in the Inspector pertains directly to whatever Object is selected in the Hierarchy at any given time. 4. In the Transform, change the number in Position’s Y Value to -2.5 by clicking within the box and replacing the 0 with -2.5. This will put the cylindrical floor 2.5 meters below the Camera. Leave the values for Rotation at 0, leave the Y Value for Scale to 1 and change the X and Z Scale values to 10. This results in a large flat cylinder that is 10 meters in diameter and 1 meter tall). The transform box should look like this:
Page 38
Lab #3
5. To view the cylinder in full view, click in the Scene panel and Push The ‘f’ Key on your keyboard. This will change the viewpoint such that the Cylinder is in the center of the scene. Note the perspective of the skybox/360 image does not change since the system considers the skybox to be at an infinite distance from the viewpoint.
The next step is replacing the the default Capsule Collider of your recently renamed Floor Cylinder with a Mesh Collider. Note that this change will occur in the Inspector panel, and the Floor object must still be selected in the Hierarchy. Colliders are what cause collision between Game Objects. If two Objects move toward each other within the Scene and they do not have Colliders, they would move through each other. In order for two Objects to make contact and react using physics, the two Objects must each have a Collider. If one of the Objects has no Collider, it would still move through another object that does have a Collider. Colliders can have different shapes. A Box Collider will be in the shape of a box, while a Sphere Collider will be in the shape of a sphere. Their shapes can be stretched but not beyond the capacity of the shape used. The type of Collider we will use is a Mesh Collider. The Mesh Collider conforms to an object of any shape. 6. First we must remove the Capsule Collider. To do this, look in the Capsule Collider section of the Inspector, right click within the capsule collider component and choose Remove Component.
7. Next, add the Mesh Collider by clicking on the Component dropdown menu, then Physics, and then Mesh Collider.
Page 39
Lab #3
8. To complete the Floor, we will add a Material to Floor object itself. This material will eventually match the look of the floor in the Skybox image. In the Project panel below the Scene panel, click on Assets>Materials. Do NOT CLICK ON A SPECIFIC MATERIAL YET (doing so will result in the Inspector panel showing the material properties instead of the floor, if you do this: select the Floor object again from the Hierarchy panel).
Now, look in the Inspector panel (make sure it is still the Inspector panel for Floor). In the Mesh Renderer heading, you should see a Materials subsection and a field labeled Element 0. Drag-and-drop Floor Material from the Project panel into the Element 0 category of the Mesh Renderer in the Inspector (replacing the setting Default-Material)
You should now see Floor Material in the Element 0 Field.
The next step is adding a Directional Light to make the Floor a similar color to the Skybox (i.e. make the floor look like the basketball court). A Directional Light is used to make a light source from a specific direction. Depending on the direction it is facing, it can cast shadows if shadows are enabled. 9. To make the Directional Light, click on GameObject, then Light, and then Directional Light.
Page 40
Lab #3
10. First, Reset the Transform of the Directional Light by clicking on it in the Hierarchy panel, then on the Cog symbol in the Inspector panel, and then Reset.
11. Make the value of the Y Position 3, if it is not already. Change the value of the X Rotation to 50. Change the value of the Y Rotation to -30. It should look like this:
12. Under the Light heading, Change Shadow Type to Soft Shadows by clicking the dropdown menu.
13. Now you will changei the lighting color and shading values. Click within the white rectangular box next to Color under the Light heading.
Page 41
Lab #3
A Color menu should pop up. It looks like this:
A Color panel appears as shown in the image above. Note the left side of the horizontal color bars should show the letters R, G, and B. If this is not the case (where the letters are H, S, and V), click the icon to the right side above the first color bar so that you see the letters R, G, and B. The letters R, G, B represent the colors Red, Green, and Blue. The numbers to the right of the horizontal color bars represents the intensity of that Red, Green, or Blue color. The number 0 represents no contribution for that color. The closer the number is to 255 (the maximum), the more intense that color will be. And the closer it is to 0, the less intense that color will be. For example, if Red is set to 150, Green to 0, and Blue to 0, then the resulting color would be a medium Red. When two colors have numbers, and the third color is 0, that third color will not affect the resulting color. When two or three colors have numbers, those colors will combine to make the resulting color. 14. Change the light to be slightly yellow by changing the number for Red (R) to 248, the number for Green (G) to 245, and the number for Blue (B) to 220. This value approximately matches the lighting of the real world basketball court as seen in the 360 skybox. Your color box should look like this:
Page 42
Lab #3
Your final Floor object should look similar to the one below:
Page 43
Lab #3
Adding a BasketBall Next, we are going to add a Sphere to the Scene and give it a Basketball material. 1. Click on the GameObject dropdown menu, then 3D Object, and then Sphere.
2. In the Hierarchy panel, rename Sphere to Basketball.
3. Reset the Transform of the Basketball by clicking on it, then on the Cog symbol, and then Reset.
4. To make the basketball feel appropriately distanced from the user, change the Transform Position’s Y-Value to 1, and the Z Position to 2. Then change the X, Y, and Z Scale values all to 0.24 as shown below.
5. In the Project panel, open up the Assets/Materials folder. Drag and drop the Basketball Material (Note: Not the basketball “Physic” material, just Basketball Material) located there into the Element 0 field in the Inspector panel under the Mesh Renderer heading and Materials subheading.
Page 44
Lab #3
Page 45
Lab #3
6. Next, we will add a physical material to the basketball. From the Projects panel Assets/Materials directory, drag-and-drop the Basketball Physic Material there into the Materials field in the Inspector panel under the Sphere Collider heading. This will cause the baskeball to bounce off the floor in the Game panel .
7. For the next step, we will add a Rigidbody to the Basketball. Rigidbody is what causes a simulated force of gravity to act upon an object. Adding a Rigidbody to the Basketball will cause it to fall using physics. To add a Rigidbody, select the Basketball in the Hierarchy panel, then click the Component dropdown menu, then Physics, and then Rigidbody.
8. In the newly created Rigid Body component that can be seen in the Inspector panel, click the dropdown menu for Collision Detection and then choose Continuous
Page 46
Lab #3
Dynamic. This will ensure the highest quality of physics simulation will be used. If the physics simulation was more complex we might choose Discrete or Continuous to increase performance.
The Scene panel (left) and the Game panel (right) should now look as they do below:
9. To preview the Scene, click on the Play Button located towards the top middle of the Unity screen. After clicking play, the top three buttons will turn blue and you should see the basketball fall and bounce (this might take a few seconds to start). 10. Click on the Play Button again to stop and go back to edit mode. The top three blue buttons will turn back to black. This is important—if the application continues playing, then any further changes you make will be lost when it is stopped.
Page 47
Lab #3
Virtual Reality Final Steps 1. To render the Scene properly with Virtual Reality and for head tracking, GvrViewerMain must be added to the Scene. In the Project panel, open the Assets/GoogleVR/Prefab folder and locate GvrViewerMain.
2. Drag-and-drop GvrViewerMain onto the Scene panel itself. 3. In the Inspector Panel, Reset the Transform of GvrViewerMain by selecting the Cog symbol, and then Reset. No changes need to be made after this particular reset.
Page 48
Lab #3
4. For the GvrViewerMain Object in the Inspector panel, select the Screen Size under Unity Editor Emulation Settings. Base the screen size on your own phone. (If your phone isn’t listed, then choose Galaxy S6).
5. You will now create a way for users to drop more basketballs onto the Floor. From the Project panel, open the Assets/Prefabs folder to find the BasketballInstantiator. Drag and drop the BasketballInstantiator directly into the Camera Object in the Hierarchy panel.
Page 49
Lab #3
After adding the BasketballInstantiator to the Camera, it will appear below the Camera in the Hierarchy.
6. In the Inspector panel, click on the cog in the Inspector and Reset your BasketBallInstantiator Transform values.
7. Set the Transform values of the BasketBallInstantiator Position Y of 0.75 and Position Z of 2. In the Scale category, update all Values (X, Y, and Z) to 0.24. This will drop basketballs .75 meters above and 2 meters in front of the Camera.
Page 50
Lab #3
8. Select the Play arrow at the top-middle of your screen. You will now see an image in the Game panel for both the left and right eye so that you will see the scene in 3D when viewing through Google Cardboard. Click with the mouse in the Game panel to make a new ball drop. Continue clicking in the Game panel to continue dropping balls into the scene.
9. Click on the Play Button again to go back to Edit mode.
Page 51
Lab #3
10. The next step is choosing which platform you are going to export to. Click on the File dropdown menu, then click Build Settings. A panel will open that looks like this:
11. Click the Add Open Scenes button in order for the system to know that you wish to build application for the current scene. If there are any other scenes listed under Scenes In Build, then uncheck those scenes so that you build only for your current scene.
Page 52
Lab #3
12. For this lab, we assume you are building for Android phones. If the platform is not already set to Android, click on Android and then click Switch Platform on the lower left of that panel. If building for iOS or another platform, you would select that platform and then Switch Platform. 13. After switching Platforms the Unity symbol will appear next to Android. Click the boxes next to Development Build and Script Debugging to add checkmarks there (not required, but useful if you are a developer that wants to experiment further). Next, click on Player Settings.
Page 53
Lab #3
On the right side of the screen, you should see the PlayerSettings panel appear.
14. In the upper right, you can modify the Company Name and Product Name. For this example, change Company Name to something of your choosing. Change Product Name to BasketballCourt.
15. Further down on the PlayerSettings panel is a tab called Other Settings. Click on Other Settings to expand that menu. First, click the box next to Virtual Reality Supported so that there is a checkmark there. A settings called Virtual Reality SDKs should now appear. 16. Select the + symbol below Virtual Reality SDKs and select Cardboard.
Page 54
Lab #3
17. Further down in the Other Settings menu, in the Identification subsection, there is a setting called Package Name. The Package Name must match the Company Name and Product Name from Player Settings. Change Package Name to com.YourCompanyName.BasketballCourt.
Click on the dropdown menu next to Minimum API Level and select Android 4.4 ‘Kit Kat’ (API level19) if it is not already chosen. 18. If you have configured your system to build for Android, Plug a USB cable from your computer to your Android Device. Make sure your phone is set up for developer mode (See Appendix F) for more information. Now, in the Build Settings Panel, click Build and Run. Select the Builds directory, enter a file name, and click Save. Unity will automatically upload the build to your phone and start the application. If you experience problems doing this, see Appendix F. Once the application starts, place the phone in your Google Cardboard, put it on your head and look around. Push the Google cardboard button or tap the phone screen to create a new basketball.
Page 55
Lab #3
Note: If you have not configured your system to build for Android, you can use the prebuilt package. From a file browser copy Unity/BasketballCourt/Builds/BaskbetballCourtFinished.apk to your Android Device via a USB drive or Cloud Storage. Make sure your phone is set up for developer mode.
Congratulations, you have built a Google Cardboard app using Unity!
Summary You have learned how to create a basic 360 and 3D scene in Unity. In particular, you have learned how to generate a Skybox, how to create 3D objects, and how to apply Physics and Material Textures to those objects. You have also learned how to make a scene interactive as well as how to prepare your scene for use in a Virtual Reality Headset.
Page 56
Appendix A: VR Playback in RoundMe
Appendix A: VR Playback In RoundMe 1. 2. 3. 4.
5. 6. 7. 8.
Download and install the RoundMe app on your mobile device (iOS or Android) Launch the app and login to your RoundMe account Go to your Drafts or Published videos and open your Tour Once open, you can view your Tour by touching and dragging your finger around the screen or by holding up your device and moving it around to see around the Panorama. This is known as Magic Window mode. To view in your Cardboard viewer, rotate your device 90-degress to landscape orientation Look for the Google Cardboard icon or toggle the VR mode from the menu. Once in VR mode, you should see a side-by-side (SBS) image on the screen Place your device in your Cardboard viewer as directed and have a look around.
Page 57
Appendix B: VR Playback in RoundMe
Appendix B: YouTube Upload Settings & Reviewing Video YouTube Upload Settings Uploading 360 Videos to YouTube is relatively straightforward. There are however a number of variables that can be tweaked for optimum performance. If you video feels sluggish or is of lower quality than you’d like, you can adjust your encoding, or video conversion settings to the recommended settings from YouTube: https://support.google.com/youtube/answer/6178631?hl=en Two Notes 1. These settings are likely to change and fluctuate with time. Check YouTube’s recommendation’s (the link above) to be sure your encoding settings are up to date 2. In general, 360 video displays at a much lower resolution than standard video. A certain level of blurriness is to be expected.
Reviewing Video with Kolor GoPro VR Player. While 360 content captured through your phone (and 360 camera) is likely to offer motion/gyroscopic interaction immediately, 360 content uploaded to your computer and typical MP4 player likely won’t display as a 360 video that can be interacted with (even if Spherical Metadata - see Appendix C- has been injected). This means your video player is likely to display a simple flat image. If you’d like to review your footage on the computer before uploading to YouTube you will need a VR player. There are a number of VR players available. One of them is the Kolor GoPro VR Player. To use it, simply Download and Install the Kolor GoPro VR Player for your device of choice. It can be downloaded here: http://www.kolor.com/gopro-vr-player/download/. To play 360 video, simply drag and drop your file into the VR player after you’ve opened application. Note: You do NOT need to have injected Metadata for Kolor GoPro VR Player to work.
Page 58
Appendix C: Spherical Metadata Injector
Appendix C: Spherical Metadata Injector (For YouTube) Follow these steps to get the Metadata Injector: 1. You can either go directly to
https://support.google.com/youtube/answer/6178631?hl=en or you can google “360 Spherical Metadata Injector� and click the link that is shown below.
2. In the Google support site, notice step the steps below. For our purposes we will use the 360 file on the USB drive so you should skip step 1 and go straight to Step 2: Prepare For Upload. Select the down arrow to expand this section.
3. Once there. Click the link that correspond with your operating system (as shown above). Clicking the link will automatically start the download of the Metadata zip file.
Page 59
Appendix C: Spherical Metadata Injector
4. Once downloaded,navigate in Finder (Mac) or Explorer (PC) to where you downloaded the file 360.Video.Metadata.Tool.win.zip then go ahead and open it. 5. Inside, you will find only one other file, which is the Spatial Media Metadata Injector.exe. This is the App you will use to convert your 360 files into YouTube ready videos. Go ahead and open the file.
Using the Metadata Injector You are now ready to use the Metadata Injector on your video. 1. Open the Spatial Media Metadata Injector then click Open. Don’t check any of the checkboxes.
2. Clicking Open will take you straight to your files. Select the 360 file you’d like to make YouTube or Facebook ready. For this lab we will use the file YouTube/OriginalFiles/S01-Maze-Clip.mp4 on the USB drive.
Page 60
Appendix C: Spherical Metadata Injector
3. After choosing your file, you will automatically be greeted by the Metadata Injector as shown below. Select the My video is spherical (360) checkbox and then click Inject Metadata.
4. Save the file.
Note that if you play the clip and it does not seem to be interactive 360, do not worry - QuickTime is not optimized for 360, but YouTube is, and the clip should run fine online.
Page 61
Appendix C: Spherical Metadata Injector
Congratulations, you have a YouTube Ready 360 file! Now it’s time to post.
Page 62
Appendix D: Installing Unity
Appendix D: Installing Unity for Windows To install Unity, go to this link: https://unity3d.com/get-unity/download/archive
Look for Unity 5.6.1. To the right of Unity 5.6.1, click on the dropdown menu for Downloads (Win). Then click Unity Installer.
Doing this will redirect you to a download link, click Save File.
Page 63
Appendix D: Installing Unity
Once the download is complete, go to the download location and run the installer. To do the lab in the lab exercise book, the minimal install is Unity, and Standard Assets. Installing other components is at your discretion and may significantly increase install space required and time to install.
Follow the instructions it gives until completed.
Page 64
Appendix E: Building For Android
Appendix E: Building For Android (Preparing VR Scene for Android Phone Use) In order to Build for Android, you need to set up the Android Software Development Kit (SDK) and the Java Development Kit (JDK). Additional instructions can be found in the Unity Manual here: https://docs.unity3d.com/Manual/android-sdksetup.html Installing the Android Software Development Kit (JDK) The Android Software Development Kit (JDK) is included as part of Android Studio. To download and install Android Studio, follow the instructions at https://developer.android.com/studio. Note Android Studio is quite large (~2GB to download) so if your Internet connection is slow, you may want to download over night. Also note some configuration is required and developer experience is recommended for configuring the SDK.
Installing the Java Development Kit (JDK) To install the Java Development Kit, first go to this link and download the software: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html We will be using Java SE Development Kit 8u131 for this project. Click on the empty circle next to Accept License Agreement, then click on the download link associated with your OS.
Download jdk-8u121-windows-x64.exe for Windows users.
Run the downloaded .exe file to install JDK.
Page 65
Appendix E: Building For Android
Configuring Unity to work with Android SDK and JDK In Unity, Click on the Edit menu, then Preferences.
Click on the External Tools tab. Under Android, click on Browse next to SDK and select the Android-sdk folder located where the Android SDK is located (e.g., C:/AndroidSDK/Androidsdk). Also set the location of the JDK location (e.g., C:/Program Files/Java/ jdk1.8.0_121).
Page 66
Appendix F: Links to Resources
Appendix F: Unity to Android Phone Troubleshooting Building from Unity to your phone can be a frustrating experience. Consider the following if you are having problems. 1. Your phone must be set up to be in Developer Mode. Unfortunately the way to do this can vary across phones. Search on a web search engine for “developer mode� along with the model of your phone to find instructions of how to set your phone to developer mode. 2. Some USB cables do not work for for pushing builds to phones. If you are having problems, try a different USB cable. 3. If you still have problems building to your phone from Unity, build the .apk file locally and then copy that file to your phone. For example, you can upload the file to the cloud and then download that file on your phone. Then simply click the .apk file on your phone and application should install.
Page 67
Appendix F: Links to Resources
Appendix G: Links To Resources RoundMe RoundMe: https://roundme.com/ Submarine Wiki for Hotspot: https://en.wikipedia.org/wiki/Submarine YouTube video – Submarine – for Hotspot: https://www.youtube.com/watch?v=BTis6GioP2g
YouTube YouTube: www.youtube.com Recommended video upload settings: https://support.google.com/youtube/answer/6178631?hl=en Kolor VR Player (play VR clip on computer): http://www.kolor.com/gopro-vr-player/download/ Spherical Metadata Injector (for preparing to upload 360 videos to YouTube): https://support.google.com/youtube/answer/6178631?hl=en
Books Learning Virtual Reality: Developing Immersive Experiences and Applications for Desktop, Web, and Mobile by Toni Parisi. O’Reilly Media. http://shop.oreilly.com/product/0636920038467.do Unity Virtual Reality Projects by Jonathan Linowes. Packt Publishing. https://www.packtpub.com/game-development/unity-virtual-reality-projects The VR Book: Human-Centered Design for Virtual Reality by Jason Jerald. Morgan & Claypool Publishers and ACM Books. http://www.thevrbook.net/
Unity Unity: https://unity3d.com/get-unity/download/archive Unity Version Patches: https://unity3d.com/unity/qa/patch-releases Android SDK Setup, Unity Manual: https://docs.unity3d.com/Manual/android-sdksetup.html Download Android SDK: dl.google.com/android/android-sdk_r24.4.1-windows.zip Download Java SDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk8downloads-2133151.html
Page 68
Appendix F: Links to Resources
Page 69