Creating panoramic virtual tours

Provide a 360 Degree 3D Panoramic Tour on Your Website

+ Stitched 360 Degree Panoramas

+ Zoomable High-Res Photos

+ 3D Interactive Experience

Photosynth Embed Tutorial
Watch How-to Video

Looking to promote a place, object, or event? With Photosynth, you can convert a collection of photos into a 360 degree 3D panoramic experience and embed it onto a web page. Let visitors to your site visually explore what differentiates you from your competitors.

Scenario Example

 

Here are a few examples:

  • Hotels & Restaurants can show off their distinctive ambiance or location
  • Cities & Towns can promote their landmarks and attractions
  • Museums & Galleries can display their unique collections
  • Businesses & Organizations (e.g. health clubs, social clubs, education facilities, offices, etc.) can draw attention to their state-of-the-art facilities

All it takes are 3 easy steps: (1) shoot your pictures, (2) convert them into an interactive 360 degree 3D panoramic tour, and (3) embed some code on your web page.

To try out the interactive viewer for yourself, just click on the image below.


Example of a 3D panoramic tour of an interior

How-to Guide

This tutorial shows you how to use Microsoft Photosynth to convert a collection of photos into an interactive 360 degree 3D panoramic tour.

Originally created by Microsoft Live Labs, Photosynth is a free service from Microsoft that stitches your digital photos together into a 3D model and provides an interactive viewer for exploring the model in detail. [The viewer requires Microsoft Silverlight™, a free browser plug-in that runs on both Windows and Mac. See this page to get Silverlight™].

Photosynth supports two types of 3D models: "panoramas" and "synths":

  • Panoramas provide a contiguous view of photos taken from a single spot (as illustrated by this panoramic scene of a hotel lobby).
  • Synths can provide views of photos taken from multiple perspectives and with varying degrees of detail; and they enable you to navigate to individual photos (as illustrated by this synth of a teahouse).

This tutorial describes how to create synths. Panoramas will be covered in a future tutorial.

Click on each of the steps below for step-by-step instructions.

Step 1 - Shoot Your Pictures

The first thing you need to do is take photos – lots of them! The quality of your photos will determine the resulting quality of your synth. In addition to standard photographic qualities (lighting, focus, etc.), here are some things to keep in mind while shooting your photos:

Example

Stand in the center of the room, and shoot the panorama images first. Take lots of overlapping photos, trying for at least 50% overlap between photos.

Example

Move around and take more photos from different angles and perspectives, trying to get each part of your scene in at least 3 different photos taken from different perspectives.

Example

When moving around objects, try to get one photo for every 15-25 degrees or so.

The Photosynth Photography Guide provides a wealth of tips and in-depth information on shooting photos for a synth. Or watch this 3 minute video: How to Shoot Photos for Photosynth.

Once you’ve taken your photos, and before you create the synth, make sure all your photos are the right side up. And be sure not to crop them (it confuses Photosynth).

Step 2 - Convert Them into an 3D Panoramic Tour (or "Synth")

Synths are created on your local machine and uploaded to the Photosynth service using a free browser plugin. Creating and publishing a synth involves launching the Photosynth Application, selecting photos, setting the synth attributes, and publishing your synth.

Initial Setup

Before you can start creating synths, you’ll need to create a free Photosynth account and download the free Photosynth Application.

A Photosynth account enables you to upload synths to the Photosynth service; a free account provides up to 20 GB of storage. To create your Photosynth account:

  • Go to the Photosynth site, and click on the Create Account link at the top of the window.
    Example

  • Sign in with your Windows Live ID. (If you don’t already have one, you can create one from an existing email account by clicking on the Sign Up Now button on the right. See the Create a Windows Live ID help topic, for more details). [Show screenshot]

  • Enter a username and description, and click on the Create Account button [Show screenshot]

  • Once you’ve created your account, you’ll be redirected to the Photosynth home page.

The Photosynth Application, or "synther", is a browser plugin that converts collections of photos into synths, and uploads them to the Photosynth service. The synther, required only for creating synths, runs on Windows. (If you’re a Mac user, it will run under Boot Camp). To install the Photosynth Application:

  • Click on the Upload button, at the top of the window.
    Example

  • Click on the Install Photosynth button [Show screenshot]

You're now ready to begin creating synths!

Launching the Photosynth Application
  • Go to the Photosynth site, and click on the Upload button at the top right of the window.
    Example

  • Click on the Create Synth button. [If you haven’t already installed the synth tool, you’ll see an Install Photosynth button instead. Follow the steps in the previous section to install.] [Show screenshot]

  • If you’re not already signed in, you’ll be asked to sign in with your Windows Live ID. Enter the email address and password associated with your Windows Live ID and click the Sign In button. [Show screenshot]

  • Click Start a new synth to launch the Photosynth Application. [Show screenshot]

Selecting Photos
  • Click on Add Photos, to begin selecting photos to include in the synth.
    Example

  • Go to the folder containing your photos, select the photos you want to include, and click the Open button.
    Example
    [Hint: If you haven’t already done so, make sure all the photos are right-side up. You can rotate photos from within the file selection window by selecting the photos, clicking on the right mouse button and selecting Rotate clockwise or Rotate counterclockwise, as appropriate].

Setting the Synth's Attributes

Before you publish your synth, you’ll want to set some of its attributes:

Example

  • Name and Thumbnail: Give your synth a name; you can optionally set the thumbnail image by selecting one of the previously added photos and clicking the Use Selected Photo button. (This is the image that will displayed when your synth appears on a search results page within Photosynth)
  • Tags: You can add search tags to make it easier for people to find your synth on the Photosynth site.
  • Description: Enter text to describe your synth.
  • Visibility: Synths are set to Public by default. You can, if you choose, publish a synth as "Unlisted". Unlisted synths do not show up in the Photosynth search results, although any user that has the link can access it. (Note that the storage quote for unlisted synths is only 1GB).
  • Photo Rights: Defines the level of intellectual property rights you want to maintain over your synth. The default value is CC – Attribution (Creative Commons Attribution license). You can select from other Creative Commons licenses, or reserve full rights by selecting the copyright option.
Publishing Your Synth
  • Click the Synth button at the bottom of the window to create and publish your synth.

    Now wait for the synth to be created. Depending on the number and complexity of the photos you selected, this might take some time. The status bar will let you know what part of the process is being run, and when the process is complete.

    Example

  • Once it’s completed, click the View button to see your published synth.
  • Additional attributes can be managed from this page, as described in the Beyond the Basics section later in the tutorial. For now, click the Exit button (at the bottom right corner of the window) to continue.

Step 3 - Embed the Viewer on Your Web Page

Embedding a published synth on a web page is as easy opening your synth, copying the embed code and pasting into the page. The embed code can be added to any HTML page that supports the iframe element.

  • Go to the Photosynth site and click on the My Photosynths link at the top of the window. (If you’re not already signed in, click on the Sign In link and enter the Windows Live ID with which you previously created your Photosynth account.

    Example

  • Open your previously published synth by clicking on its title link.

    Example

  • Click on the Embed link at the bottom right of the viewer

    Example

  • Click on the Edit this Photosynth button at the bottom right.

  • Copy the code from the popup window (Hint: press Ctrl+C)

    Example

  • Paste the embed code into your webpage. Here is an example of what the embedded code looks like.

    Example

    If you're using Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, or ScrewTurn Wiki, you can get more detailed instructions and how-to videos by visiting the Code Snippet Embedding Tutorial.

  • Here's an example of what the resulting web page looks like:

    Example

Beyond the Basics - Enhance Your Synth

Once you’ve published a synth, there are a couple of ways you can enhance it:

  • You can "geotag" your synth and associate it to a specific geographical location. Geotagged synths will show up on the Bing Maps Photosynth application, enabling potential customers to discover your business or organization.
  • You can define "highlights" and provide direct links to specific points of interest within your synth. Highlight thumbnails appear in vertical strip along the right side of a synth.

All of these options are set via the Edit Synth page.

Opening the Edit Synth Page
  • Once you've opened the Edit Synth Page, go to the Photosynth site, click on the My Photosynths link at the top of the window, and sign into your account.

    Example

  • Open your previously published synth by clicking on its title link.

    Example

  • Click on the Edit this Photosynth button at the bottom.

    Example

Geotagging Your Synth
  • Click on the Geotag tab and drag the pushpin onto the map. You can either zoom in directly to find the location, or search for it by typing something into the Location box and clicking the Go button.

    Example

Adding Highlights to Your Synth
  • Click on the Highlights tab, and then navigate to a part of the synth that you want to highlight.

  • Click on New Highlights.
    Example

  • Resize the selection box to define the highlight.
  • Enter a Title and Caption for the highlight; then click the Add button.

    Example

  • When you’re done adding highlights, click the Save button.

Run Your Apps on the Microsoft Web Platform

Did you know that the most popular Web applications - like Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, and ScrewTurn Wiki – all run great on the Microsoft Web Platform?

Companies of all sizes are running their web infrastructure on the Microsoft platform because it’s cost efficient and provides the best ROI (see customer stories here).

Check out the Windows Web App Gallery, where you’ll be able to install, deploy, and customize these applications on the Windows Platform with just a few clicks.

Links to other resources: