WebXR Spec 관련 블로그 번역 (2/2)

1편에 이은 중요 내용 번역

Case Study

XR Mesh Store 참고 : https://xr-store.webxrexperiments.com/

  소스 : https://github.com/MozillaReality/xr-store

각 카테고리에 적합한 인터페이스를 제공하는 사이트를 만드는 것이 하나의 과제이다.

제품을 1. 일반 디스플이에서, 2. VR 화면에서, 3. AR로 사용자 주위 세계에서 볼 수 있도록 제작한 예시가 위의 XR Strore이다.

이미지 : 각 플랫폼마다 다른 사용자 경험을 제공하는 인터페이스를 스케치한 모습과 구현한 모습

Selecting the Best UI for Each Platform

-4가지 타입의 UI

1) Diegetic : UI요소가 3D 세계에 존재

2) Spatial : UI요소가 3D 세계에서 고정된 위치에 존재

3) Non-Diegetic : UI요소가 3D 장면위에 2D로 존재. Heads-Up Display라고도 알려져 있는 UI요소

4) Page : 웹사이트의 DOM안에 있는 2D UI

- 2가지 타입의 UI

1) Anchored (VR exclusive) : spatial과 diegetic의 혼합 버전, 사용자의 시선 또는 상호작용 컨트롤러 위치에 UI가 고정

2) Direct Manipulation (AR exclusive) : 장면과 카메라를 조작하는 대신 터치 스크린을 사용하여 오브젝트를 직접 조작하는 

1. Non-XR / Flat Display

-Non-XR / Flat Disaplys : Page UI 컨트롤, Non-diegetic 전체화면 버튼으로 구성. 웹페이지 기반

===> PC, 모바일, 태블릿

2. XR / AR

-XR / AR : Page컨트롤, AR모드로 전환하는 Diegetic 버튼, AR에서는 Non-Diegetic UI로 제공(제품 속성 선택), Direct Manipulation UI 제공(제품 scale, rotate, move 조절)

===> 모바일, 태블릿

3. XR / VR

-XR / VR : Diegetic UI 상호작용 컨트롤러, Spatial UI로 제품 관련 UI제공, 패널을 찾기 쉽게 Anchored UI로 사용도 가능.

===> PC-VR장비, 모바일 VR

1) 3DoF VR

2) 6DoF VR

Technical Details

aframe XR : https://github.com/mozilla/aframe-xrx => WebXR, A-Frame 연결. WebXR polyfil과 three-xr 기반

three XR : https://github.com/mozilla/three.xr.js

3DoF VR : Chrome Android Daydream, Samsung/Oculus Browser GearVR

6DoF VR : Firefox HTC Vive/Oculus Rift, Edge Windows MR Headset

AR : WebXR Viewer ARklit iOS, WebAROnARCore ARCore Android

2018/4/5 포스팅 글