AECBytes Architecture Engineering Construction Newsletters  

AECbytes Tips and Tricks Issue #44 (July 29, 2009)

Creating Panoramas in SketchUp and Pano2VR

Scott Onstott
Book & Video Author

Interactive panoramas are a compelling web technology that gives the viewer a better sense of space compared to a static photo. In this article, I'll show you how easy it is to create this type of interactive experience starting with either a 3D model or a panoramic photo using Garden Gnome Software's Pano2VR image converter for Windows/Mac/Linux.

In June 2007, I wrote an AECbytes article called "Crafting Interactive Panoramas with Photoshop CS3 and PTViewer", which is about creating panoramic images from a sequence of still photos and displaying them via a Java applet.

In my experience, the trouble with panoramas has always been the type of web technology used, because not everyone has the right plug-ins installed to power the interactive experience. Java's popularity seems to be a bit on the wane these days compared to the utter ubiquity of Flash. If people have to download a plug-in to view web content, they almost certainly won't do it. Pano2VR creates Flash (and Quicktime) output so in my opinion, it's worth the low price of admission (currently 59 Euros for single user / 149 Euros for a company) to ensure that everyone can see your panoramas.

SketchUp

Google SketchUp can't make panoramas by default, but this functionality can be easily added with a ruby script (see my article "Bezier Splines in SketchUp Using Ruby Scripts"). J. Wehby has written a script called CubicPanoOut.rb that does this nicely.

Google has a free version of SketchUp you can find here. After you install SketchUp, place CubicPanoOut.rb in the Plugins folder, which on Windows is under C:\Program Files\Google\Google SketchUp 7\Plugins, and on the Mac is under /Library/Applications/Google/Google SketchUp 7/plugins/.

Launch SketchUp and you'll have the ability to export cubic images, which can be used as the basis of panoramas. Download the example 3D model of the Roman Pantheon and open it in SketchUp. I found this model (by Albtraum) in Google's 3D warehouse, but have altered it slightly by turning off the section plane, inserting a number of silhouetted people, and creating a scene (virtual camera) at the center of the space. In addition, I've already turned shadows on (in Window > Shadows), which is something that you must do in your own panoramas to avoid shading problems in the cubic output images.

Choose Camera > CubicPanoOut and you'll see a small dialog box. Leave all the defaults as they are and click OK. You'll see info on the status bar say it's processing image 1,2,3 and so on up to image 6. When it's done, you'll have 6 jpegs on your hard drive in the same folder as the SketchUp file. These images represent the 6 faces of a virtual cube that encodes 360 degrees of spatial information.

You can now exit SketchUp without saving the file.

Pano2VR

We'll use Pano2VR to convert the 6 images output from SketchUp into a panorama, and later we'll create another panorama from a stitched image taken inside the actual Pantheon.

Download the free trial of Pano2VR and install it. Launch Pano2VR and click the Select Input button. Choose Cube Faces as the type and then select each one of the cubic images you output from SketchUp by using the individual open buttons.

Click OK and you'll see Pano2VR stitch the images together in a cross shape. The main dialog box has five different sections.

Click the Modify button in the Viewing Parameters section to set the initial position of the panorama. It's important to grab the viewer with the most compelling imagery right away or you might not hold their attention. Drag the mouse inside the preview area to set the initial position looking out the door. Change the field of view (FoV) in this case to 50 and click OK.

Click the Modify button in the Hotspots area and another dialog box appears. Use one of the drawing tools on the flat images to define a hotspot. Here, I drew a circle over the central part of the dome. Each hotspot has a title, url and optional target (for frames). Type "The Pantheon in Wikipedia" as the Title and copy and paste this URL into the dialog box. Click OK to close the Hotspots dialog box.

In the Output area of the main dialog box, choose Flash as the new output format and click the Add button. In the Flash Output dialog box that appears, change the Window Size to 550 x 340. It's a good idea to cause the panorama to auto-rotate so the viewer sees right away that it's not a static image. Check Enable auto rotation and decrease the Pan Speed to 0.10 degrees/frame. It's best to do a very slow pan around architectural interiors to avoid disorienting the viewer.

There are many different "skins" to choose from that create a user interface within the panorama. Choose controller_new.ggsk from the Skin drop-down list in the main dialog box. Click the Edit button under this drop-down and the Skin Editor dialog box appears. Scroll down in the Skin Editor to check out what it looks like. You could even design your own skin (or edit an existing one) if you really wanted to. Click OK.

Check out the Advanced Settings and HTML tabs. I checked Create HTML on the HTML tab to have Pano2VR do the coding and embedding for me. Click OK in the main dialog box to generate the SWF panorama. Double click the html file to see it on its own page, or see it embedded below. Drag in the panorama or use its user interface to check out the famous oculus.

Creating Panoramas from Photos

Creating a panoramic still image from a sequence of images is a snap in Photoshop CS3 or CS4 using its Photomerge feature. Other highly recommended panorama creation solutions include AutoPano Pro and Autodesk Stitcher Unlimited. We will start with a panoramic still image of the Pantheon's interior and turn it into an interactive flash experience using Pano2VR.

In Pano2VR, choose File > New to start from scratch. Click the Select Input button and choose Auto as the type. Download Patrick Landy's Pantheon_360.jpg and choose it as the input file. Click OK. Click the Modify button in the Viewing Parameters section to set the initial position of the panorama as the door. Set the FoV to 50 and click OK.

Add a rectangular hotspot over the sunspot and link it to this URL. The actual oculus wasn't captured in the panorama but we'll link to its sunspot. Type "Oculus sunspot" as the title and click OK.

Just as you did before, choose Flash as the new output format and click the Add button. Set the size at 250x145. The panorama on wikipedia is quite small so we are limited in terms of output size here. Of course, you are not limited in terms of resolution when you create your own panoramic images. In fact, the technology that allows you to stitch together panoramas allows you to build images with incredible resolution, far beyond what is possible with the most expensive camera. For example:

"Photographer Arnaud FRICH and image stitching experts KOLOR, editor of panorama creation program Autopano Pro, announce their project to shoot Paris in a very high definition. The final image will be a stitching of more than 2000 individual photos and will have a resolution of 20 Gigapixels, that is 20 billion pixels—the biggest assembled panoramic image of the world!" More info on this is available here.

Click OK in the main dialog to generate the SWF output, which is embedded below:

No matter whether you approach creating panoramas from the vector (3D) or raster (photographic) side, I hope you are inspired to get into the world of generating interactive panoramic imagery.


About the Author

Scott Onstott has a degree in architecture from UC Berkeley and worked in several prominent architecture, engineering, and interiors firms in San Francisco. In addition, he taught AEC software to thousands of students at several Bay Area universities.

Scott has written and edited scores of books, magazine articles, and video tutorials. He can be reached via ScottOnstott.com.



If you found this article useful and have not yet subscribed to AECbytes, please consider doing so. Subscription is free, and more subscribers will allow this publication to provide more of such content to you.

Tips & Tricks > Creating Panoramas in SketchUp and Pano2VR > Printer-friendly format

 
© 2003-2009 Lachmi Khemlani, AECbytes. All rights reserved.
Site design by Vitalect, Inc