JavaScript를 사용한 WebXR 개발

아티클
03/21/2023

JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어 중 하나입니다. 간단하고 가볍고 웹에서 널리 사용됩니다. JavaScript 및 웹 기술의 기능을 활용하여 더 매력적인 Mixed Reality 환경을 만듭니다.

웹에서 애플리케이션 Mixed Reality

Mixed Reality 기능은 WebXR을 통해 웹에서 사용할 수 있습니다. 추가 소프트웨어 또는 플러그 인을 설치하지 않고도 호환되는 WebXR 지원 브라우저에서 VR(가상 현실) 및 AR(증강 현실) 콘텐츠를 볼 수 있습니다. HoloLens 2 같은 물리적 디바이스에서 동일한 브라우저를 사용할 수 있습니다.

WebXR 디바이스 API는 웹에서 센서 및 헤드 탑재 디스플레이를 포함한 가상 현실(VR) 및 증강 현실(AR) 디바이스에 액세스하기 위한 것입니다. WebXR 디바이스 API는 Microsoft Edge 및 Chrome 버전 79에서 사용할 수 있으며, 이후 버전은 WebXR을 기본값으로 지원합니다. caniuse.com WebXR에 대한 최신 브라우저 지원 상태 검사 수 있습니다.

참고

WebVR 은 더 이상 사용되지 않으며 현재 브라우저에서 사용할 수 없으므로 새 개발에 사용하면 안 됩니다. 기존 WebVR 구현을 WebXR로 마이그레이션해야 합니다.

WebXR 기능	가용성
WebXR 디바이스 API(w3.org)	Windows Desktop의 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입니다.

참고 항목

다음 단계--자습서

Babylon.js사용하여 첫 번째 WebXR 애플리케이션 만들기

Babylon.js를 사용하여 WebXR에서 피아노 빌드