JavaScript를 사용한 WebXR 개발
Important
WebVR 은 더 이상 사용되지 않으며 현재 브라우저에서 사용할 수 없으므로 새 개발에 사용하면 안 됩니다. 기존 WebVR 구현을 WebXR로 마이그레이션해야 합니다.
WebXR 은 계속 사용할 수 있습니다. 그러나 WebXR에 대한 지원은 중단되며(버그 수정, 콘텐츠 업데이트 또는 기술 지원 없음) 따라서 애플리케이션이 장기간 계속 작동하도록 보장할 수 없습니다.
JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어 중 하나입니다. 간단하고 가볍고 웹에서 널리 사용됩니다. JavaScript 및 웹 기술의 기능을 적용하여 더 매력적인 Mixed Reality 환경을 만듭니다.
웹의 Mixed Reality 애플리케이션
혼합 현실 기능은 WebXR을 통해 웹에서 사용할 수 있습니다. 더 이상 소프트웨어 또는 플러그 인을 설치하지 않고 호환되는 WebXR 지원 브라우저에서 VR(가상 현실) 및 AR(증강 현실) 콘텐츠를 볼 수 있습니다. HoloLens 2와 같은 물리적 디바이스에서 동일한 브라우저를 사용할 수 있습니다.
WebXR 디바이스 API는 웹에서 센서 및 헤드 탑재 디스플레이를 포함한 가상 현실(VR) 및 증강 현실(AR) 디바이스에 액세스하기 위한 것입니다. WebXR 디바이스 API는 Microsoft Edge 및 Chrome 버전 79에서 사용할 수 있으며, 이후 버전에서는 WebXR을 기본값으로 지원합니다. caniuse.com WebXR에 대한 최신 브라우저 지원 상태를 확인할 수 있습니다.
| WebXR 기능 | 가용성 |
|---|---|
| WebXR 디바이스 API(w3.org) | Windows 데스크톱의 Edge 81 HoloLens 2의 Edge 91 |
| WebXR 증강 현실 모듈 - 수준 1(w3.org) | Edge 91. HoloLens 2 전용 |
| WebXR 손 입력 모듈 - 수준 1(w3.org) | Edge 93. HoloLens 2 전용 |
| WebXR Anchors 모듈(immersive-web.github.io) | Edge 93. HoloLens 2 전용 |
| WebXR 적중 테스트 모듈(immersive-web.github.io) | Edge 93. HoloLens 2 전용 |
WebXR 보기
새 Microsoft Edge 및 Firefox Reality 브라우저를 사용하여 Windows Mixed Reality에서 WebXR 환경을 볼 수 있습니다. 브라우저에서 WebXR을 지원하는지 테스트하려면 브라우저에서 WebXR 샘플로 이동할 수 있습니다.
몰입형 웹 환경을 개발하는 데 무엇을 사용할 수 있나요?
다음 목록에서는 현재 시장을 지배하고 혼합 현실 JavaScript 개발자가 널리 수락하고 채택하는 몰입형 환경을 구축하기 위한 JavaScript 프레임워크 및 API를 보여 줍니다.
| 프레임워크 | 예시 |
|---|---|
| Babylon.js Babylon는 3D 콘텐츠 및 몰입형 애플리케이션을 쉽게 개발하게 해주는 JavaScript 3D 엔진입니다. 몰입형 애플리케이션을 시작하기 전에 Babylon.js 개발의 기본 사항을 알아보는 것이 좋습니다. - Babylon.js 사용하여 3D 애플리케이션을 빌드하는 방법 알아보기: 시작 - Babylon.js 사용하여 3D 예제 및 소스 코드를 사용하여 재생: 플레이그라운드 - WebXR 자세히 알아보기 - 자습서를 시작하는 방법 알아보기: 첫 번째 "헬로 월드!" 앱 만들기 |
 |
| A 프레임 A-프레임은 웹에서 Virtual Reality를 시작하는 데 사용할 수 있는 선언적 JavaScript 프레임워크입니다. 자세한 내용은 A-Frame 설명서를 참조 하세요. |
 |
| Three.js Three.js 몰입형 환경을 만들기 위한 인기 있는 3D 라이브러리입니다. three.js 대해 자세히 알아보고 예제를 살펴봅니다. |
 |
| WebGL WebGL API를 사용하여 WebXR 디바이스 API에 직접 액세스할 수 있습니다. WebGL(웹 그래픽 라이브러리)은 플러그 인을 사용하지 않고 호환되는 웹 브라우저 내에서 고성능 대화형 3D 및 2D 그래픽을 렌더링하기 위한 JavaScript API입니다. |
 |
참고 항목
- WebXR 디바이스 API 사양
- WebXR 디바이스 API 설명서
- WebXR 샘플
- Immersiveweb.dev
- Babylon.js 사용하여 WebXR 환경 만들기
- WebGL API
- 게임 패드 API 및 게임 패드 확장
- Windows Mixed Reality 및 새 Microsoft Edge
- WebGL에서 손실된 컨텍스트 처리
- 포인터 잠금
- glTF
- 몰입형 웹 커뮤니티 그룹
- 몰입형 웹 W3C Github