Chrome 50에서 기기 방향 변경 예정

제프 포스닉
제프 포스닉

가상 또는 증강 현실 웹 앱에서 작업하는 개발자는 의심할 여지 없이 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을 사용하여 맞춤형 센서 융합을 구현하는 방법을 자세히 설명하는 자세한 도움말을 제공합니다. 가속도계와 자이로스코프에 대한 하위 수준의 액세스를 제공하며 사용자에게 더 정확한 가상 현실 환경을 제공할 수 있습니다.

추가 리소스