Customizing Cubemap

Unlike Equirectangular, Cubemap is not standardized. Because of this, Cubemap images provided for each service often have different specifications. Especially, when 6 Cubemap images are integrated into one image, the results are totally different depending on the order of each image and the rotation angle.

Here, the specification includes an image arrangement order, an image rotation, a vertical flip, and a layout.

Let's look at an example that points to different directions in the cube according to the order of the images.

R: Right, L: Left, U: Up, D: Down, F: Front

For the most popular commercial library, krPano, points to the LFRBUD direction (by default) according to the Cubemap image placement order.(https://krpano.com/docu/xml/#image). On the other hand, for Cubemaps used on Facebook, RLUDFB points in the direction. Meanwhile YouTube's EAC (variant of Cubemap) points to the BLFDRU direction.

view360 provides an option (cubemapConfig) to customize Cubemap to support 360 content in these various formats.

cubemapConfig

In cubemapConfig, you can set order and tileConfig setting for each tile(face).

Example

var panoViewer = new eg.view360.PanoViewer(target, {
  cubemapConfig: {
    order: "RLUDFB",
    tileConfig: {
      flipHorizontal: false,
      rotation: 0
    }
  }
});

order

The default value differs depending on [Supportable ProjectionType] ().

1. CUBEMAP: "RLUDBF"
2. CUBESTRIP: "RLUDFB"

Displays the direction or position of the image in the cube with the first letters of the alphabet. (R: Right, L: Left, U: Up, D: Down, F: Front) This alphabet should consist of 6 combinations.

var panoViewer = new eg.view360.PanoViewer(target, {
  projectionType: ProjectionType.CUBEMAP
  cubemapConfig: {
    order: "RLUDFB" // Use RLUDFB instead of RLUDBF which is CUBEMAP's default.
  }
});

tileConfig

default: {flipHorizontal: false, rotation: 0}

Specify the rotation angle and vertical flip for each tile(face).

{
  flipHorizontal: boolean, /* true or false */
  rotation: number /* 0 ~ 360 (degree) */
}

you can use arrays to specify the attributes of six tiles individually. The order of application follows the default placement order within the Cubemap image.

cubemapConfig: {
  tileConfig: [
    {flipHorizontal: false, rotation: 90}, /* 1st tile */
    {flipHorizontal: false, rotation: 90}, /* 2nd tile */
    {flipHorizontal: false, rotation: 90}, /* 3rd tile */
    {flipHorizontal: false, rotation: 90}, /* 4th tile */
    {flipHorizontal: false, rotation: 90}, /* 5th tile */
    {flipHorizontal: false, rotation: 90}  /* 6th tile */
  ]
}

If all tiles have the same settings as above, you can specify only one object as shown below.

cubemapConfig: {
  tileConfig: {flipHorizontal: false, rotation: 90}, /* all tiles */
}