Capturing Spherical Scenes from Google Streetview
Update 8/20/15:AHA! So a lazy evening taking a look at Google Maps API examples again, and I’ve sussed out a way to display the PanoID as you move around the map. Take a look and don’t mind the ‘undefined’ when you first load. As soon as you move to a new location, it’ll get replaced by the PanoID.
As I’ve mentioned in the comments below, there are some panos that just won’t work and will return black frames. These appear to mostly be user-submitted panos. Scenes from the Google Car generally seem to work.
In other words, I should probably heavily edit this post someday.
Update 3/24/14: Well, it appears that the new version of Google Maps uses URLs that make it harder (if not impossible) to discover the individual tile addresses – so this has as far as I can tell stopped working. I’ll poke around and see if there’s something new in the Maps API, but for now, I think this doesn’t work anymore. Phooey.
Update 7/23/14: If you look carefully around the new Google Maps, there is an option for “Return to classic Google Maps” so all is not lost. There are probably some ways of doing this with the new Maps also, but I haven’t sorted out a simple way yet.
A couple weeks ago, I had the task of turning our dome into the inside of the TARDIS from Doctor Who. (Planetariums are bigger on the inside too, right?) A few days before I had stumbled on this awesome Google Streetview easter egg that puts you right inside the control room of the blue box itself. Step inside and take a look around!
There are some really nice, high resolution spherical views in there, and I want to get at that data. But how?
When you load up any Streetview scene, your browser is working behind the scenes downloading dozens of individual .jpg image tiles and assembling them into a spherical scene. And, as it turns out, you can download the individual tiles yourself and assemble them into an equirectangular projection like so:
An intriguing individual tile, at full size:
Before we go any further, I should say that if all you’ve got is a web browser and Photoshop, you can do this but it will take a ridiculous amount of time and effort. In this demonstration I’ll be using a cross-platform command-line tool called cURL to do the downloading, and Adobe After Effects to do the stitching. As with many things, There Is More Than One Way To Do It. If you’re handy with the command line and scripting, and don’t have After Effects you might try ImageMagickfor the stitching. Your final equirectangular image will be 13312×6656 pixels in size, so make sure you have a computer up to the challenge.
Grabbing the Tiles
Each tile has its own unique URL, and to find it you’ll first need to examine the URL for the whole panorama itself. Don’t look in the browser address bar; that address won’t necessarily change as you wander around Streetview. Instead, once you’ve navigated to the scene you want to grab, click the link button in Google Maps’ sidebar:
Copy the URL and paste it in a text editor. Like in many big long URLs, various chunks of data are separated by “&” characters. We’re looking for a particular chunk of data called “panoid”, the unique ID of the panorama.
The code in bold is the bit we need, everything between
panoid= and the very next “&” character.
In a typical Streetivew scene, there are 338 tiles (each 512 pixels square) that will make up our equirectangular view. The top-left corner has coordinates (0,0), and the lower-right corner is (25,12). The unique URL for the tile eleven columns from the left and eight rows down is:
Notice the coordinates are denoted in the string
&x=10&y=7. Remember we’re counting from zero, so the eleventh column is numbered 10, and so on. You can click the link here to see a now-familiar looking tile. Here it is in the context of the whole image:
You could download and save each and every tile that way, just by typing the URL into the browser and changing the coordinates each time. That would be nuts. Let’s use cURL and get them all downloaded in about a minute. (Your bandwidth may vary.)
cURL is a command-line tool for downloading internet content. If you have a modern Mac or Linux system, you probably already have cURL. If you don’t have it, or you have a Windows system, start at the cURL Download Wizard to direct you to the correct version. Here’s another page with some useful tips for cURL on Windows. I haven’t messed much with cURL, especially on Windows. Get to know it before moving on…
The following cURL command will download every tile, column by column, row by row:
Mac / Linux:
curl http://cbk0.google.com/cbk?output=tile\&panoid=lKxUOImSaCYAAAQIt71GFQ\&zoom=5\&x=[0-25]\&y=[0-12] -o "tile_#1-#2.jpg"
curl http://cbk0.google.com/cbk?output=tile^&panoid=lKxUOImSaCYAAAQIt71GFQ^&zoom=5^&x=[0-25]^&y=[0-12] -o tile_#1-#2.jpg
[0-12]iterates through the column and row numbers.
--o "tile_#1-#2.jpg"outputs the file with the filename starting with “tile_” and ending with the coordinate numbers.
#1corresponds to the first range of numbers,
#2to the second.
- Notice that any
&characters in the Google URL are now preceded by a backslash (or a caret in Windows) to avoid confusing your command-line environment, which otherwise would treat ampersands as special characters.
Run that command and very quickly you’ll end up with 338 image files, with names like these:
tile_0-0.jpg tile_0-1.jpg tile_0-2.jpg tile_0-3.jpg tile_0-4.jpg tile_0-5.jpg tile_0-6.jpg tile_0-8.jpg tile_0-9.jpg tile_0-10.jpg tile_0-11.jpg tile_0-12.jpg tile_1-0.jpg tile_1-1.jpg tile_1-2.jpg tile_1-3.jpg ... and so on, until tile_25-10.jpg tile_25-11.jpg tile_25-12.jpg
Assembling the tiles
You can manually stitch the images in Photoshop. It’s straightforward, but really slow and laborious. Depending on the content, automatic stitching software like Hugin might work (I haven’t tried it.) Experiment and see what works best for you. I will describe how to do it really quickly in Adobe After Effects.
- Create a new project in After Effects, and make a new composition, 13312×6656 in dimension with square pixels.
- Import all of the tiles into After Effects. Either drag them into the project pane, or select “Import File…” from the File menu.
- In the project pane, make sure that the images are sorted by name, in ascending order.
- Select all the image tiles in the project pane, and drag them into your composition. They should appear in the timeline in the same alphabetical order. There should only be tile images in this comp, nothing else.
- We’re going to add an expression to the position property of every tile. If you’re not familiar with expressions, this link will give you the very basics to get started.
- Select the topmost tile in the comp and press P to reveal the tile’s position properties. Hold down the alt (Win) or option (Mac) key and click the stopwatch icon. An area opens up on the timeline ready for you to type in an expression. Paste in the following code:
- Now, to copy that code to every tile. Click on the label “position” on that first tile. From the menu bar, select Edit->Copy.
- Select every tile layer in the composition. Select Edit->Paste. This will paste any position data, including the expression, to every layer you selected. If you’ve been successful, all the tiles should move to their proper position relative to the composition.
The expression code looks at the layer number, or “index,” of each tile, and calculates the correct position of the tile based on that index, knowing that there is a grid of 26×13 tiles, and assuming that they are arranged in the timeline in proper alphabetical order.
You can export that single image from After Effects by selecting Composition->Save Frame As…, which will add it to the Render Queue, and from there you can select what format to save it as. Make sure it’s set to “Full Quality” in the render settings if you want the full 13312×6656 dimensions.
From then on it’s a matter of turning that equirectangular view into a dome master, and there are too many ways to do that to mention here!
Hope that made sense…
I hope you may find this useful. Please leave comments below if something here needs clarification! I tried to balance between keeping everything step-by-step and not getting too deep in the woods with details.