"PhotoSphereViewer: invalid XMP data" and "WebGL: INVALID_VALUE: texImage2D: bad image data"

Question

I'm using Photo Sphere Viewer to display a panoramic photo like facebook does and am having some issues.

Here's my code:

Here's my code:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css">
<div id="photosphere"></div>
<script>
new PhotoSphereViewer.Viewer({
  panorama: 'https://terrafrost.sfo2.digitaloceanspaces.com/20200618_131549.jpg',
  container: 'photosphere',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: 'https://terrafrost.sfo2.cdn.digitaloceanspaces.com/photosphere-logo.gif',
  defaultLat: 0.3,
  touchmoveTwoFingers: true,
  mousewheelCtrlKey: true,
});
</script>

When I run this code I get to errors in the JS console:

• PhotoSphereViewer: invalid XMP data (from psv.js:11)
• WebGL: INVALID_VALUE: texImage2D: bad image data (from three.min.js:130)

Any ideas as to what I'm doing wrong or what I need to be doing?

Thanks!

Answer 1

Your panorama file is not public so I cannot give a full answer. But what the error says it that the embedded XMP data are incoherent. You can disable XMP parsing with useXmpData: false option.

More details on XMP data are available here https://photo-sphere-viewer.js.org/guide/cropped-panorama.html