How to - Add a background image in a stereo panorama rendering

A stereo panorama rendering created using A360 rendering can be downloaded as a zip file.

Once you download the zip files and unzip it, you will see the following contents in it:

image.png - The main high resolution image

image.jpg - A lower resolution image for preview

imageL.jpg and imageR.jpg - The left eye and right eye images

pano.html - The html file

twgl-dist.js - Javscript file

readme.txt  - Additional instructions

 

Here are the steps to adding your own custom background

• Open image.png in an image editing software such as Photoshop
• Since this is a png file, it has an alpha mask and you can composite your custom background.
• Once editing is done, save this as a separate file or you could overwrite the original. But the final file has to be named image.png 
• Now you have to generate the left and right eye images and the preview image
  • Crop the top-half of the image and Save As imageL.jpg
  • Crop the bottom-half and Save As imageR.jpg
  • For the preview image, Save imageL.jpg as image.jpg. Reduce the size of this image to 1/8 of the original size. For eg: 9216x1536 will become 768x128 pixels. 
• All your images are now ready. If you want to preview how it looks on your computer, open Firefox browser (Chrome does not let you open local files) and drag pano.html to it. You should see a pixelated preview for a brief moment. After it clears up, you will see the new panorama with your composited background image. Example of the link: file:///C:/Users/xyz/Desktop/stereo_pano/pano.html. You should do this to check if your composite looks fine and if there are any edits required.
• In order to view it in the browser on your mobile device (this is what you really want), all the files in the zip file have to be hosted to your website. They cannot be uploaded back to Autodesk's site, which happens when we generate a URL for your rendered stereo panoramas.

I have uploaded an example here, where the cityscape in the background was composited into the rendered image.: http://aradhanavaidya.com/games/stereo_pano/pano.html?url=image2.

 

Comments

[Katja L]

Once you have saved all the images how does the pano.html update to reflect the new image with the background? I assume you can add people and shadows as well this way.

[Aradhana]

@Katja - After you edit the image with new background or adding people, etc., overwrite it to image.png. That is the image that pano.html is loading.

[Tony]

I've followed the steps down to a T, but when I load the pano into my browser, it's the stock pano gray box. Can't get the images to load back up...

Any thoughts?

[Bob Evans]

How to stand out in a class with no particular efforts to contribute in? ... Easy peasy, lemon squesy) ... Just help from this service: http://ezdissertation.com/