21 min read

In today’s tutorial, we will feature visualization of a newly discovered solar system. We will leverage the virtual reality development process for this project in order to illustrate the power of VR and ease of use of the Unity 3D engine.

This project is dioramic scene, where the user floats in space, observing the movement of planets within the TRAPPIST-1 planetary system. In February 2017, astronomers announced the discovery of seven planets orbiting an ultra-cool dwarf star slightly larger than Jupiter.

We will use this information to build a virtual environment to run on Google Cardboard ( Android and iOS) or other compatible devices:

Artist rendering of the TRAPPIST-1 system

We will additionally cover the following topics:


  • Platform setup: Download and install the platform-specific software needed to build an application on your target device. Experienced mobile developers with the latest Android or iOS SDK may skip this step.
  • Google Cardboard setup: This package of development tools facilitates display and interaction on a Cardboard device.
  • Unity environment setup: Initializing Unity’s Project Settings in preparation for a VR environment.
  • Building the TRAPPIST-1 system: Design and implement the Solar System project.
  • Build for your device: Build and install the project onto a mobile device for viewing in Google Cardboard.

Platform setup

Before we begin building the solar system, we must setup our computer environment to build the runtime application for a given VR device. If you have never built a Unity application for Android or iOS, you will need to download and install the Software Development Kit (SDK) for your chosen platform. An SDK is a set of tools that will let you build an application for a specific software package, hardware platform, game console, or operating system. Installing the SDK may require additional tools or specific files to complete the process, and the requirements change from year to year, as operating systems and hardware platforms undergo updates and revisions.

To deal with this nightmare, Unity maintains an impressive set of platform-specific instructions to ease the setup process. Their list contains detailed instructions for the following platforms:

  • Apple Mac
  • Apple TV
  • Android
  • iOS
  • Samsung TV
  • Standalone
  • Tizen
  • Web Player
  • WebGL
  • Windows

For this project, we will be building for the most common mobile devices: Android or iOS. The first step is to visit either of the following links to prepare your computer:

  • Android: Android users will need the Android Developer Studio, Java Virtual Machine (JVM), and assorted drivers. Follow this link for installation instructions and files: https://docs.unity3d.com/Manual/Android-sdksetup.html.
  • Apple iOS: iOS builds are created on a Mac and require an Apple Developer account, and the latest version of Xcode development tools. However, if you’ve previously built an iOS app, these conditions will have already been met by your system. For the complete instructions, follow this link: https://docs.unity3d.com/Manual/iphone-GettingStarted.html.

Google Cardboard setup

Like the Unity documentation website, Google also maintains an in-depth guide for the Google VR SDK for Unity set of tools and examples. This SDK provides the following features on the device:

  • User head tracking
  • Side-by-side stereo rendering
  • Detection of user interactions (via trigger or controller)
  • Automatic stereo configuration for a specific VR viewer
  • Distortion correction
  • Automatic gyro drift correction

These features are all contained in one easy-to-use package that will be imported into our Unity scene. Download the SDK from the following link, before moving on to the next step: http://developers.google.com/cardboard/unity/download.

At the time of writing, the current version of the Google VR SDK for Unity is version 1.110.1 and it is available via a GitHub repository. The previous link should take you to the latest version of the SDK. However, when starting a new project, be sure to compare the SDK version requirements with your installed version of Unity.

Setting up the Unity environment

Like all projects, we will begin by launching Unity and creating a new project. The first steps will create a project folder which contains several files and directories:

  1. Launch the Unity application.
  2. Choose the New option after the application splash screen loads.
  3. Create a new project by launching the Unity application. Save the project as Trappist1 in a location of your choice, as demonstrated in Figure 2.2:
New project window

To prepare for VR, we will adjust the Build Settings and Player Settings windows.

  1. Open Build Settings from File | Build Settings.
  2. Select the Platform for your target device (iOS or Android).
  3. Click the Switch Platform button to confirm the change. The Unity icon in the right-hand column of the platform panel indicates the currently selected build platform. By default, it will appear next to the Standalone option. After switching, the icon should now be on Android or iOS platform, as shown in Figure 2.3:
Build Settings

Note for Android developers: Ericsson Texture Compression (ETC) is the standard texture compression format on Android. Unity defaults to ETC (default), which is supported on all current Android devices, but it does not support textures that have an alpha channel. ETC2 supports alpha channels and provides improved quality for RBG textures on Android devices that support OpenGL ES 3.0.

Since we will not need alpha channels, we will stick with ETC (default) for this project:

  1. Open the Player Settings by clicking the button at the bottom of the window. The PlayerSetting panel will open in the Inspector panel.
  2. Scroll down to Other Settings (Unity 5.5 thru 2017.1) or XR Settings and check the Virtual Reality Supported checkbox.
  3. A list of choices will appear for selecting VR SDKs. Add Cardboard support to the list, as shown in Figure 2.4:
Setting the VR SDK in Unity 5.6 or Unity 2017.1+
  1. You will also need to create a valid Bundle Identifier or Package Name under Identification section of Other Settings. The value should follow the reverse-DNS format of the com.yourCompanyName.ProjectName format using alphanumeric characters, periods, and hyphens. The default value must be changed in order to build your application.
Android development note:
Bundle Identifiers are unique. When an app is built and released for Android, the Bundle Identifier becomes the app’s package name and cannot be changed. This restriction and other requirements are discussed in this Android documentation link: http://developer.Android.com/reference/Android/content/pm/PackageInfo.html.
Apple development note:
Once you have registered a Bundle Identifier to a Personal Team in Xcode, the same Bundle Identifier cannot be registered to another Apple Developer Program team in the future. This means that, while testing your game using a free Apple ID and a Personal Team, you should choose a Bundle Identifier that is for testing only, you will not be able to use the same Bundle Identifier to release the game. An easy way to do this is to add Test to the end of whatever Bundle Identifier you were going to use, for example, com.MyCompany.VRTrappistTest. When you release an app, its Bundle Identifier must be unique to your app, and cannot be changed after your app has been submitted to the App Store.
  1. Set the Minimum API Level to Android Nougat (API level 24) and leave the Target API on Automatic.
  2. Close the Build Settings window and save the project before continuing.
  3. Choose Assets | Import Package | Custom Package… to import the GoogleVRForUnity.unitypackage previously downloaded from http://developers.google.com/cardboard/unity/download. The package will begin decompressing the scripts, assets, and plugins needed to build a Cardboard product.
  4. When completed, confirm that all options are selected and choose Import.

Once the package has been installed, a new menu titled GoogleVR will be available in the main menu. This provides easy access to the GoogleVR documentation and Editor Settings. Additionally, a directory titled GoogleVR will appear in the Project panel:

  1. Right-click in the Project and choose Create | Folder to add the following directories: Materials, Scenes, and Scripts.
  2. Choose FileSave Scenes to save the default scene. I’m using the very original Main Scene and saving it to the Scenes folder created in the previous step.
  3. Choose File | Save Project from the main menu to complete the setup portion of this project.

Building the TRAPPIST-1 System

Now that we have Unity configured to build for our device, we can begin building our space themes VR environment. We have designed this project to focus on building and deploying a VR experience. If you are moderately familiar with Unity, this project will be very simple. Again, this is by design. However, if you are relatively new, then the basic 3D primitives, a few textures, and a simple orbiting script will be a great way to expand your understanding of the development platform:

  1. Create a new script by selecting Assets | Create | C# Script from the main menu. By default, the script will be titled NewBehaviourScript. Single click this item in the Project window and rename it OrbitController. Finally, we will keep the project organized by dragging OrbitController‘s icon to the Scripts folder.
  2. Double-click the OrbitController script item to edit it. Doing this will open a script editor as a separate application and load the OrbitController script for editing. The following code block illustrates the default script text:
 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
public class OrbitController : MonoBehaviour {

// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {

}
}

This script will be used to determine each planet’s location, orientation, and relative velocity within the system. The specific dimensions will be added later, but we will start by adding some public variables.

  1. Starting on line 7, add the following five statements:
public Transform orbitPivot;
public float orbitSpeed;
public float rotationSpeed;
public float planetRadius;
public float distFromStar;

Since we will be referring to these variables in the near future, we need a better understanding of how they will be used:

    • orbitPivot stores the position of the object that each planet will revolve around (in this case, it is the star TRAPPIST-1).
    • orbitalSpeed is used to control how fast each planet revolves around the central star.
    • rotationSpeed is how fast an object rotates around its own axis.
    • planetRadius represents a planet’s radius compared to Earth. This value will be used to set the planet’s size in our environment.
    • distFromStar is a planet’s distance in Astronomical Units (AU) from the central star.
  1. Continue by adding the following lines of code to the Start() method of the OrbitController script:
// Use this for initialization
     void Start () {
// Creates a random position along the orbit path
         Vector2 randomPosition = Random.insideUnitCircle;
         transform.position = new Vector3 (randomPosition.x, 0f,  
         randomPosition.y) * distFromStar;
// Sets the size of the GameObject to the Planet radius value
transform.localScale = Vector3.one * planetRadius;
}

As shown within this script, the Start() method is used to set the initial position of each planet. We will add the dimensions when we create the planets, and this script will pull those values to set the starting point of each game object at runtime:

  1. Next, modify the Update() method by adding two additional lines of code, as indicated in the following code block:
// Update is called once per frame. This code block updates the Planet's position during each
// runtime frame.
     void Update () {
         this.transform.RotateAround (orbitPivot.position, 
         Vector3.up, orbitSpeed * Time.deltaTime);
         this.transform.Rotate (Vector3.up, rotationSpeed * 
         Time.deltaTime);
     }

This method is called once per frame while the program is running. Within Update(), the location for each object is determined by computing where the object should be during the next frame. this.transform.RotateAround uses the sun’s pivot point to determine where the current GameObject (identified in the script by this) should appear in this frame. Then this.transform.Rotate updates how much the planet has rotated since the last frame.

  1. Save the script and return to Unity.

Now that we have our first script, we can begin building the star and its planets. For this process, we will use Unity’s primitive 3D GameObject to create the celestial bodies:

  1. Create a new sphere using GameObject | 3D Object | Sphere. This object will represent the star TRAPPIST-1. It will reside in the center of our solar system and will serve as the pivot for all seven planets.
  2. Right-click on the newly created Sphere object in the Hierarchy window and select Rename. Rename the object Star.
  3. Using the Inspector tab, set the object to Position: 0,0,0 and Scale: 1,1,1.
  4. With the Star selected, locate the Add Component button in the Inspector panel. Click the button and enter orbitcontroller in the search box. Double-click on the OrbitController script icon when it appears. The script is now a component of the star.
  5. Create another sphere using GameObject | 3D Object | Sphere and position it anywhere in the scene, with the default scale of 1,1,1. Rename the object Planet b.

Figure 2.5, from the TRAPPIST-1 Wikipedia page, shows the relative orbital period, distance from the star, radius, and mass of each planet. We will use these dimensions and names to complete the setup of our VR environment. Each value will be entered as public variables for their associated GameObjects:

TRAPPIST-1 details

  1. Apply the OrbitController script to the Planet b asset by dragging the script icon to the planet in the Scene window or the Planet b object in the Hierarchy window. Planet b is our first planet and it will serve as a prototype for the rest of the system.
  2. Set the Orbit Pivot point of Planet b in the Inspector. Do this by clicking the Selector Target next to the Orbit Pivot field (see Figure 2.6). Then, select Star from the list of objects. The field value will change from None (Transform) to Star (Transform). Our script will use the origin point of the select GameObject as its pivot point.
  3. Go back and select the Star GameObject and set the Orbit Pivot to Star as we did with Planet b.
  1. Save the scene:
Selector Target in the OrbitController script

Now that our template planet has the OrbitController script, we can create the remaining planets:

  1. Duplicate the Planet b GameObject six times, by right-clicking on it and choosing Duplicate.
  2. Rename each copy Planet c through Planet h.
  3. Set the public variables for each GameObject, using the following chart:
GameObject Orbit Speed Rotation Speed Planet Radius Dist From Star
Star
0
2
6
0
Planet b
.151
5
0.85
11
Planet c
.242
5
1.38
15
Planet d
.405
5
0.41
21
Planet e
.61
5
0.62
28
Planet f
.921
5
0.68
37
Planet g
1.235
5
1.34
45
Planet h
1.80
5
0.76
60
Table 2.1: TRAPPIST-1 gameobject Transform settings
  1. Create an empty GameObject by right clicking in the Hierarchy panel and selecting Create Empty. This item will help keep the Hierarchy window organized. Rename the item Planets and drag Planet b—through Planet h into the empty item.

This completes the layout of our solar system, and we can now focus on setting a location for the stationary player. Our player will not have the luxury of motion, so we must determine the optimal point of view for the scene:

Scene and Game windows of the TRAPPIST-1 project
  1. Run the simulation.
  2. Figure 2.7 illustrates the layout being used to build and edit the scene. With the scene running and the Main Camera selected, use the Move and Rotate tools or the Transform fields to readjust the position of the camera in the Scene window or to find a position with a wide view of the action in the Game window; or a position with an interesting vantage point.
Do not stop the simulation when you identify a position. Stopping the simulation will reset the Transform fields back to their original values.
  1. Click the small Options gear in the Transform panel and select Copy Component. This will store a copy of the Transform settings to the clipboard:
Transform Options location
  1. Stop the simulation. You will notice that the Main Camera position and rotation have reverted to their original settings. Click the Transform gear again and select Paste Component Values to set the Transform fields to the desired values.
  2. Save the scene and project.

You might have noticed that we cannot really tell how fast the planets are rotating. This is because the planets are simple spheres without details. This can be fixed by adding materials to each planet. Since we really do not know what these planets look like we will take a creative approach and go for aesthetics over scientific accuracy.

The internet is a great source for the images we need. A simple Google search for planetary textures will result in thousands of options. Use a collection of these images to create materials for the planets and the TRAPPIST-1 star:

  1. Open a web browser and search Google for planet textures. You will need one texture for each planet and one more for the star. Download the textures to your computer and rename them something memorable (that is, planet_b_mat...). Alternatively, you can download a complete set of textures from the Resources section of the supporting website: http://zephyr9.pairsite.com/vrblueprints/Trappist1/.
  2. Copy the images to the Trappist1/Assets/Materials folder.
  3. Switch back to Unity and open the Materials folder in the Project panel.
  4. Drag each texture to its corresponding GameObject in the Hierarchy panel. Notice that each time you do this Unity creates a new material and assigns it to the planet GameObject:
Scene windows with materials applied to the planet and star
  1. Run the simulation again and observe the movement of the planets. Adjust the individual planet Orbit Speed and Rotation Speed to feel natural. Take a bit of creative license here, leaning more on the scene’s aesthetic quality than on scientific accuracy.
  2. Save the scene and the project.

For the final design phase, we will add a space themed background using a Skybox. Skyboxes are rendered components that create the backdrop for Unity scenes. They illustrate the world beyond the 3D geometry, creating an atmosphere to match the setting.

Skyboxes can be constructed of solids, gradients, or images using a variety of graphic programs and applications. For this project, we will find a suitable component in the Asset Store:

  1. Load the Asset Store from the Window menu. Search for a free space-themed skybox using the phrase space skybox price:0. Select a package and use the Download button to import the package into the Scene.
  2. Select Window | Lighting | Settings from the main menu.
  3. In the Scene section, click on the Selector Target for the Skybox Material and choose the newly downloaded skybox:
Game view with the Skybox installed
  1. Save the scene and the project.

With that last step complete, we are done with the design and development phase of the project. Next, we will move on to building the application and transferring it to a device.

Building the application

To experience this simulation in VR, we need to have our scene run on a head-mounted display as a stereoscopic display. The app needs to compile the proper viewing parameters, capture and process head tracking data, and correct for visual distortion. When you consider the number of VR devices we would have to account for, the task is nothing short of daunting. Luckily, Google VR facilitates all of this in one easy-to-use plugin.

The process for building the mobile application will depend on the mobile platform you are targeting. If you have previously built and installed a Unity app on a mobile device, many of these steps will have already been completed, and a few will apply updates to your existing software.

Note: Unity is a fantastic software platform with a rich community and an attentive development staff. During the writing of this book, we tackled software updates (5.5 through 2017.3) and various changes in the VR development process. Although we are including the simplified building steps, it is important to check Google’s VR documentation for the latest software updates and detailed instructions:

Android
: https://developers.google.com/vr/unity/get-started

iOS
: https://developers.google.com/vr/unity/get-started-ios

Android Instructions

If you are just starting out building applications from Unity, we suggest starting out with the Android process. The workflow for getting your project export from Unity to playing on your device is short and straight forward:

  1. On your Android device, navigate to Settings | About phone or Settings | About Device | Software Info.
  2. Scroll down to Build number and tap the item seven times. A popup will appear, confirming that you are now a developer.
  3. Now navigate to Settings | Developer options | Debugging and enable USB debugging.

Building an Android application

  1. In your project directory (at the same level as the Asset folder), create a Build folder.
  2. Connect your Android device to the computer using a USB cable. You may see a prompt asking you to confirm that you wish to enable USB debugging on the device. If so, click OK.
  3. In Unity, select File | Build Settings to load the Build dialog.
  4. Confirm that the Platform is set to Android. If not choose Android and click Switch Platform.
  5. Note that Scenes/Main Scene should be loaded and checked in the Scenes In Build portion of the dialog. If not, click the Add Open Scenes button to add Main Scene to the list of scenes to be included in the build.
  6. Click the Build button. This will create an Android executable application with the .apk file extension.

Invalid command Android error

Some Android users have reported an error relating to the Android SDK Tools location. The problem has been confirmed in many installations prior to Unity 2017.1. If this problem occurs, the best solution is to downgrade to a previous version of the SDK Tools. This can be done by following the steps outlined here:

  1. Locate and delete the Android SDK Tools folder [Your Android SDK Root]/tools. This location will depend on where the Android SDK package was installed. For example, on my computer the Android SDK Tools folder is found at C:UserscpalmerAppDataLocalAndroidsdk.
  2. Download SDK Tools from http://dl-ssl.google.com/Android/repository/tools_r25.2.5-windows.zip.
  3. Extract the archive to the SDK root directory.
  4. Re-attempt the Build project process.

If this is the first time you are creating an Android application, you might get an error indicating that Unity cannot locate your Android SDK root directory. If this is the case, follow these steps:

  1. Cancel the build process and close the Build Settings… window.
  2. Choose Edit | Preferences… from the main menu.
  3. Choose External Tools and scroll down to Android.
  4. Enter the location of your Android SDK root folder. If you have not installed the SDK, click the download button and follow the installation process.

Install the app onto your phone and load the phone into your Cardboard device:

Stereoscopic view on an Android device

iOS Instructions

The process for building an iOS app is much more involved than the Android process. There are two different types of builds:

  1. Build for testing
  2. Build for distribution (which requires an Apple Developer License)

In either case, you will need the following items to build a modern iOS app:

  • A Mac computer running OS X 10.11 or later
  • The latest version of Xcode
  • An iOS device and USB cable
  • An Apple ID
  • Your Unity project

For this demo, we will build an app for testing and we will assume you have completed the Getting Started steps (https://docs.unity3d.com/Manual/iphone-GettingStarted.html) from Section 1. If you do not yet have an Apple ID, obtain one from the Apple ID site (http://appleid.apple.com/). Once you have obtained an Apple ID, it must be added to Xcode:

  1. Open Xcode.
  2. From the menu bar at the top of the screen, choose Xcode | Preferences. This will open the Preferences window.
  3. Choose Accounts at the top of the window to display information about the Apple IDs that have been added to Xcode.
  4. To add an Apple ID, click the plus sign at the bottom left corner and choose Add Apple ID.
  5. Enter your Apple ID and password in the resulting popup box.
  6. Your Apple ID will then appear in the list.
  7. Select your Apple ID.
  8. Apple Developer Program teams are listed under the heading of Team. If you are using the free Apple ID, you will be assigned to Personal Team. Otherwise, you will be shown the teams you are enrolled in through the Apple Developer Program.

Preparing your Unity project for iOS

  1. Within Unity, open the Build Settings from the top menu (File | Build Settings).
  2. Confirm that the Platform is set to iOS. If not choose iOS and click Switch Platform at the bottom of the window.
  3. Select the Build & Run button.

Building an iOS application

  1. Xcode will launch with your Unity project.
  2. Select your platform and follow the standard process for building an application from Xcode.
  3. Install the app onto your phone and load the phone into your Cardboard device.

We looked at the basic Unity workflow for developing VR experiences. We also provided a stationary solution so that we could focus on the development process. The Cardboard platform provides access to VR content from a mobile platform, but it also allows for touch and gaze controls.

You read an excerpt from the book, Virtual Reality Blueprints, written by Charles Palmer and John Williamson. In this book, you will learn how to create compelling Virtual Reality experiences for mobile and desktop with three top platforms—Cardboard VR, Gear VR, and OculusVR.

Read More

Top 7 modern Virtual Reality hardware systems

Virtual Reality for Developers: Cardboard, Gear VR, Rift, and Vive

 

 

2 COMMENTS

  1. Heya

    Used this to build a model of the Sol system in non VR and it looks amazing. It’s going to be a feature of a virtual world that we use to teach students who can’t attend school via our online program.

    Thanks so much for making this tutorial available!

LEAVE A REPLY

Please enter your comment!
Please enter your name here