After seeing the 3D UI capabilities of Gear VR – courtesy of the Oculus Mobile SDK – my own UI that I implemented in HTML felt, well, flat. The main problem seemed to be that it moved with your head, staying stuck to your view. It also suffered from the issue of visual degradation when the selection was away from the middle of the list.
All in all a fairly unsatisfying experience. But how to make it more 3D and visually appealing? Ideally I wanted the UI to stay in HTML5 – if I used native Oculus Mobile SDK capabilities to display a UI, that wouldn’t be easily portable to other platforms. Also keeping the UI in HTML5 meant I wouldn’t have to duplicate the menu information in the native app: when I add models to the HTML page they’ll just appear in the UI, too.
So I started with this set of 3D HTML5 samples, a few of which were of some interest. Getting a 3D perspective view on text seemed part of the problem, while having the view adjust according to the device tilting seemed another. In the end I chose to take this 3D carousel sample as a basic for my UI implementation, with the primary additional feature being the addition of device tilt navigation.
This carousel has two orientation options… I was only really interested in the vertical mode, as our entries will consist of text (and would therefore be too long to display horizontally).
My first step was to hardcode the entries I wanted, to see how it looked:
With a few more hours of work, I ended up replicating the carousel on both sides of the screen in a way that works well in VR. I even added a little perspective difference between the two eyes to enhance the 3D effect.
In this version you can see we click on the left and right of the screen to move the selection up and down, respectively. Adding device tilt support – for when the page is loaded on a mobile device – was actually fairly easy, at this point: if you look up or down a little then the selection changes by own item (in the direction you look in) and if you look up or down further it jumps by two items at a time, allowing you to scroll through more quickly.
Looking forward stops the selection from changing, at which point you can use the magnetic trigger button to open the selected model.
What I found interesting was that despite the carousel not being fixed in 3D space – with us looking around to find it, as is the case with Gear VR – I didn’t get the same feeling of nausea as I’d had with the 2D version. It seems that the fact the carousel adjusts to head movement – and the display is more 3D – is enough to stop the feeling of sickness.
Having the selection be driven by head movement also allowed me to remove the single- vs. double-click code from the Android app container: a single-click now opens a model. Another click closes it.
If you have an Android device and a Google Cardboard-compatible HMD, here’s the application installer for you to try (you can also have it auto-launch via NFC, once you’ve installed it). If you do – literally! – take it for a spin, be sure to let me know what you think via this post’s comments. Especially if you have suggestions for how to improve the experience, which would be very welcome.