Customizing Cubemap | 한국어

Equirectangular 와 다르게 Cubemap 은 표준화가 되어 있지 않습니다. 이로인해 각 서비스 별로 제공하는 Cubemap 이미지의 규격이 다른 경우가 많습니다. 특히 6장의 Cubemap 이미지를 한 장의 이미지에 통합하여 사용하는 경우 각 이미지의 배치 순서에 따른 방향, 회전 각도에 따라 전혀 다른 결과를 나타냅니다.

여기서 규격은 이미지의 배치 순서, 이미지 회전, 상하플립 여부, layout 등이 있습니다.

이미지 순서에 따라 Cube 에서의 서로 다른 방향을 가리키는 예를 살펴보겠습니다.

R: Right, L:Left, U: Up, D: Down, F: Front, B: Back 라고 했을때,

가장 유명한 상용 라이브러리인 krPano 의 경우, Cubemap 이미지 배치 순서에 따라 (기본적으로) LFRBUD 방향을 가리킵니다.(https://krpano.com/docu/xml/#image) 반면, Facebook 에서 사용된 Cubemap 의 경우 RLUDFB 방향을 가리킵니다. 한편 YouTube 의 EAC(Cubemap 의 변형)는 BLFDRU 방향을 가리킵니다.

view360 은 이러한 다양한 포맷의 360 컨텐츠를 지원하기 위해 Cubemap 을 커스터마이징할 수 있는 옵션(cubemapConfig)을 제공합니다.

cubemapConfig

cubemapConfig 에서는 order 와 각 타일별 설정인 tileConfig 를 설정할 수 있습니다.

예제

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

order

지원 가능한 ProjectionType 에 따라 기본값이 다릅니다.

1. CUBEMAP 인 경우: "RLUDBF"
2. CUBESTRIP 인 경우: "RLUDFB"

알파벳 첫글자(R: Right, L:Left, U: Up, D: Down, F: Front, B: Back)로 Cube 에서의 이미지 방향 혹은 위치를 나타냅니다. 이 알파벳 6개의 조합으로 구성되어야 합니다.

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

tileConfig

기본값: {flipHorizontal: false, rotation: 0}

각 타일 별 회전 각도와 상하 플립 여부를 지정합니다.

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

배열을 이용해 6개의 타일의 속성을 개별적으로 지정할 수 있습니다. 적용 순서는 Cubemap 이미지 내의 기본적인 배치 순서를 따릅니다.

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 */
  ]
}

만약 위와 같이 모든 타일의 설정이 동일하다면, 아래와 같이 하나의 Object 만 지정할 수 있습니다.

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