In the last post we introduced the idea of a tool that can pull down stereo panoramas rendered in A360 and use them to create a local, aggregate scene for viewing in the Google Cardboard-compatible krpano viewer.
Today we’re going to start looking at the specifics of such a tool, firstly by describing the structure of an A360 stereo panorama and how we can convert it to a format supported by krpano.
You’re likely to have URLs in one of two formats for your A360-rendered stereo panoramas:
- This is a “Preview on your phone” URL, that isn’t published in the gallery
- This is a stereo panorama that has been published to the A360 gallery
It’s fairly easy to work out the files that make up the actual panoramas, based on these URLs. Using Chrome’s Developer Tools you can pretend to be a mobile device and then load each of the pages…
Then it’s a simple matter of checking the Network tab to see the images etc. that the page loads.
Here are the two images loaded by the first one, for instance:
And here are the images loaded by the second:
While the format for preview vs. published is slightly different, you can see that the URL of each of the left and right images is closely linked to the original’s: you can basically work out how to get to the two images from the original without too much difficulty (and the source for the project that I’ll share, before too long, shows exactly how to do this).
The images themselves – whether for the left or the right eye – have a similar structure: they’re cube maps.
Each cube map can be considered as six separate images that can be mapped onto the faces of a cube, the Left, Front, Right, Back, Down and Up directions respectively, going from left to right across the aggregate image. The length of each face’s side will depend on the rendered resolution: the preview images I found were 1024 on a side (which means 6144 width for the aggregate image) while the published one mentioned earlier is 1536 on a side (9216 width for the aggregate).
For krpano we’ll extract these into separate files, as well as creating a low-res preview image that comprises the Left, Front, Right, Back, Up and Down images, but this time stacked vertically rather than horizontally.
We’ll create standard versions at 1536 on a side and mobile versions at 1024.
For the thumbnail images… there is a thumbnail associated with each panorama, but I haven’t worked out how to determine its URL. Instead of spending time on it, I decided to just take the Front image and pull out a portion from the centre of that. We’ll also round off the corners to make a nice circular image, saving it as a PNG to allow us to get transparency for the border.
That’s basically all there is to the format of the data we pull down… in the next post we’ll talk about the approach for creating the XML format as well as the label text images for our various scenes. After that we’ll be ready to take a look at the finished code.