In these two recent posts we talked about my belief that untethered VR technologies, such as Google Cardboard and Samsung Gear VR, can be used to deliver really compelling design visualization experiences.
This series will focus specifically on how to create a multi-scene VR experience using A360 cloud rendering and a panorama viewer called krpano.
Let’s start by introducing krpano. This is a fairly powerful tool for creating, publishing and viewing panoramic experiences, whether 2D or 3D. The main focus appears to be 2D – the ability to work with VR scenes is (at the time of writing) only available in a pre-release version – but it’s nonetheless a very capable viewer for stereoscopic 3D scenes that works very well with Google Cardboard.
The viewer is based on either Flash or HTML5: you can choose which version to use. There are certain interesting features – such as directional sound – that only appear to be supported by the Flash version, but for maximum compatibility (especially on mobile) I’ve decided to stick with HTML5.
Scenes are defined in XML files: the file can be created in a text editor or using a front-end, graphical editing tool such as Kolor Panotour Pro. In this series of posts we’re going to generate the XML scene from code – along with the various supporting files it needs to display a 3D stereo panorama – so I went and bought a krpano license for €129, rather than the full Panotour Pro license for €399 (which does include a license for krpano, at least).
The concept for our application is fairly simple: we want to create an tool that lets us specify a number of stereo renderings from A360, out of which it’ll create an aggregate experience. Part of this is creating a panorama for each of the renderings – which we’ll look at in detail in the next post – but it’s also about creating a top-level experience where each of the panoramas has a thumbnail displayed: the VR user can then look at the thumbnail related to a scene to open it.
If you want to give the finished experience a try, click here. If you’re on a desktop you’ll have to use a simulated VR mode – the best is to open the link on your mobile device, though.
Here are some screenshots I took on my own phone. We’ll start with the top-level view. This scene uses a sample panorama that ships with krpano, but the imagery is just perfect for cloud rendering!
When you use gaze tracking to select the “Look here to start” button, it drops away showing the thumbnails for the various stereo panoramas we've brought down from A360:
The gaze tracker highlights a thumbnail and lets us enter the scene.
Inside the scene we can clearly look around in 3D, albeit from a single viewpoint.
When we’re done, we can look down until we see a faded “Home” button float into view. Selecting this takes us home to the top-level view, predictably enough.
Where we can, of course, enter another scene.
This one is more visually interesting.
And the same mechanism exists to go back to the top-level view.
The tool that generates the set of files I’ve copied to my web-site (here's that link again) is a simple .NET WinForms application written in C#. We could also have created a web site to do it – perhaps hosting the results directly – but initially it was simplest for me to throw together using C#. And as this is really just an admin tool I didn’t worry especially about aesthetics and usability.
The tool takes a title, a number of URLs and names, and then generates the resultant files in an “output” folder, ready to be copied to our web-site. Here it is in action, downloading a number of stereo scenes that were published to the A360 Rendering Gallery:
While these stereo panoramas are all posted publicly, we'll see that the tool also works with panoramas that have been made accessible via the "Preview on my phone" option.
Now that we’ve introduced the concept behind the application, we’re ready to dive into the implementation details. We’ll start that in the next post.
