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 25 November 2020: On November 11th, 2020 Amazon announced the release of the new S3 Console. The change is wide ranging and has a number of significant changes in regard to the interface.

Amazon announcement: https://aws.amazon.com/about-aws/whats-new/2020/11/new-amazon-s3-console-improves-upload-speed-common-tasks-easier-manage-storage/

I’ll be updating the tutorial to reflect these changes. If you would like to be notified of the update send me a note at tony@tonyredhead.com

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;

Project Folder - the files you will be uploading
Login to Amazon S3 - opening the Console
Create your first Bucket - the steps required to name and create your bucket
Set Permissions - configure the bucket to allow web browsing
Upload the Project Files - uploading and setting permissions on your project files
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)

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)

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

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

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

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.

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

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.

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

4. Once you have added the bucket name and region select the Next button to open the Configure options window (figure #10)

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)

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

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

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

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.

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.

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

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

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

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)

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

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

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

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)

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

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)

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

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

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)

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)

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)

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)

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)

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)

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)

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;

Back to Amazon S3 Tutorials

Configure S3 for 360˚ Panoramas - Old