Photo Spheres & Google Cloud Storage

Question

Is it possible to render photo spheres stored in Google Cloud Services? I have uploaded a photo sphere that works without issue when hosting from a local server, but not when stored in a bucket on the Google Cloud Platform (GCP). I am using the image as a sky element in an a-frame scene, but it doesn't render when the source is the GCP url and built in a Google Apps-Script Web App for testing. I also tested the sky element using a photo sphere from Flikr as the source and it had no problems. Does the metadata not get read properly when serving from GCP? Any help would be greatly appreciated!

<a-assets>

    <!-- Images. -->
    <img id="skyTexture" src="https://farm5.staticflickr.com/4734/24508950177_b7b09a1f30_k.jpg">

</a-assets>

<a-sky src="#skyTexture"></a-sky>

<a-assets>

    <!-- Images. -->
    <img id="skyTexture" src="https://storage.googleapis.com/pano-images/cwm-vcfacility/PANO_20171019_130509_0.jpg">

</a-assets>

<a-sky src="#skyTexture"></a-sky>

Answer 1

If you work with images from resource other than your own app, make sure to include crossorigin="anonymous" in your img tag, the error should disappear.

<img id="skyTexture" crossorigin="anonymous" src="https://storage.googleapis.com/pano-images/cwm-vcfacility/PANO_20171019_130509_0.jpg">

It still won't work as you intend though. I don't know much about google storage, but I'd read the docs. If it works similarly to Amazon S3, then you'd have to enable your app to get access to the resource. In S3 it's done with XML rules.

Last tips for working with images:

• make sure they don't exceed 4096 x 2048 size
• make sure the size is power of two

If you don't follow this, it will be resized for you every time on page load - it takes time, so why not do it once.