Google Cardboard Tutorial for iOS and Android

By Anessa Petteruti

In this tutorial, you'll be building a mobile application for Google Cardboard that will run on both iOS and Android devices.

Requirements

For iOS:

  • iOS 11 or higher

  • Xcode 10.3 or higher

For Android:

  • Android 5.0 "Lollipop" (API level 21) or higher

  • Android Studio version 3.4.1 or higher

Directions for iOS

1. Clone the following repository onto your local machine: https://github.com/Anessa-Petteruti/cardboard-tutorial

2. Once downloaded, the device needs to be configured. The user will tap the settings icon within the app, which prompts the didTapSwitchButton() function in HelloCardboardOverlayView. Add the following within the didTapSwitchButton() function:

if ([self.delegate respondsToSelector:@selector(didTapBackButton)]) {

[self.delegate didChangeViewerProfile];

}

self.settingsBackgroundView.hidden = YES;

This code hides the background view so that the VR scene is rendered.

3. In didChangeViewerProfile(), add:

if (_isSwitchViewerPresenting) {

return;

}


CardboardQrCode_scanQrCodeAndSaveDeviceParams();

_updateParams = YES;

_isSwitchViewerPresenting = YES;

This code hides the background view so that the VR scene is rendered.

4. In order to create the head tracker, add:

_cardboardHeadTracker = CardboardHeadTracker_create();

in viewDidLoad().

5. Within the glkViewController, add:

if (pause) {

CardboardHeadTracker_pause(_cardboardHeadTracker);

} else {

if (_updateParams) {

[self updateCardboardParams];

}

CardboardHeadTracker_resume(_cardboardHeadTracker);

}

which pauses and resumes the head tracker.

6. To create a lens distortion object, add:

CardboardQrCode_getSavedDeviceParams(&encodedDeviceParams, &size);


// Create CardboardLensDistortion.

CardboardLensDistortion_destroy(_cardboardLensDistortion);

_cardboardLensDistortion =

CardboardLensDistortion_create(encodedDeviceParams, size, width, height);


// Initialize HelloCardboardRenderer.

_renderer.reset(new cardboard::hello_vr::HelloCardboardRenderer(_cardboardLensDistortion,

_cardboardHeadTracker, width, height));

7. To run the application, plug your device into your computer. Click Run, and once the app starts, press the gear icon in the application. Scan the bar code on the Cardboard headset, and place the phone into the headset. Close the headset, and take a look at the VR spheres! You should see the following:

and if you stare at the spheres, they should change color:

Directions for Android

1. Clone the following repository onto your local machine: https://github.com/Anessa-Petteruti/cardboard-tutorial

2. In Android studio, select Open an existing Android Studio Project, and select the hellocardboard-android folder as well as the sdk folder.

3. In the Gradle tab, double click the assemble option within the build folder (sdk --> Tasks --> build --> assemble).

4. The device needs to be configured. The user will tap the settings icon within the app, which prompts the SwitcherViewer() function in HelloCardboardApp. Update the HelloCardboardApp::SwitchViewer() function to:

void HelloCardboardApp::SwitchViewer() {

device_params_changed = true;

CardboardQrCode_scanQrCodeAndSaveDeviceParams();

}

5. To create the head tracker, add the following to the constructor of HelloCardboardApp:

HelloCardboardApp::HelloCardboardApp(JavaVM* vm, jobject obj, jobject asset_mgr_obj) {

head_tracker_ = CardboardHeadTracker_create();

Cardboard_initializeAndroid(vm, obj); // Must be called in constructor

}

6. The proper lens distortion can be added to the rendered content by adding:

CardboardQrCode_getSavedDeviceParams(&buffer, &length);


CardboardLensDistortion_destroy(lens_distortion_);

lens_distortion_ = CardboardLensDistortion_create(

buffer, length, screen_width_, screen_height_);


CardboardQrCode_destroy(buffer);

7. To run the application, plug your device into your computer. Click Run, and once the app starts, press the gear icon in the application. Scan the bar code on the Cardboard headset, and place the phone into the headset. Close the headset, and take a look at the VR spheres!

and if you stare at the spheres, they should change color: