3D Google Street View Room

IMG_20131118_233953

3D Google Street View Room  –  ICM Final Project

The 3D Google Street View Room is an immersive experience using Google Street View API, Processing, Projection Mapping (with Matrox Triple Head 2Go), and 3D anaglyphic glasses.  I created a space where 3D anaglyphic images are projected on 3 walls allowing viewers to virtually travel to the Eiffel Tower, Washington Square Park, an Aztec Pyramid, the Himalayas… anywhere Google Street View has an image database.

Video 1st Beta Tester

The Inspiration
On April fools day of 2011 Google Street View Classic introduced a secret function that allowed users to create 3d Anaglyphic images by pressing “3” on the keyboard while viewing street view images. This cool little 3D add-on was the inspiration of this project, which made me think:  Wouldn’t this be really cool if it was projected in a large room, and you could go immerse yourself into Google Street View.

First Designs

3D_Streetview_Composite

I embarked on this project thinking it would be relatively. Since Google Street view already had a 3D function, I thought my job would be to just bring in the 3D images into processing.  Of course it was not that easy.

1. Street View uses java script, and I at this point I was unable to bring in javascript into my processing sketches.  I can export Processing Sketches as java script but not vice versa.

2. The new Google Street View no longer has the 3D function.

3. Using multiple projectors can be challenging.

Step 1 – Bring in images from Google Street View.  

To use Google API tools you must first register with Google.  https://developers.google.com/maps/

Once you get an API key, this allows you to bring any Google Street View Image into your application.  Google actually has a crazy laser based algorithm that stitches together all the images in their database for the specific location you are viewing in street view.  I was unable to incorporate this full panoramic stitching in my processing sketch as it required IMPORTING javascript into Processing.  If you know how to do this please leave a comment.

For simplicity I decided to bring in 3 images from street view – the Main center image, and the right and left adjacent images, photographed at about 90 degrees from the main image point of view.

To get the images I created a tool that allowed me to get the images I needed:
http://itp.junglebrains.com/3d-google-street-view-room/
The following tutorial was really helpful in understanding the Street View API and making the tool.  http://hayageek.com/google-street-view-image-api/

Finding images is half the fun.  I was looking for iconic images from different parts of the world.  In fact Paris was the first location I chose. When you find the location and press the link to view the image you get this type of URL:

http://maps.googleapis.com/maps/api/streetview?location=40.745173,-73.992321&heading=141.17397888897318&fov=90&pitch=-14.587814686784258&size=600×600&sensor=false&GOOGLE_API_CONSOLE_KEY=

Breaking down the URL you will see:

  • Location=40.745173,-73.992321
  • Heading=141.17397888897318
  • FOV=90
  • Pitch=-14.587814686784258
  • Size=600×600
  • Sensor=false
  • GOOGLE_API_CONSOLE_KEY =

With these variables I was able to create a function in processing that allowed me to bring in the main image, and by altering the Heading, I could also get the adjacent images.  To my surprise, just using 90 degree intervals for the Heading did not create the perfect alinement, and fine tuning had to be done.

 In the processing sketch a class was created that would bring in the Google street view string along with the needed variables from above.  

Single Image from Google Street View: streetview

Step 2 – Create Anaglyphic images using Processing.

Anaglyphic 3D uses stereo red and blue imaging to create a 3D effect with the uses of Anaglyphic glasses.
3d-glasses

I used the following code and contributions when incorporating anaglyph to the pictures from the Google Street Maps API

– Optimised anaglyph shader by John Einselen:  http://iaian7.com/quartz/AnaglyphCompositing
– Simple anaglyph shader by r3dux: http://r3dux.org/2011/05/anaglyphic-3d-in-glsl/
– Anaglyph libraries adapted for Processing by Raphaël de Courville

Images:

Screen Shot 2013-12-03 at 8.49.41 PM Screen Shot 2013-12-03 at 8.49.16 PM Screen Shot 2013-12-03 at 8.48.46 PM Screen Shot 2013-12-03 at 8.48.23 PM Screen Shot 2013-12-03 at 8.47.59 PM

Step 3 – Project – using Matrox Triple head to go DP

Step 4 – Adjust Anaglyph levels.  Map them to mouseX.

 

Processing Sketch link: AnaglyphShader_WORLD_BIG_SCREENS2 

Leave a Reply