WebVR / WebXR

WebVR

- 사용자가 보유한 VR헤드셋, VR지원 기기를 사용해 웹브라우저에서 3D경험 제공하는 자바스크립트 API

- Legacy : WebVR API 개발은 중단되고 WebXR Device API가 대체되었음. 한 동안은 계속 브라우저가 이 WebVR을 지원.

-WebVR1.1의 여러 이슈들을 개선하여 단순한 구현성, 성능 개선, VR뿐 아니라 AR 및 다양한 확장 사용을 위해 밑에 정리한 WebXR Device API가 고안되었고, 편승됨. (자바스크립트 메인 스레드 의존성이 큼, 설정 난해, common uses like magic window being a side effect rather than an intentional feature (대부분 Magic Window의 용도로 사용함? )

- WebVR API지원 브라우저

-Origin Trial을 통한 Chrome Beta (M 56 이상) ** 하단 참조

-Firefox Nightly (테스트, 개발위한 버전)

-GearVR용 삼성 브라우저

*Chrome은 현재 Android에서 기본 WebVR만 지원(Daydream)

 

- 성능 환경 : 모바일은 60fps, PC에서는 90fps 정도의 목표를 달성해야 함.

- 참고링크 

  Chrome WebVR 개발 상태 모니터링 : https://developers.google.com/web/fundamentals/vr/status/?hl=ko

  WebVR API Mozila Docs : https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API

  WebVR legacy specification for JavaScript API for accessing VR displays : https://immersive-web.github.io/webvr/spec/1.1/

  WebVR GitHub : https://github.com/immersive-web/webvr

  Google Chrome WebVR Docs : https://developers.google.com/web/fundamentals/vr/

*WebVR Browser Support 상황 : https://webvr.rocks/

WebXR

- Immersive Web Community Group의 제품으로 Origin Trial이나 Polyfill로 사용 가능

- 화면 랜더링 자체를 이 API가 관여하지는 않음. 별도 구현 필요( like Three.js )

- WebXR Device API는 VR/AR 하드웨어 장비의 Input, Output 에 접근하도록 제공

- 사용 1) 비디오 : 2D 비디오를 헤드셋에 렌더링하고 머리 움직임에 반응

    2) 3D Model 시각화

기타 등등..

- 기본 App동작 프로세스

1) XR Device 요청

2) Device 사용 가능한 경우 XR Session 요청. 폰이 헤드셋이 된 경우 immersive session이라 불리며 사용자의 gesture가 들어간다.

3) Rendering Loop를 실행하기 위해 Session을 사용 (60fps). 각 프레임마다 해당하는 내용물을 그림

4) Rendering Loop를 실행 (사용자 종료까지)

5) XR Session 종료

- Interaction

"Point and Click" (가르키고, 선택)

=> pointer ray : Input Device가 가리키는 "위치"와 무언가 선택하는 "이벤트"를 감지하기 위해 정의.

 가리키는 곳을 pointer ray가 그리고 보여준다.

 클릭하면 이벤트 발생 : select, selectStart, selectEnd..

- 참고 링크 

  immserive Web : https://developers.google.com/web/updates/2018/05/welcome-to-immersive (내용 참고 링크)

  WebXR Specs : https://immersive-web.github.io/webxr/

  WebXR Explain : https://github.com/immersive-web/webxr/blob/master/explainer.md ----> 내용이 김..

  immersive Web GitHub : https://github.com/immersive-web

  WebXR Sample : 깃헙소스 : https://github.com/immersive-web/webxr-samples

                   샘플 : https://immersive-web.github.io/webxr-samples/

  Chrominium Blog WebXR : https://blog.chromium.org/2018/04/chrome-67-beta-webxr-origin-trial.html

  Mozilla Blog WebXR : https://blog.mozvr.com/progressive-webxr-ar-store/

  

**Chrome에서 WebXR(WebVR)을 사용하기 위해서는 Orign Trial 토큰을 발급 받아서 html페이지의 meta 정보로 입력해주어야 한다 **

발급신청 링크 :

https://docs.google.com/forms/d/e/1FAIpQLSfO0_ptFl8r8G0UFhT0xhV17eabG-erUWBDiKSRDTqEZ_9ULQ/viewform

이곳에서 원하는 Feature 선택 등등 입력하면 메일로 메타정보를 보내줌.

origin trial에 관한 설명 링크 : https://bit.ly/OriginTrials.

예시)

<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2019-01-09" content="***토큰***">

**WebXR(WebVR)은 https 프로토콜로만 정상적으로 작동하니 유의할 것