Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to 밑바닥부터시작하는360뷰어
Similar to 밑바닥부터시작하는360뷰어 (20)
More from NAVER D2
More from NAVER D2 (20)
밑바닥부터시작하는360뷰어
- 2. Overview 1. 왜 360 뷰어 2. 모션 센서 처리의 두 가지 문제 3. 네 가지 인터렉션 Fail 4. 모션 외 입력 처리
- 3. 1. 왜 360 뷰어
- 4. 360 뷰어의 이점
- 5. 360 뷰어의 이점: 현장감
- 6. 경험공유의 진화 아이유실물대박! 텍스트 이미지 동영상 360 이미지 360 영상
- 7. 360 미디어를 적용한 서비스들 • 지도 • 부동산 • 메신저(라인)
- 8. 360 미디어를 적용한 서비스들 • 블로그 • 포스트
- 9. 360 미디어를 적용한 서비스들 • 방송 플랫폼
- 10. 컨텐츠 생산 충분할까? 영상의 경우 360 동영상 컨텐츠는 일반사용자가 만들기 쉽지 않다. 모든방향을 동시에 촬영해야하기 때문에 전용 카메라 촬영 & 편집 스킬 필요 용량대비 저해상도 컨텐츠 생산 가능 한 사람 이 적다
- 11. 컨텐츠 생산 충분할까? 사진의 경우 스마트폰 촬영 가능 촬영 스킬 필요 없음 고해상도 컨텐츠 제공이 용이 기본 카메라앱으로 촬영한 파노라마도 활용가능
- 12. 파노라마를 360뷰어에 사용하는 법 구의 표면이미지를 사각 평면으로 나타낸 형태 Equirectangular (360 이미지 표준 포멧)
- 13. 파노라마를 360뷰어에 사용하는 법 360° 180°
- 14. 파노라마 촬영 영역 60° 카메라 기종마다 정해진 고유 값
- 15. 파노라마 촬영 영역 계산 60° 카메라 기종마다 정해진 고유 값 5376 px * 1536 px Field of view per pixel 이 동일하므로 가로화각 = 60 * 5376 / 1536 = 210 210°
- 17. 좌우가 이어지는 파노라마 60° 360° 촬영 가능앱: google cardboard camera, facebook app
- 19. 2. 모션 센서 처리의 두 가지 문제
- 20. 360 뷰어의 기본 구조 키보드 터치 마우스 기울임 카메라의 방향과 줌 배율을 조정다양한 사용자 입력을 받아
- 21. 360 뷰어의 기본 구조 키보드 터치 마우스 기울임 😗
- 22. 오일러각 짐벌락 쿼터니언 센서 퓨전 상보 필터 칼만 필터 LERP SLERP … 😓이렇게 어려울 줄은 몰랐습니다…
- 23. 기기 움직임을 감지하는 센서 기기 X Y Z 축 가속도 값 제공 기기 X Y Z 축 회전축 각 속도 값 제공 절대방위 제공 시 값을 사용 자이로센서 가속도센서 지자계센서
- 24. 기기 자세를 알아낼 수 있는 센서 자이로센서 가속도센서 3 Dof 3 Dof 둘 중 하나만으로도 기기 자세를 알아낼 수 있음
- 25. 각 센서의 장단점 자이로센서 가속도센서 빠른움직임에서 노이즈가 심하지만 안정된 상태에서 오차없음 빠른움직임에서 노이즈 낮고 정확한 값 수치적분오류가 누적되면서 오차발생
- 26. 각 센서의 장단점 자이로센서 가속도센서 장단점이 있기 때문에 두 센서의 값을 Fusion 해서 사용합니다.
- 27. 센서퓨전 값을 제공하는 하이레벨 API DeviceOrientation Event
- 28. 제공 값: 오일러 각 순차적으로 alpha beta gamma 회전을 적용
- 29. 센서의 값을 별도로 제공하는 로우 레벨 API DeviceMotion Event 자이로센서 가속도센서 {alpha, beta, gamma} rotation rate {x, y, z} acceleration (중력 포함) 60Hz
- 30. 멈춰있음 60Hz 0Hz DeviceOrientation 발생빈도 천천히 움직임 60Hz 0~60Hz 빨리 움직임 60Hz 60Hz iOS Android 화면 주사율(60Hz)보다 낮으므로 프레임 드롭 유발
- 31. 문제1 지자계 센서값이 포함 주변에 전자기기나 자성을 띠는 물체로 인해 지자계 센서 신호에 교란이 발생 DeviceOrientation Event
- 32. [구글 스트리트 뷰 자석 휭휭]
- 33. 걱정마세요 최신 크롬 이나 iOS 는 관계없습니다.
- 34. 2015-09
- 35. 2016-03
- 36. 문제1 지자계 센서값이 포함: 해당 디바이스 안드로이드 크롬 50 미만(2016년 3월 릴리즈) 삼성 인터넷 4 이하(갤럭시 S6) DeviceOrientation Event
- 37. 로우레벨 API DeviceMotion Event 자이로센서 가속도센서 두 센서의 값을 모두 활용해서 최적의 값으로 보정하는 작업을 직접 해야함 😂
- 38. inertial measurement unit, IMU Kalman Filter 성능은 최고, 연산비용, 구현 복잡 Complementary Filter 성능 나쁘지 않음, 구현 쉬움 센서값을 조합하는 필터 알고리즘
- 39. Complementary Filter 적용 자이로센서 가속도센서 {alpha1, beta1, gamma1} {alpha2, beta2, gamma2}Linear interpolation 오일러각 오일러각 (1-k) * (alpha1) + (k) * alpha2k = 0 k = 1
- 41. 오일러각을 Quaternion으로 바꿔사용 {alpha, beta, gamma} {w, x, y, z} 각 원소의 숫자를 linear 하게 보간하였을때 구선형보간(SLERP)이 가능.
- 43. 문제2 자이로센서 영점보정이 잘 안되어있다 안드로이드 디바이스 별 편차 존재
- 44. Examples
- 45. 해결책1 하드웨어 진단 모드로 진입하여 직접 센서 영점보정을 수행하도록 안내한다. 😧 해결책2 뷰어에서 영점보정을 수행한다. ❤ “가만히 있는데도 화면이 계속 돌아가요”
- 46. Examples기기가 멈춰있음을 감지 자체 영점보정 프로세스 이후 자이로 센서신호에 보정값을 적용 자이로 센서 값을 영점보정값으로 저장 DeviceOrientation 이벤트에 타이머 설정 멈춰있을때만 콜백이 실행
- 47. DeviceOrientation DeviceMotion 자이로센서 가속도센서자이로 보정 값 to쿼터니언 to쿼터니언 to쿼터니언 자이로 Q 가속도 Q Complementary Filter 상보필터 자이로 drift가 보정된 기기 자세 쿼터니언 가만히 있다!
- 48. 문제1. 지자계 센서값이 포함 ü 센서별 값을 주는 devicemotion 이벤트 사용 문제2. 자이로센서 영점 보정 ü Deviceorientation 에 타이머를 걸어서 자체 보정 로직을 구현 요약
- 49. 3. 네 가지 인터렉션 Fail
- 50. 카메라의 회전 방향 Yaw Pitch Roll
- 51. 카메라의 회전 방향 Yaw
- 52. 카메라의 회전 방향 Pitch
- 53. 카메라의 회전 방향 Roll
- 54. 가장 간단한 방법: 그대로 대입 Cardboard View, VrView goo.gl/jHfYTN VrView Example
- 57. 방법1 그대로 대입 문제1. 옆으로 누우면 지평선이 세로로 펼쳐진다.
- 58. 방법1 그대로 대입 문제2. 테이블 위에서 초기로딩시 항상 바닥이 보인다. 매번 날 들어올려야 얼짱각도 샷 을 볼수 있지;;
- 59. 1차 개선: Roll 빼고 대입 Youtube 360 자세 변경시 Yaw, Pitch, Roll 를 추출 카메라 방향에 Roll 을 빼고 적용 문제1 해결
- 60. 문제1 해결 그대로 대입한 경우 vrview Roll을 변경하지 않는 경우 Youtube 360 (iOS)
- 61. 방법2: Roll 빼고 대입 문제3. 옆으로 누우면 기기기울임이 틀리게 동작한다
- 62. 2차 개선: 기기 축 상대회전 적용 모바일 웹 Street View 자세 변경시 매번 직전 기기 축을 기준으로 Delta Yaw, Pitch, Roll 를 추출 카메라는 항상 정면을 보도록 초기화 지축 말고 기기축 goo.gl/dY6Gcu Street view
- 63. 문제2 해결 문제3 해결
- 64. 방법3: 기기 축 상대회전 적용 문제4. 기울여서 몸주위로 돌리면 카메라 Yaw가 덜 돌아간다. 180도 회전 시켜도 뷰어의 카메라는 그에 못 미치는 Yaw 각의 변화가 생기는 현상
- 65. 지면에 수직으로 세운 경우 지면에 비스듬히 세운 경우
- 66. 3차 개선: 기기기준 Roll 을 활용 네이버 view360, facebook 몸 주위로 기기를 회전 회전축은 지면벡터 기기를 지면에 수직으로 했을 때 기기를 지면에 비스듬히 했을 때 모든 회전이 Yaw 에 반영 회전이 Yaw 와 Roll 로 분산 Yaw 축 Roll 축 Roll 축 Yaw 축 지축 지축
- 67. 3차 개선: 기기기준 Roll 을 활용 네이버 view360, facebook 기기가 기울어진 만큼 Roll 회전을 카메라 Yaw에 추가반영 기기 Yaw 축 기기 Roll 축 지축
- 68. 최종 결과물: 네이버 블로그 적용 예 goo.gl/3vsUUf
- 70. 스마트에디터 팀 포토인프라 팀 덕분에 서비스 적용이 가능했습니다 ㅠ 🙏
- 71. 4. 모션 외 입력 처리
- 72. 사용자 입력의 종류 • 카메라 Yaw, Pitch 조작 • 터치 Pan 제스춰 • 마우스 Drag 제스춰 • 키보드 이동 키 • 카메라 Zoom 조작 • 터치 Pinch 제스춰 • 마우스 Wheel
- 73. 핀치 제스춰 인풋 이동키 인풋 yaw pitch fov 마우스 휠 인풋 팬 제스춰 인풋 모션 인풋 인풋 플러그인 축 정의 값 범위 순환여부 바운스 영역 change UI
- 74. eg.Axes
- 75. eg.Axes 1. 키보드, 핀치, 휠, 적용해서 UI 컨트롤을 손쉽게 하기위한 라이브러리 2. N 차원 축 정의 3. 축 별 옵션 별도 지정 (숫자 구간, 순환 여부, 바운스 영역 설정) 4. 값 애니메이팅 5. 축별 사용자 입력 서드파티 바인딩 API 제공 6. 빌트 인 인풋 타입만으로도 유용
- 78. WebGL 적용 팁3
- 79. 1. CSS 3D 가 더 나은경우 • 서비스에 embed 되지 않는 경우 • 큐브맵 이미지만 사용해도 되는 경우 • 다양한 렌더링 모드를 제공하지 않아도 되는 경우 2. WebGL context 활성갯수 제한 3. 이미지 리소스 CORS 필수
- 80. Future Plan
- 81. 1. 오픈소스 공개 • View360 (naver/egjs-view360) • Axes (naver/egjs-axes) naver.github.io/egjs/
- 82. 2. 추가예정 기능 • Little planet 렌더링 • Light weight virtual tour • 360 동영상
- 83. Thank you