Configure S3 for 360˚ Panoramas

An increasing number of 360˚ Panorama photographers are hosting their final project files on the Amazon S3 platform. This tutorial provides step-by-step instructions on how configure, upload and publish Pano2VR or Krpano project folders on S3.

Note: When I was writing the "Create an AWS Account" tutorial I use the latest version of the Firefox browser. I continued using the Firefox browser in this tutorial but ran into loading issue with the pano.xml file after uploading Pano2VR projects via Firefox. Switching to Google Chrome resolved the issue so I would highly recommend that you use an alternative browser for the publishing tutorial.

The panorama below is the final result of the tutorial and is embedded using the S3 Link URL in an iFrame.

The tutorial is broken down in 6 steps;

  1. Project Folder - the files you will be uploading
  2. Login to Amazon S3 - opening the Console
  3. Create your first Bucket - the steps required to create, name and set properties for the bucket
  4. Static website hosting - setting additional properties for hosting
  5. Upload the Project Files - uploading and setting permissions on your project files
  6. Displaying the Panorama - using iFrame code to display the panorama from Amazon S3

Step 1. Project Folder

1. Make sure you have a working Pano2VR or Krpano project in a folder that you can upload during the tutorial. My project is a panorama taken in the small village at Wasisi Bay on the Vanuatu island of Tana. (figure #1)

figure #1: Pano2VR Project Folder

Step 2. Login to Amazon S3

1. Login to AWS account by browsing to https://aws.amazon.com/s3/ and clicking on 'Sign In to the Console' (figure #2)

 figure #2: Amazon S3 Homepage

figure #2: Amazon S3 Homepage

2. Enter the email address you used when you created your AWS account and click on 'Next' (figure #3)

figure #3: Sign In email address

3. Enter the Password you used when you created your AWS account and click on 'Sign In' (figure #4)

figure #4: Sign In password

4. In AWS Services, click on 'S3' from either "Recently viewed services", if available, or "Storage/S3" (figure #5)

figure #5: AWS Services

Step 3. Create your first Bucket

If you haven't created anything in your S3 storage your page will indicate there are 0 buckets (figure #6)

Note: Amazon S3 buckets are like containers for your files. You can name your buckets the way you like but it should be unique across the Amazon system. There are a number of schemes for naming but in this example I'm going to use a simple name.
Once the bucket is created you can upload a folder of images/scripts/etc into that bucket and then access it via a URL.

1. To start, click on '+ Create bucket' to open the Create bucket popup.

figure #6: S3 Storage

The "Create bucket" popup has 4 steps that have to be completed in order to create a bucket. In this, the "Name and region" section, the action is to name the bucket and assign it to a region. (figure #7)

Note: after creating your first bucket the option to "Copy settings from an existing bucket" will be available to you.

There are a number of articles on the web related to naming buckets including this one from the Digital Inspiration website Amazon S3 Buckets Described in Plain English however in this example we will be using a simple bucket name, 360s3tutorials.

Note: there are Bucket Restrictions and Limitations and if you'd like more information I'd recommend you read the Amazon developer guide article on the subject.

figure #7: Create bucket popup

2. Click in the 'Bucket name' field and add the name of your bucket. In my example I've added a name 360s3tutorials (figure #8)

Note: Bucket names must be at least 3 and no more than 63 characters long and can contain lowercase letters, numbers, and hyphens. Bucket names must be a series of one or more labels. Adjacent labels are separated by a single period (.) Each label must start and end with a lowercase letter or a number.

figure #8: Add bucket name

3. Click in the 'Region' field and select the region of your bucket from the dropdown menu. In my example I've selected Asia Pacific (Sydney) (figure #9)

Note: Amazon S3 creates buckets in a region you specify. You can choose any AWS Region that is geographically close to you to optimize latency, minimize costs, or address regulatory requirements. For example, if you reside in Australia, as I do, I find it advantageous to create buckets in the Asia Pacific (Sydney) region

figure #9: Select Region

4. Once you have added the bucket name and region select the 'Next' button to open the "Set properties" section (figure #10)

figure #10: Next to 'Set Properties'

5. In this tutorial we are going to leave the "Set properties" section at it's "Default" and click on the 'Next' button to advance to "Set Permissions" section (figure #11)

figure #11: Default settings for Set Properties

6. In the "Set permissions" section it shows allows us to manage users, manage public and system permissions. In this tutorial all we want to do is set the "Public permissions" to allow public access to the bucket. (figure #12)

figure #12: Set permissions

7. Under "Manage public permissions" click on the dropdown menu and select 'Grant public read access to this bucket' (figure #13)

figure #13: Manage public permissions

8. With the public read access set, click on the 'Next' button to advance to "Review" section (figure #14)

figure #14: Next to Review

9. The "Review" section shows you the choices you have made in the other "Create bucket" sections. If you need to make any changes click on the 'edit' that relates to the section you want to change. If everything is okay click on the 'Create bucket' button to close the popup. (figure #15)

figure #15: Review

10. You have created your first S3 Bucket! (figure #16)

figure #16: First S3 bucket

Step 4. Static website hosting

The next step is to set the permissions of the bucket to "Static website hosting". 

Note: You can host a static website on Amazon Simple Storage Service (Amazon S3). On a static website, individual webpages include static content. They might also contain client-side scripts. Amazon S3 does not support server-side scripting such as PHP, JSP, or ASP.NET.

1. Click on the small bucket icon next to the name of the bucket, this will open the Bucket management popup.

Note: You can see in the Properties section that Static web hosting is Disabled.

Click on the 'Properties' link to open the Properties settings window (figure #17)

figure #17: Bucket management

2. Click anywhere in the 'Static website hosting' window to access options for hosting. (figure #18)

Note: Clicking on the 'Learn More' link will take you to a detailed description of Static website hosting.

figure #18: Select Static website hosting

3. Click in the 'Use this bucket..' circle hotspot (figure #19)

figure #19: Use this bucket

4. Type in the words 'index.html' into the "Index document" field. Click on the 'Save' button to apply changes (figure #20)

Note: This setting points to an index.html document that may be placed at the root level of the bucket at any time. It is not required to successfully finish this tutorial. These settings can be updated at any time.
 figure #20: Set index.html

figure #20: Set index.html

5. Bucket hosting has now been enabled and you can return to the console by clicking on the Amazon S3 link (figure #21)

figure #21: Bucket hosting enabled

Step 5. Uploading Project Files

1. Click on the 'Bucket' name to open the bucket and access the "Upload" options (figure #22)

 figure #22: Open Bucket

figure #22: Open Bucket

2. Click on the 'Upload' button to open the "Upload" popup window. (figure #23)

figure #23: Upload Button

3. The "Upload" popup has 4 steps that have to be completed in order to finalise the Upload. In this, the "Select files" section, the action is to drop and drag your project folder onto the window. Alternatively you can use the 'Add files' button. (figure #24)

figure #24: Select files

4. Once the Project Folder has been uploaded select the 'Next' button to proceed to the "Set permissions" section (figure #25)

figure #25: Files uploaded

5. Under "Manage public permissions" click on the dropdown menu and select 'Grant public read access to this object(s)' , click on the 'Next' button to continue to Set properties(figure #26)

figure #26: Manage public permissions

6. Check that 'Standard' is selected for Storage class and 'None' is selected for Encryption. Select 'Next' to continue to Review. (figure #27)

figure #27: Set Properties

7. The "Review" section shows you the choices you have made in the other "Upload" sections. If you need to make any changes click on the 'edit' that relates to the section you want to change. If everything is okay click on the 'Upload' button to initiate the upload. (figure #28)

 figure #28: Review

figure #28: Review

8. After selecting 'Upload' the popup window closes, the project folder appears in the console window and the upload progress is displayed in a bar across the bottom of the browser window (figure #29)

figure #29 Upload progress

10. To view the files within the uploaded folder click on the 'folder name' to view the files (figure #30 & 31)

figure #30: Click to view files

figure #31: Project files

Step 6. Displaying the Panorama

1. With the Project files window displayed you can quickly check that the project has uploaded properly by clicking on the index.html to open the object overview window. (figure #32)

figure #31: Project files

2. The object overview window provides information about the object including its Link URL and has several options for actions that can be applied to the object. To view the project select the 'Open' button and the index.html link will open in a new tab (figure #33 & 34)

 figure #33: Object overview

figure #33: Object overview

figure #34: Link preview

3. To embed the project into a web page an iFrame is a great option. In this tutorial, the panorama example at the top of the page has been embedded using the following code;

<IFRAME src="https://s3-ap-southeast-2.amazonaws.com/360s3tutorials/VA-WA-Local-Kids-Lizard-2/index.html" width="100%" height="490" frameborder="no" scrolling="no" allowfullscreen="true"></IFRAME>

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia