0

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>

Jason Neal
  • 3
  • 2
  • 1
    Please provide some code. How do you load the photo. Is it in `a-assets`. Are there any console errors? – Tomasz Bubała Jan 05 '18 at 17:10
  • Thanks for your quick response Tomasz. I added the code for both of the scenarios I was testing to the original comment. The top html sources a random equirectangular photo hosted on Flikr that renders without issue. The bottom html has the equirectangular image I am trying to source from GCP. I neglected to look for console errors before since the Flikr image worked, but, yes, there is an error blocking access to the image due to a CORS policy. I'll research that error a bit, but feel free to provide input if you would like. – Jason Neal Jan 06 '18 at 21:06

1 Answers1

0

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.

Tomasz Bubała
  • 2,093
  • 1
  • 11
  • 18