1. 소개
가상현실(VR) 및 증강현실(AR) 애플리케이션을 지원하는 하드웨어가 이제 소비자에게 널리 제공되고 있으며, 몰입형 컴퓨팅 플랫폼으로서 새로운 기회와 과제를 동시에 제시합니다. 몰입형 하드웨어와 직접 상호작용할 수 있는 능력은 웹이 이러한 환경에서 일급 시민으로 제대로 작동할 수 있도록 하는 데 매우 중요합니다. WebXR 증강현실 모듈은 AR 하드웨어에서 코드가 실행될 때 개발자에게 제공되는 기능을 확장합니다.
1.1. 용어
증강현실은 가상 콘텐츠가 현실 세계 환경과 정렬 및 합성되어 사용자에게 표시되는 XR 경험의 일종을 나타냅니다.XR 하드웨어는 디스플레이 기술에 따라 가산광, 패스스루, 불투명 등으로 분류할 수 있습니다.
가산광(additive light) 디스플레이 기술을 갖춘 장치는 시스루(see-through)라고도 하며, 투명 광학 디스플레이를 사용하여 가상 콘텐츠를 표시합니다. 이런 장치에서는 사용자가 세션 생성 시 개발자 요청과 관계없이 항상 현실 세계 환경을 볼 수 있습니다.
참고: 이러한 장치는 일반적으로 소프트웨어에서 합성을 수행하지 않고, 투명 디스플레이가 제공하는 자연스러운 합성에 의존합니다.
패스스루(pass-through) 디스플레이 기술이 적용된 장치는 불투명 디스플레이를 사용하여 가상 콘텐츠와 현실 세계 환경의 카메라 스트림을 합성합니다. 이러한 장치에서는 현실 세계 환경이 세션 생성 시 개발자가 명시적으로 요청했을 경우에만 표시됩니다.
참고: 이러한 장치는 일반적으로 카메라로 현실 세계 이미지를 수집하고, 해당 이미지와 AR 장면을 소프트웨어에서 합성하여 사용자에게 표시합니다.
불투명(opaque) 디스플레이 기술을 갖춘 장치는 현실 세계 환경을 완전히 가리며, 현실 세계 환경을 볼 수 있는 방법을 제공하지 않습니다.
참고: 이러한 장치는 일반적으로 VR 장치로서 "immersive-ar"
세션을 허용하여 VR 환경에서 AR 콘텐츠와의 호환 경로를 제공합니다.
2. WebXR 디바이스 API 통합
2.1. XRSessionMode
WebXR 디바이스 API는 XRSession을
XRSessionMode별로
분류합니다.
이 모듈은 "immersive-ar"
XRSessionMode
열거형의 사용을 지원합니다.
"immersive-ar" 세션 모드는 세션 출력이 독점적 접근권을 획득하여 몰입형 XR 장치의
디스플레이로 전달되고 콘텐츠가 혼합(blended)되어 현실 세계 환경과 합성됨을 의미합니다.
호환 가능한 하드웨어에서는 UA가 "immersive-vr"
세션, "immersive-ar"
세션 또는 둘 다 지원할 수 있습니다. "immersive-ar"
세션 모드를 지원한다고 해서 UA에 "inline"
세션 지원 요구가 바뀌는 것은 아닙니다.
참고: 즉, "immersive-ar"
세션은 "immersive-vr"
세션이 지원하는 모든 기능 및 참조 공간(reference space)를 지원하며, 둘 다 몰입형 세션이기 때문임을
의미합니다.
"immersive-ar"
세션 지원 여부를 검사합니다.
navigator.xr.isSessionSupported('immersive-ar').then(supported => {
if (!supported) { return; }
// 'immersive-ar' 세션이 지원됩니다.
// 페이지는 사용자에게 AR 지원을 안내해야 합니다.
}
"immersive-ar"
XRSession
을 가져옵니다.
let xrSession;
navigator.xr.requestSession("immersive-ar").then(session => {
xrSession = session;
});
2.2. XREnvironmentBlendMode
XR 콘텐츠를 렌더링할 때, XR 합성기가 현실 세계 환경과 렌더된 픽셀이 어떻게 혼합되는지 파악하는 것이 유용합니다.enum {XREnvironmentBlendMode "opaque" ,"alpha-blend" ,"additive" };partial interface XRSession { // Attributesreadonly attribute XREnvironmentBlendMode environmentBlendMode ; };
environmentBlendMode 속성은 XREnvironmentBlendMode
값 중 현재 혼합 방식과 일치하는 값을 반드시
보고해야 하며, 이는 XR 합성기가 수행 중인 방식입니다.
-
alpha-blend혼합 모드는 XR 합성기가 알파 혼합 환경 혼합을 사용할 때 반드시 보고되어야 합니다.
2.3. XRInteractionMode
애플리케이션이 사용자가 상호작용할 수 있는 UI를 그려야 할 때가 있습니다. WebXR은 핸드헬드폰 AR과 헤드셋 AR 등 다양한 폼팩터를 지원합니다. 각 폼팩터에 따라 UI가 위치하는 공간도 달라져야 하며, 예를 들어 폰 AR에서는 UI가 화면에 직접 표시될 수 있고, 헤드셋 AR에서는 사용자가 컨트롤러로 상호작용할 수 있도록 UI가 머리에서 약간 떨어진 위치에 표시될 수 있습니다.
enum {XRInteractionMode ,"screen-space" , };"world-space" partial interface XRSession { // Attributesreadonly attribute XRInteractionMode interactionMode ; };
interactionMode 속성은 현재 세션에서 애플리케이션이 상호작용형 UI를 그려야
할 최적 공간(UA 기준)을 기술합니다.
-
interactionMode값이"screen-space"이면 UI는 화면에 직접 투영 없이 그려져야 합니다. 이 시나리오에서는select이벤트가inputSource가targetRayMode값이"screen"인 경우에 주로 트리거됩니다. -
interactionMode값이"world-space"이면 UI는 사용자로부터 약간 떨어져 세상 안에 그려져야 하며, 사용자는 컨트롤러로 상호작용할 수 있습니다. 이 시나리오에서는select이벤트가inputSource가targetRayMode값이"tracked-pointer"또는"gaze"인 경우에 트리거됩니다.
참고: WebXR DOM Overlays 모듈이 지원된다면 이 시나리오 중 일부에서 활용될 수 있습니다.
2.4. XR 합성기 동작
XR 장치로 콘텐츠를 표시할 때, XR 합성기는 혼합 방식(blend technique)을 적용하여 가상 픽셀을 현실 세계 환경과 결합해야 합니다. 적합한 기법은 XR 장치의 디스플레이 기술 및 모드에 따라 결정됩니다.
-
불투명 환경 혼합 시, XR 합성기에서 얻은 렌더 버퍼는 100% 불투명한 검은색 픽셀만 포함된 버퍼 위에 source-over 혼합으로 합성됩니다. 최종적으로 합성된 결과는 XR 장치에 표시됩니다. 이 기법은 불투명 및 패스스루 디스플레이에서 모드가
"immersive-vr"또는"inline"인 경우 반드시 적용되어야 합니다. 단, 모드가"immersive-ar"인 경우에는 디스플레이 기술과 관계없이 적용하지 않아야 합니다. -
알파 혼합 환경 혼합 시, XR 합성기에서 얻은 렌더 버퍼는 현실 세계 환경의 픽셀 표현을 포함한 버퍼 위에 source-over 혼합으로 합성됩니다. 각
XRFrame마다 뷰의transform에 맞춰 정렬해야 합니다. 최종적으로 합성된 결과는 XR 장치에 표시됩니다. 이 기법은 패스스루 디스플레이에서 모드가"immersive-ar"인 경우 반드시 적용되어야 합니다. 단, 모드가"immersive-vr"또는"inline"인 경우에는 디스플레이 기술과 관계없이 적용되지 않아야 합니다. -
가산 환경 혼합 시, XR 합성기에서 얻은 렌더 버퍼는 lighter 혼합으로 합성되어 XR 장치에 표시됩니다. 이 기법은 모든 가산광 디스플레이에서 모드와 관계없이 반드시 적용되어야 합니다.
참고: 알파 혼합 환경 혼합을
사용하는 장치에서 알파 채널이 없는 baseLayer를
사용하면 현실 세계
환경이 완전히 가려지게 됩니다. 이는 개발자 의도라 간주하며, UA는 해당 경우 현실 세계 환경 합성을 중단하여 최적화를 할 수 있습니다.
XR 합성기는 경험 최적화를 위해 추가적인 색상이나 픽셀 조정을 할 수 있습니다. 합성 타이밍은 혼합 방식이나 현실 세계 환경의 출처에 따라 달라져서는 안 되며, 실제 세계 기하에 대한 픽셀 깊이에 의한 오클루전을 수행해서는 안 됩니다. 오로지 렌더 콘텐츠만 현실 배경 위에 합성되어야 합니다.
참고: 향후 모듈에서는 현실 세계 환경과의 자동 또는 수동 픽셀 오클루전이 가능할 수도 있습니다.
XR 합성기는 페이지에 카메라 내재 정보, 미디어 스트림, 현실 세계 기하 등의 추가 정보를 자동으로 제공해서는 안 됩니다.
참고: 개발자는 XR 장치의 카메라에 대해 Media
Capture and Streams 명세를 사용하여 요청할 수 있습니다. 다만, 이렇게 해도 해당 카메라 위치와 네이티브 원점 간의 XRRigidTransform을
질의하는 기능은 제공되지 않으며, 현실 세계 환경 뷰와 일치시키는 데 필요한 카메라 내재 정보를 보장된 방식으로 얻는 방법도 없습니다. 때문에
효과적인 컴퓨터 비전 알고리즘 수행이 크게 제약될 수 있습니다. 향후 모듈이나 명세에서 해당 기능이 제공될 수 있습니다.
2.5. 일인칭 관찰자 뷰
많은 AR 장치에는 카메라가 있지만, 이 카메라는 일반적으로 눈과 정렬되어 있지 않습니다. 세션을 비디오 캡처하여 스트리밍하거나 파일로 저장할 때, 카메라 피드를 렌더링된 눈 피드 중 하나와
단순히 합성하는 것은 내부 오프셋이 존재하므로 최적의 방법이 아닙니다. 장치에 따라 재투영이나 기타 기법을 사용해서 스트림을 보정할 수 있지만, 일부는 보조 뷰인
일인칭 관찰자 뷰를
노출할 수 있으며, 이 뷰의 eye 속성은 "none"입니다.
사이트 컨텐츠는 반드시 "secondary-views" 기능 서술자를 활성화하여 일인칭 관찰자 뷰 수신을 명시적으로 선택(opt-in)해야 합니다.
세션에서 "secondary-views" 기능을 활성화했다고 해서, 일인칭 관찰자 뷰가 모든 프레임에서 조건
없이 항상 제공되는 것은 아니며, 캡처가 진행 중일 때만 해당 프레임의 views
배열에 포함되어 노출됩니다.
XRSession
에서 environmentBlendMode로
노출된 혼합 방식이 있더라도,
일인칭 관찰자
뷰에서는 항상 알파 혼합 환경 혼합을 사용합니다.
사이트 컨텐츠는 어떤 뷰가 일인칭 관찰자 뷰인지 판단하여 각기 다른 혼합 방식에 대응하거나, UI 요소를 다르게 렌더링할 수 있습니다.XRView
객체 중 일인칭
관찰자 뷰에 해당하는 객체는 isFirstPersonObserver
속성이 true를 반환합니다.
partial interface XRView {readonly attribute boolean ; };isFirstPersonObserver
-
requestSession()호출 시 `"secondary-views"`를 선택적 기능으로 포함 -
views전체를 반복(iterate) 처리하며, 처음 두 개/세 개만 직접 접근하지 않음
let session= await navigator. xr. requestSession( "immersive-ar" , { optionalFeatures: [ "secondary-views" ]}); let space= await session. requestReferenceSpace( "local" ); // 기타 초기 설정 let gl= /* 그래픽 컨텍스트 획득 */ ; session. requestAnimationFrame( function ( frame) { let views= frame. getViewerPose( space); // 꼭 `view of views` 반복문을 사용해야 하며, // 처음 두~세 개 요소만 직접 접근하면 안 됨 for ( viewof views) { render( session, gl, view); } }); function render( session, gl, view) { // 해당 뷰에 컨텐츠 렌더링 // 필요하다면 view.isFirstPersonObserver를 사용해 합성 정보 등 구분 가능 }
3. 프라이버시 및 보안 고려사항
AR 모듈의 구현에서는 카메라 이미지를 컨텐츠에 노출해서는 안 되며, 현실 세계와의 모든 합성은 반드시 XR 합성기를 통해 자체적으로 처리해야 합니다. 이 모듈의 추가 확장은 현실 세계 정보(예: 카메라 원시 이미지, 조명 추정 등)를 노출할 수 있으나 반드시 사용자 동의를 필요로 하는 별도의 기능 서술자로 동작을 제한해야 합니다.
확장 대상인 WebXR 디바이스 API와 비교 시, AR 모듈은 environmentBlendMode
및 interactionMode
속성을 통해 실행 중인 장치의 성격에 대한 추가 세부 정보를 제공합니다.
웹사이트는 "immersive-ar"
XR 세션을 시작할 수 있으며,
XR 장면 뒤에 현실 세계가 합성됩니다.
이 모듈이 웹사이트에 카메라 이미지를 접근시키지 않더라도, 최종 사용자에게는 이 사실이 명확하지 않을 수 있으므로 UA가 이를 명확히 안내해야 합니다.
변경 사항
2019년 10월 10일 첫 공개 워킹드래프트에서의 변경 사항
-
프라이버시 및 보안 고려사항 추가 (GitHub #49, GitHub #63)
-
용어 설명 명확화 (GitHub #63)
-
일인칭 관찰자 뷰 추가 (GitHub #57)
-
XRInteractionSpace를 XRInteractionMode로 이름 변경 (GitHub #52)
-
XRInteractionSpace 추가 (GitHub #50)
4. 감사의 글
다음 인물이 WebXR 디바이스 API 설계에 기여했습니다:
그리고 이 모든 여정을 시작해 준 Vladimir Vukicevic (Unity)에게 특별히 감사 드립니다!