独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Google Cardboard 360 Viewer Tutorial

By Logan Stucker

This tutorial will instruct you step by step on how to build and complete your very own Google Cardboard headset as well as a 360 viewer app to test it out. For this tutorial we will use simple, cheap, and easy resources that will have you building virtual reality (VR) applications in no time!

Set Up

Unity Development

Now that we have completed set up we are ready to start building our very own virtual reality application! On you computer open Unity, select create a new project and name and store it based on your preferences. Before clicking create project, ensure that you have selected a 3D app instead of 2D as this will allow us to create a 360 virtual space. Your screen should now look something like this:

The UI is made up of three main components surrounding the 3D space view that will be the base of our project, starting with the scene tab in the upper left. A basic definition of a scene is to imagine it as a file or space of many different objects used to weave together a project. Covering the bottom of the UI is the project file finder and assets tab, that will show any assets you are able to bring into a scene. Lastly on the right in the inspector tab, which will show you the properties of any selected item within Unity.

Right away you can save the “scene” or development space you are coding in to ensure you can come back and modify this project later in the same way you would save a word document. For the purposes of this tutorial I named it “main” and will further refer to it as main scene. Next you need to decide what picture you would like to create a 360 viewer for! You can get these 360 pictures by either a quick google search, or by downloading one of the many 360 camera apps on Apples App Store. When choosing a picture I found it works best when you have a lot of spacial depth with things close and far away in the picture to get a better effect. Once you have your chosen image, drag it into the assets bar at the bottom of the Unity UI as shown:

Next on the left had side of the UI where the main scene is we are going to create a 3D sphere object. This 3D object will be the anchor for our application in which we eventually attach our image and shaders too. Right click anywhere on the grey box and select the 3D sphere as showm :

Now you will have a basic sphere object, which you can click on and see its inspector on the right hand side of the UI. This current sphere is far too small for what we are trying to accomplish, so under the scale options setting the x,y and z coordinates anywhere within the 50–60 range will work just fine. At this point we have a working 3D object we can interact with! We will then want to apply the 360 image we had chosen before to the sphere, but we first must give the sphere a material so that it can have the image attached to it. For Unity development materials are what are used to give an object any artistic detail instead of just being a grey circle. To create the material inside the asset box at the bottom once again right click, then select create and material.

This material will then have an Inspector panel on the right hand side as well, and we will need to locate the Albedo tag under main maps. The Albedo feature determines what is actually reflected from the surface of our material. This is the tag we will want to apply our image to, which we can drag over from the assets box onto the small checkbox next to Albedo.

Our material is now ready to be applied to a 3D object! Drag the material you have been working on with the image attached to the 3D sphere object in the scene view on the left hand side of the screen. If you have zoomed out for a more full view of your sphere is should now be textured by the 360 image you applied.

Now we need to set the vantage point for our camera so that the view we have within our Google Cardboard headset is actually inside of our sphere. In the scene panel on the left hand side click on the main camera object so that its inspector panel is displayed on the right. Our sphere is currently surrounding the center of the 3D space for our app, so we want to set the x,y, and z positions of our camera to all be 0. This will then display the camera in the middle of the sphere. Now we need to make sure that the image displays on the inside of the sphere where our camera can pick it up because currently the image is only shown on the outside of our object. To do this we will have to create a shader which is a script that can change how light and textures interact with an object.. In the assets box right click and create a new standard shader as shown.

The shader then needs to be applied to the material for it to work, so just drag the shader image onto the material we created earlier. When you select the material the inspector should now show the selected shader as “Custom/(whatever you named your shader)”. For me the first time this step did not work, but simply saving the project, exiting, and reopening then repeating the shader steps should do the job. The standard shader is not meant for 3D spheres in virtual reality however, so we must modify its code. Double clicking the shader will open its code in your operating systems preferred IDE, or default to visual studio if you have none selected. The best way to get the right code for this is using many of the open sourced shaders for Unity VR development found on Github. First delete everything besides line 1 of your file,

then copy in the code you found on Github. I personally searched for a “Flipping Normals Shader” based off of recommendations from various Unity forums, but know that most shaders labeled for Unity VR development will do the job. Once you have added this code and saved the document, our development for the application is over!

Building the App and using Google Cardboard

At this point our app is complete, however in terms of its build into an actual IOS application Unity still has no idea what our intentions with it are. We must first change the played settings which can be done by going through the edit options as shown.

Our inspector panel will now display our player settings which we will alter so Unity knows we aim to build a virtual reality application. Click on the iPhone settings panel,

then at the very bottom of your settings there is a tab for “XR Settings”. Click this, ensure “Virtual Reality Supported” is checked then we must select the correct SDK so it can build the virtual realty application. Google Cardboard labeled as “Cardboard” and is what we will use for this tutorial, but if you ever want to come back and develop for different virtual reality platforms this is where you would import their respective SDKs.

Now click on the file header then build settings so we can start building our app to put onto our iPhone. Select IOS as the platform we intend to build on, then build to whatever location you prefer.

The build is then executed which you can expect to take around five minutes if this is your first time building an application through Unity. Once built, go to the folder you had chosen before and locate the Xcode project titled “Unity-Iphone.xcworkspace”. In the case where you have been working on a windows computer up to this point feel free to zip this file and upload it to a service like google docs where you can then access it from an Apple computer. On your Apple computer once you click on this file it will launch Xcode, and you should connect your iPhone to your computer as well.

Building to Device

This section will cover how you as a developer can properly build to and Apple device from Xcode and the issues associated with it. As a heads up this is by far the section I had the most trouble with, as working with Xcode is no easy task, but I will try to walk through the issues I encountered. Unity has done a nice job building the app for us to work on our device, we just need to go through the paperwork for an apple device to allow it to be ran. We need to be on the general page layout

and will be going through the process of “signing” and application through Apple. Signing a product basically means that you in some way are associated with developing through Apple so the intent is that any apps you are putting out have already been approved to be ran on an apple device. There are two ways to go about this depending on what type of account you have. If you do not have an Apple developer account, and if you dont know what that is you probably dont have one, the first approach just uses your common Apple Id to accomplish the task we are setting out to do. First open the preferences for Xcode from the tool bar, and if under the accounts page it looks something like what is depicted bellow we are good to go.

We can see that the intended account is for personal development, and is a user role meaning the app will only be used for our devices. My first time no account was listed so I had to click the plus sign in the bottom left and add my own personal Id. Go back to the general page, and under the first signing tag select “Automatically Manage Signing”. We then just need to change the Bundle Identifier to something to represent our app, as well as select your Apple Id as the chosen team.

We can now build our application to our phone! Ensure your phone is still plugged into the computer, then on the top bar of Xcode chose your device as the build target and hit the play button.

Google Cardboard and App Use

Now to enjoy your application and the use of the Google Cardboard headset you should first follow the provided steps on your headset to set it up. Be careful when doing this because the pieces are a-lot less sturdy than they seem as easily bend. If your phone has a protective case I would first suggest sliding it off and opening your 360 Viewer application. Put the phone into your headset and start moving around in your virtual space!

Why Use Google Cardboard?

If you are at all curious about virtual reality development and want to get into-the field this is by far the best option to start. Typical VR headsets cost hundreds of dollars, as well as the hardware to run them can leave a dent in your wallet. But with Google cardboard it is cheap and affordable! Unity’s VR functionality are also meant to be used with google cardboard in mind, so it works well together. This is a cheap and effective way to create a great product overall and prepare you for future virtual reality development if you find coding projects like this interesting.

Thanks!

Add a comment

What is your view?

Send

Related posts:

But how?

One of the biggest complains of Instagram users is that the version of the social network for computers does not allow to publish photos and videos, only to visualize and comment on the publications…

Real Estate Industry Welcomes the Artificial Intelligence

With the new real estate technology trends, the most revolutionary promises to be the Artificial Intelligence (AI). The capacity of merging data with advanced analytics and online technology has the…