3.0.0 Change Notes | 한국어

3.0.0 변경 사항

요약

• PanoViewer

  • 비디오 지원(#44)
  • 성능 개선 (#126)
  • 테스트 커버리지 향상(62% -> 92%)
  • 여러 낱장의 큐브맵 이미지 조합 (#127)
  • 다양한 배치의 1x6, 2x3 큐브맵 지원 (#131)
  • 추가적인 자이로 모드 지원 -VR (#137)
  • 문서 임베드 상태에서도 네이티브 스크롤 가능 (#171)
  • 인터페이스 개선
  • 다양한 버그 수정들

• SpinViewer

  • spinTo 메소드 추가 (#140)
  • 인터페이스 통일

1. 비디오 지원

360 video 를 지정하면 360도로 회전가능한 비디오를 보여줄 수 있습니다.

const panoViewer = new PanoViewer(contaier,{
    video: videoElement 혹은 "/path/to/video/video.mp4"
  }
);

2. 성능 개선

• 텍스쳐 로딩 성능 개선 (MacBook Pro 2015, Chrome 63 기준)

jpg 이미지 크기(가로x 세로)	개선 전	개선 후
4096 x 2048	332ms	133ms
8192 x 4096	997ms	538ms

3. 기존 인터페이스 변경 사항

초기화방식 변경 및 resume 메서드 삭제

• 변경 전: 뷰어를 활성화 시키기 위해 resume 을 호출해야함

const panoViewer = new PanoViewer(contaier, {...});
panoViewer.resume();

• 변경 후: PanoViewer 인스턴스 생성 즉시 활성화 됨

const panoViewer = new PanoViewer(contaier, {...});

resume 이벤트 명 ready 로 변경

• 변경전: resume

panoViewer.on("resume", onResumeHandler);

• 변경후: ready

panoViewer.on("ready", onReadyHandler);

suspend 메서드, suspend 이벤트 삭제

• 변경 전: 뷰어를 비활성화 시키기위해 suspend 메서드를 호출하고 resume 메서드로 다시 활성화

/* Inactivate Viewer */
panoViewer.suspend();

/* Reactivate Viewer */
panoViewer.resume();

• 변경 후: 뷰어를 비활성화 시키기위해 destroy 메서드를 호출하고, 다시 필요해지면 새로운 인스턴스를 생성

/* Inactivate Viewer */
panoViewer.destroy();

/* Reactivate Viewer */
panoViewer = new PanoViewer(contaier, {...});

새로운 error 이벤트 타입 추가

rendering context lost 가 발생하여 뷰어가 비활성화 된 경우 발생시키는 에러이벤트 입니다. error.type 값이 15 를 가지는 것으로 판별가능합니다.

panoViewer.on("error", function(e) {
    if (e.type === 15) { // rendering context lost 발생
        // 비활성화 대응 작업 
    }
    // is equivalent with following
    if (e.type === PanoViewer.ERROR_TYPE.RENDERING_CONTEXT_LOST) {
        // 비활성화 대응 작업
    }
});

프로젝션 타입 이름 변경

• 변경전: config.imageType

const panoViewer = new PanoViewer(contaier, {imageType: "equirectangular"});

• 변경후: config.projectionType

const panoViewer = new PanoViewer(contaier, {projectionType: "equirectangular"});

비디오를 지원함에 따라 imageType 은 image 에 제한된 속성이라는 혼돈을 줄 수 있으므로 projectionType 으로 변경

• 근거 자료 (참고)
  • Many methods of projection have been proposed over the centuries
  • A useful method to visually compare different projection types is to use saturation maps.

getImage 의 반환값 변경

• 변경 전: {image, imageType} 속성을 같는 Object

const image = panoViewer.getImage();
// image.image (URL or Image object)
// image.imageType (imageType)

• 변경 후: 이미지 객체

const image = panoViewer.getImage(); //Image Object

사용자가 지정한 이미지 정보를 그대로 반환하는 것은 의미없던 스펙(스펙오류)

• 기존에는 사용자가 URL 을 지정하면 URL 을 반환하고, Image 객체를 전달하면 Image 객체를 반환
• 실제 사용중인 이미지 객체에 대한 정보를 반환하여 접근할 수 있도록 함

사용편의성 강화

• {image, imageType} 형태로 재정의된 객체 정보를 반환함으로써 실제 이미지 정보를 얻기 위해서는 매번 image 객체를 통해 접근해야함
• 특히 imageType 정보는 사용자가 요청한 값으로 굳이 전달해야할 필요성이 없음

getVideo 와의 통일성

• getVideo 를 추가하면서 (내부적으로 생성하거나 사용자가 전달한) 비디오 객체를 반환하는 규격과 결을 맞추어 인터페이스를 변경

setImage 의 파라미터 변경

• 변경 전: {image, imageType} 속성을 같는 Object

panoViewer.setImage({image: "url", imageType: "vertical_cubestrip"});

• 변경 후: image 는 필수 값으로 지정, 옵션으로 proejctionType 을 지정할 수 있도록 변경

panoViewer.setImage("url", {projectionType: "cubemap"});
// or if image type is equirectangular, projectionType can be omitted.
panoViewer.setImage("url");

기존의 불필요성 {image, imageType} 형태의 구조 제거

• getImage 에서 {image, imageType} 대신 Image 객체를 반환함으로써 해당 객체를 사용할 필요성이 없어졌음
• {image, imageType} 형태를 API 에서 사용하려고 했으나 imageType 까지 지정할 필요가 없음

편의성 강화

• 기존에는 매번 image, imageType 을 지정하여 이미지 설정하는 대신 image 만 지정하고 옵셔널하게 imageType 을 지정할 수 있도록 변경