Building Your first iOS Cardboard App

I had written most of this blog a while ago but hadn’t gotten round to posting it due to being swamped with work and stuff! Deadlines were fast approaching and I was also sent down south to take part in a “hackathon” with some people that film cool stuff using drones! Anyway, better late that never..

Recently I was motivated to try out some google cardboard on iOS. Most people assume that creating a Cardboard based app is difficult – but all of the heavy lifting is done behind the scenes by the SDK. This article will show you how easy it really ease to build your first Google Cardboard App!

The SDK I used is available from Github here: CardboardSDK-iOS. According to the GitHub page, the SDK works with Unity – but I instead chose to use it to build an Objective-c/OpenGLES app. The SDK uses GLKit for all of its maths and the default way to use it is to have a GLKViewController in your app – though from looking at the code it should not be too difficult to modify the source and use it without a GLKViewController/GLKView and instead use your own EAGLView.

The SDK does all the VR magic behind the scenes and requires you to implement the following protocol on your GLKViewController:

@protocol CBDStereoRendererDelegate <NSObject>

- (void)setupRendererWithView:(GLKView *)glView;
- (void)shutdownRendererWithView:(GLKView *)glView;
- (void)renderViewDidChangeSize:(CGSize)size;

- (void)prepareNewFrameWithHeadViewMatrix:(GLKMatrix4)headViewMatrix;
- (void)drawEyeWithEye:(CBDEye *)eye;
- (void)finishFrameWithViewportRect:(CGRect)viewPort;

@optional

- (void)triggerPressed;

@end

Infant if you do not care about using the trigger or memory management, you can get way with only implementing “setupRendererWithView” and “drawEyeWithEye”!

To show how easy it is to get started – I ported the iOS XCode OpenGL/GLKit Spinning Cube “Game” GLKit sample to google cardboard. Here is what I changed:

1. Subclass from CBDcontroller
2. Declare self as CBDStereoRendererDelegate
3. Delete ViewDidLoad and move SetupGL -> SetupRendererWithView
4. TearDownGL -> shutdown renderer
5. DrawInRect -> DrawWithEye
6. Remove Storyboard and set “RootViewController”
7. In DrawWithEye get Projection and EyeView matrix, Bind effects etc and Draw!
8. Unbind vertex `array object at the end of draw! (this is important so the glstate does not effect the post processing google cardboard does)

I did some quick cleanup after this. Excluding the shader setup and cube vertex data there are 152 lines of code – and it could have been even less since there are some unnecessary instance variables!

When it comes to rendering, you simply use the “Eye” objects to create the perspective and “EyeView” Matrices. The EyeView matrix has to be then applied to your camera transforms to translate the eye to the correct position in your worlds coordinate system (otherwise the eye would just remain floating about close to the origin somewhere). You then simply render the scene using these Matrices.

Its also worth noting that the “head” matrix is provided during the “prepareNewFrameWithHeadViewMatrix” aka “update” function. This can be used to work out what direction the users head is pointed at etc.

You can find the quick sample I built on my Github here. In the sample I have one spinning cube that stays in-front of the camera, and one cube which you must rotate your head to find.

As you can see, it is super easy to get up and running with google cardboard. In my opinion the results are really impressive considering how much it costs! Though if you want a much better VR experience you should try and get a shot at the Oculus Rift. I highly recommend you try it out if you get the chance.