# Cropped panorama

Photo Sphere Viewer supports cropped panorama given the appropriate configuration is provided. Cropped panoramas are not covering the whole 360°×180° sphere area but only a smaller portion. For example you might have a image covering 360° horizontally but only 90° vertically, or a semi sphere (180°×180°)

These incomplete panoramas are handled in two ways by Photo Sphere viewer:

  • Read XMP metadata directly from the file
  • Provide the panoData configuration object

Use the Playground at the bottom of this page to find the best values for your panorama.

# Theory

In both case the data contains six important values:

  • Full panorama width
  • Full panorama height
  • Cropped area width
  • Cropped area height
  • Cropped area left
  • Cropped area right

The Full panorama width / Full panorama height ratio must always be 2:1. Cropped area width and Cropped area height are the actual size of your image. Cropped area left and Cropped area right are used to define the cropped area position.

The data can also contains angular values:

  • Pose Heading
  • Pose Pitch
  • Pose Roll

XMP_pano_pixels

More information on Google documentation (opens new window).

# Provide cropping data

# With XMP

If you created your panorama with a mobile phone or dedicated 360° camera, it should already contain the correct XMP data. Otherwise you can inject it yourself with tools like exiftool (opens new window).

The XMP payload is as follow:

<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/">
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <rdf:Description rdf:about="" xmlns:GPano="http://ns.google.com/photos/1.0/panorama/">
      <GPano:ProjectionType>equirectangular</GPano:ProjectionType>
      <GPano:FullPanoWidthPixels>6000</GPano:FullPanoWidthPixels>
      <GPano:FullPanoHeightPixels>3000</GPano:FullPanoHeightPixels>
      <GPano:CroppedAreaImageWidthPixels>4000</GPano:CroppedAreaImageWidthPixels>
      <GPano:CroppedAreaImageHeightPixels>2000</GPano:CroppedAreaImageHeightPixels>
      <GPano:CroppedAreaLeftPixels>1000</GPano:CroppedAreaLeftPixels>
      <GPano:CroppedAreaTopPixels>500</GPano:CroppedAreaTopPixels>
      <GPano:PoseHeadingDegrees>270</GPano:PoseHeadingDegrees>
      <GPano:PosePitchDegrees>0</GPano:PosePitchDegrees>
      <GPano:PoseRollDegrees>0</GPano:PoseRollDegrees>
    </rdf:Description>
  </rdf:RDF>
</x:xmpmeta>
<?xpacket end="r"?>

To write the XMP data to an image file, paste it in a text file and use this command:

exiftool -tagsfromfile data.xmp -all:all panorama.jpg

# Manually

You can also directly pass the values to Photo Sphere Viewer with the panoData parameter.

var viewer = new PhotoSphereViewer.Viewer({
  container: 'viewer',
  panorama: 'path/to/panorama.jpg',
   panoData: {
      fullWidth: 6000,
      fullHeight: 3000,
      croppedWidth: 4000,
      croppedHeight: 2000,
      croppedX: 1000,
      croppedY: 500,
      poseHeading: 270, // 0 to 360
      posePitch: 0, // -90 to 90
      poseRoll: 0, // -180 to 180
  }
});

# Playground

Use this demo to find the best values for your image.

0
90
180
270
360
-90
0
90
-180
-90
0
90
180