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.

Update 23 December 2018: several sections have been updated to reflect changes made by Amazon to the Bucket creation process.

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 name and create your bucket

  4. Set Permissions - configure the bucket to allow web browsing

  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 buckets 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 ‘360s3panos’.

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 buckets

The Create bucket popup has 4 windows that have to be completed in order to create a bucket. (figure #7)

  • Name and region

  • Configure Options

  • Set Permissions

  • Review

Figure #7: Create bucket popup

Figure #7: Create bucket popup

2. In the first window, Name and region, we will name the bucket and assign it to a region.

Click in the Bucket name field and add the name of your bucket. In my example I've added a name 360s3panos (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.

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

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.

There are also 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.

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 Configure options window (figure #10)

Figure #10: Next to 'Set Properties'

5. In this window, Configure Options and the next window Set permissions we are going to leave all the settings at default and just select the Next button to advance to the Review window. (figure #11, 12)

Figure #11: Default settings for Configure options

Figure #12: Default settings for Set permissions

6. On the Review window select Create Bucket (figure #13)

Figure #13: Create bucket Review page

6. Congratulations, you have created your first S3 Bucket! (figure #14)

Figure #14: First S3 bucket

Step 4. Set Permissions

Under Access it shows ‘Bucket and objects not public’. So the next step is to set permissions that make the bucket and it’s contents available via the web.

1. Click on the checkbox next to the bucket, this activates a slide out bucket assets window with three sections; (figure #15)

  • Properties

  • Permissions

  • Management

Figure #15: Bucket assets window

2. Rollover the Properties panel to make it active and click to open the Properties window (figure #16)

Figure #16: Active Properties panel

3. The Properties window provides 5 options all disabled. The option we want to enable is the Static website hosting. Click in the Static website hosting panel to open the settings window. (figure #17)

Note: don’t click the Learn more link unless you want to read more about website hosting.

Figure #17: Properties settings

Figure #17: Properties settings

4. In the Static website hosting settings window click in the circle next to activate the ‘Use this bucket to host a website’ (figure #18)

Figure #18: Activate ‘Use this bucket to host a website’

4. In the expanded window type the words 'index.html' into the Index document field. Click on the 'Save' button to apply changes (figure #19)

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 #19: Set index.html and Save

Figure #19: Set index.html and Save

5. Bucket hosting has now been enabled and you move onto the Permissions settings by clicking on the Permissions tab (figure #20)

Figure #20: Bucket hosting enabled

6. In the Permissions settings > Public access settings click on the Edit button (figure #21)

Figure #21: Edit Public access settings

7. Uncheck all of the boxes and click on Save (figure #22)

Figure #22: Uncheck and Save

8. In the popup confirmation window type the word ‘confirm’ into the confirmation text box and click on the Confirm button to confirm your Public access settings (figure# 23)

Figure #23: Confirm the changes

Figure #23: Confirm the changes

9. The Public access settings are now all False. Click on the Access Control List to continue applying the settings (figure #24)

Figure #24: Click to proceed to Access Control List

10. In the Access Control List we will configure the Public access options. Start by clicking on the Public access/Group/Everyone panel. (figure #25)

Figure #25: Select Public access section

11. In the Everyone popup window check the List objects checkbox. (figure #26)

Figure #26: Public access Everyone settings window

12. A warning notification appears letting you know the bucket will have public access. Click on the Save button. (figure #27)

Figure #27: public access warning message

Now the settings have changed and public access has been granted to List objects (figure #28)

Figure #28: Access granted to List objects

Figure #28: Access granted to List objects

13. The final step is to set the Bucket Policy, click on the Bucket Policy tab to continue applying the settings (figure #29)

Figure #29: Bucket policy

14. Cut and paste the following policy code and paste it into the editor then click on the Save button. (figure #30)

Note: change 360s3panos to the name you gave your bucket in step 2

 
{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"PublicReadGetObject",
        "Effect":"Allow",
        "Principal": "*",
        "Action":["s3:GetObject"],
        "Resource":["arn:aws:s3:::360s3panos/*"
      ]
    }
  ]
}

Figure #30: Bucket policy code

After saving you will receive another warning message but you will also see Public icons on the Permissions tab, Access Control List and Bucket Policy buttons. (figure #31)

Figure #31: Public access is now set on Permissions

16. Click on the Overview tab to return to the S3 homepage. The Access associated with the bucket is now shown as Public (figure #32)

Figure #32: The bucket is now available to the public

Step 5. Uploading Project Files

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

Figure #33: Open Bucket

Figure #33: Open Bucket

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

Figure #34: Upload Button

3. The Upload popup has 4 windows that have to be completed in order to finalise the Upload.

  • Select files

  • Set permissions

  • Set properties

  • Review

In the first window, Select files, the action is to drop and drag your project folder onto the window. Alternatively you can use the Add files button. (figure #35)

Figure #35: Select files

4. Once the Project Folder has been uploaded select the Next button to proceed to the Set permissions window (figure #36)

Figure #36: Files uploaded

5. Under Manage public permissions click on the dropdown menu and select 'Grant public read access to this object(s)' (figure #37)

Figure #37: Manage public permissions

6. Once again you will see a warning message re public read access. Click on the Next button to continue to the Set properties window (figure #38)

Figure #38: Warning message

6. In the Set properties window check that 'Standard' is selected for Storage class and 'None' is selected for Encryption. Select 'Next' to continue to the Review window. (figure #39)

Figure #39: Set Properties

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

Figure #40: Review window

Figure #40: Review window

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

Figure #41: Upload progress

Note: after the upload has finished you can view the files within the uploaded folder.

10. Click on the 'folder name' to view the files (figure #42 & 43)

Figure #42: Click to view files

Figure #43:: 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 #44)

Figure #44: index.html link

2. The object overview window provides information about the object including its Object 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 or right click on the Object URL and select an option from the dropdown menu (figure #45 & 46)

Figure #45: Object overview

Figure #45: Object overview

Figure #46: Link preview

3. Finally 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/360s3panos/VA-WA-Local-Kids-Lizard/index.html" width="100%" height="490" frameborder="no" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></IFRAME>