가상 또는 증강 현실 웹 앱에서 작업하는 개발자는 의심할 여지 없이 DeviceOrientationEvent
에 익숙합니다.
처음 시작할 때는 'This End Up: Using Device Orientation'에서 deviceorientation
이벤트 리스너가 기기의 비틀림 및 회전에 응답할 수 있는 방법을 간략하게 설명합니다.
이전 버전의 Chrome에서는 DeviceOrientationEvent
에 포함된 alpha
, beta
, gamma
값이 지구 좌표계를 기준으로 absolute
도로 제공되었습니다. 절대 각도를 제공하려면 기기의 자기계 센서를 사용하여 지구의 자기장을 감지해야 하며, 결과적으로는 측정값을 잃을 수 있는 주변 자기장 변동에 영향을 줄 수 있습니다. 실제로 이렇게 하면 기기 자체가 실제로 움직이지 않음에도 불구하고 근처의 자석으로 인해 웹 앱이 다수의 DeviceOrientationEvent
를 등록할 수 있습니다. 방향 변화 추적에만 관심이 있는 가상 현실 애플리케이션의 경우 이 자기 노이즈는 좋지 않습니다.
변경사항
Chrome 50부터 DeviceOrientationEvent
에 포함된 각도는 기본적으로 더 이상 지구 좌표계를 기준으로 절대값이 아닙니다. 즉, 기기의 가속도계와 자이로스코프의 일부 조합으로 감지되는 실제 움직임이 있을 때만 DeviceOrientationEvent
가 트리거되어야 합니다. 자기계와 자기장 변동으로 인한 거짓 판독은 그림에서 벗어납니다.
그래도 절대 학위가 필요합니다!
실제 세계에 직접 매핑해야 하는 증강 현실 웹 애플리케이션의 일부로서 절대 도를 사용해야 하는 JavaScript를 작성 중이라면 좋지 않을 것입니다. 기기의 자기계에 종속된 이전 동작은 새로운 deviceorientationabsolute
이벤트를 통해 사용할 수 있습니다.
개발자의 관점에서는 기존 DeviceOrientationEvent
과 유사하며 absolute
속성이 true
로 설정되도록 보장합니다.
지원되는 항목 감지
절대적 학위를 선호하는 개발자는 기능 감지를 사용하여 새 DeviceOrientationAbsoluteEvent
이벤트를 지원하는 브라우저를 사용하고 있는지 확인할 수 있습니다.
if ('ondeviceorientationabsolute' in window) {
// We can listen for the new deviceorientationabsolute event.
} else if ('ondeviceorientation' in window) {
// We can still listen for deviceorientation events.
// The `absolute` property of the event tells us whether
// or not the degrees are absolute.
}
브라우저 간 호환성
DeviceOrientationEvent
에 보고된 값이 일관되지 않았습니다.
iOS의 Safari 및 Firefox는 도에 상대 값을 사용하며 이는 Chrome 50에 도입된 구현 변경사항과 일치합니다. 이러한 변경으로 iOS를 염두에 두고 작성된 웹 애플리케이션과의 일관성이 높아집니다.
Firefox (iOS 이외 플랫폼), Edge, Chrome 버전 50 미만은 적절한 센서가 있는 기기에서 실행할 때 DeviceOrientationEvent
의 절댓값을 사용합니다.
이 문서 작성 시점을 기준으로, Chrome 50은 새로운 DeviceOrientationAbsoluteEvent
를 지원하는 첫 번째 브라우저입니다.
DeviceMotionEvent로 고급 방향 추적
Boris Smus에서 DeviceOrientationEvent
사용의 단점과 DeviceMotionEvent
을 사용하여 맞춤형 센서 융합을 구현하는 방법을 자세히 설명하는 자세한 도움말을 제공합니다.
가속도계와 자이로스코프에 대한 하위 수준의 액세스를 제공하며 사용자에게 더 정확한 가상 현실 환경을 제공할 수 있습니다.