Sharing and Navigating 360 Videos and Maps in Sight Surfers

Sharing and Navigating 360°Videos and Maps in Sight Surfers+ MindTrek. 2012- Gonçalo Noronha, Carlos Álvares, Teresa Chambel/안아주x 2016 Fall

< Why This Paper? >

내 시야에 들어오지 않는 것을 어떻게 알 수 있을까 ?• AR / VR 환경에서 시야에 들어오지 않는 정보에 대한 불안감• 이런 정보를 알려주는 다양한 방법 > 정보의 위치를 알려주는 Circular Beacon, 강제로 보게 하는 SwiVR Chair• 360 Image/Video 를 다룬 논문을 찾아보자 !

Augmented Climbing Wall - Circular Beacon SwiVR Chair - "not missing anything"

< Abstract >

사라지는 시야의 경계 , 넓어지는 정보의 범위• 동영상은 현재를 포착하여 시청자에게 생생한 현장감을 제공• 360° Video 에서는 이전에 고정되어있던 시야의 경계가 사라지고 , 더 압도적인 경험을 제공 • Hypervideo 에서는 사용자가 접할 수 있는 정보의 범위를 다른 매체로 확장 > 360° hypervideo 를 위한 어플리케이션 디자인 , 이에 대한 사용자 평가

Traditional Video Hypervideo360° Video

< Sight Surfers >

사용자의 루트를 업로드하고 공유할 수 있는 플랫폼• 동영상과 이동 경로가 결합된 360° hypervideo 를 위한 웹 어플리케이션• "in other user’s shoes" 과 같은 경험을 제공

< Design>

Georeferenced 360° Video Capture & View• SONY 360 카메라로 촬영 방향에 대한 정보를 담은 360° 영상 제작

> cylindrical 영상으로 컨버팅 후 , screen, mini map 에 출력• 스마트폰 GPS 를 통해 촬영 중 이동 경로에 대한 데이터 수집 > google map 에 경로 표시• 이동과 관련된 메타 데이터 생성 - 속력 , 시간대 , 교통 수단 , 이동 목적 등 > 이후 경로 필터링 및 검색에 활용

Google Map

Mini Map

Screen

All synchronized

< Design >

Navigation & Orientation in the 360° Video• 360° 영상을 보는 사용자에게 , 보고 있는 영상의 위치와 방향 정보를 알려주기 위한 디자인

< Design >

Navigation & Orientation in the 360° VideoDrag Interface + Edge Navigation

• 마우스로 스크린을 드래그 하여 , 좌 / 우로 화면을 회전• 스크린 가장자리에 커서를 놓으면 , 자동으로 천천히 화면이 좌 / 우로 회전

< Design >

Navigation & Orientation in the 360° VideoVideo View Area Compass• 사용자고 보고있는 (screen) 방향을 붉은색으로 표시• 붉은색 부분을 드래그하여 화면 좌 / 우로 회전• 3 가지 모드를 제공

a. Video center UP : 촬영자의 시야를 중심으로b. North UP : 지도와 매칭이 용이함c. Current orientation UP

a

b

c

< Design >

Navigation & Orientation in the 360° Video

Minimap Video• cylindrical 360° 영상을 평면에 , 한눈에 보이도록 축소해서 • 사용자고 보고있는 (screen) 방향을 붉은색 박스로 표시• 붉은색 박스를 드래그하여 화면 좌 / 우로 회전 가능

Video Timeline

< Design >

Geographical Navigation & Orientation in the 360° Video and Maps• 영상의 이동 경로와 관련된 지리적 위치와 방향 정보를 알려주기 위한 디자인

< Design >

Geographical Navigation & Orientation in the 360° Video and Maps• 영상의 이동 경로와 관련된 지리적 위치와 방향 정보를 알려주기 위한 디자인지도내 경로 표시

• 촬영자의 이동 경로를 구글맵에 표시• 현재 보고있는 경로 : 초록색 / 지금까지 본 경로 : 빨간색 / 다른 경로 : 파란색• 경로 선택을 통해 뷰 포인트 변경 가능

View area marker• 현재 뷰 포인트의 경로 내 위치와 ,

사용자가 screen 으로 보고 있는 방향을 표시

• 마우스로 마커를 이동하여 뷰 포인트 변경 가능

< Design >

Navigation & orientation in 360° Hypervideo• 영상에 추가적인 정보를 입히고 , 이 정보를 사용자에게 알려주기 위한 디자인

< Design >

Navigation & orientation in 360° Hypervideo• 영상에 추가적인 정보를 입히고 , 이 정보를 사용자에게 알려주기 위한 디자인

3 types of hyperlinks• Points of Interest (green) : 관심 있는 장소 > 관련 링크로 이동 ex) 레스토랑 , 지하철역

등• Corssing Trajectories (blue) : 다른 비디오의 경로와 겹치는 부분 > 다른 비디오로

이동• Movies (gray) : 영화에 나온 장소 > 해당 영화 클립 재생

< Design >

Navigation & orientation in 360° Hypervideo• 영상에 추가적인 정보를 입히고 , 이 정보를 사용자에게 알려주기 위한 디자인Hotspot Indicator• 뷰 포인트 밖에 있는 요소들을 사용자에게 인식시키기 위한 방법• on the Lateral edges : hotspot 이 있는 위치를 알려주는 indicator 를 스크린 옆에

출력 - hotspot 과 가까워지면 indicator 크기가 커짐

• on the Minimap : 미니맵에 indicator 를 표시

< Design >

Navigation & orientation in 360° Hypervideo• 영상에 추가적인 정보를 입히고 , 이 정보를 사용자에게 알려주기 위한 디자인

Memory Bar• 사용자가 본 영상의 을 하이라이팅해서 보여주는 창• 가로축 : 영상의 시간• 세로축 : 뷰포인트의 방향

ex) 세로로 직선이 그어져 있다면 , 해당 시간에 정지시키고 한바퀴를 다 본 것 .

영상 시작 영상 끝0~359°

< Evaluation >

사용자의 반응을 보기 위한 UI, 기능요소 평가• task-oriented evaluation X observation X semi-structured Interviews• 피험자에게 25 개의 task 를 수행하도록하고 , 각 task 마다 1-5 점 USE 점수를 매김

Navigation & Orientation in the 360° Video

Geographical Navigation & Orientation in the 360° Video and Maps

Navigation & orientation in 360° Hypervideo

- 비디오를 움직여 주변을 둘러보고 , 처음 방향에 위치시켜라 : drag interface / + View Area / +Minimap- View Area Compass 모드를 변경하라 / 각 모드의 의미를 파악하라

- 지도 위의 경로의 3 가지 다른 색이 어떤 의미인지 파악하라 - Praça Luís de Camões 로 이동하라 : 경로 선택으로 / View Area Marker 을 사용하여

- 영화 링크를 찾고 , 실행시켜라 - 메모리바의 의미를 설명해라

- task 예시 -

< Results & Conclusions >

사용자의 선호 및 디자인 개선 포인트 도출1. Minimap 을 통한 방향 조작을 선호

- 전체를 한 눈에 볼 수 있는 뷰를 제공 , 어느 방향으로 가야할지 파악하기 쉬움2. North UP Compass 모드를 선호

- 우측에 보이는 지도와 같은 방향 -> 회전 방향 파악이 용이

5. ? - Compass 모드의 존재 , Memory Bar 의 의미 / 용도

4. 링크 아이콘의 차이를 더 명확하게- 영화 링크의 경우 clapboard 를 사용하는 등

3. 비디오 스크린과 google map 부분의 크기 조절- 메인 컨텐츠인 비디오에 더 집중할 수 있도록 비디오 스크린 확대

Global Evaluation: (U)seful; (S)atisfactory; (F)un to use;(E)asy to Use; (EU) Easy to Understand; (UA) Use Again

< Discussion >

내 시야에 들어오지 않는 것을 어떻게 알 수 있을까 ?

1. Spherical 영상의 경우에 mini map 을 대신할 효과적인 방법- 좌 / 우 뿐만이 아니라 위 / 아래에 시선을 둘 수 있는 shperical 형태의 비디오의 경우에도 직사각형의 minimap 이 도움이 될까 ?

2. 모든 정보를 다 알려주는 것이 과연 사용자에게 효과적일까 ?

- 정보를 놓치는 것에 대한 불안감과 동시에 , 너무 많은 정보를 다 보지 못하는 것에 대한 부담감

감사합니다 .