Android XR용 Chrome은 WebXR을 지원합니다. WebXR은 지원되는 브라우저에 고성능 XR API를 제공하는 W3C의 공개 표준입니다. 웹용으로 빌드하는 경우 3D 모델로 기존 사이트를 개선하거나 새로운 몰입형 환경을 빌드할 수 있습니다.
Android XR용 Chrome에서 지원되는 WebXR 기능은 다음과 같습니다.
WebXR이 작동하는 모습을 보려면 Android XR 기기 또는 Android XR 에뮬레이터에서 Chrome을 실행하고 공식 WebXR 샘플을 둘러보세요.
기본 요건: WebXR 프레임워크 선택
개발을 시작하기 전에 적절한 WebXR 프레임워크를 선택하는 것이 중요합니다. 이를 통해 생산성이 크게 향상되고 생성하는 환경의 품질이 개선됩니다.
- 3D 장면을 완전히 제어하고 맞춤 또는 복잡한 상호작용을 만들려면 three.js 및 babylon.js를 사용하는 것이 좋습니다.
- 신속한 프로토타입 제작 또는 HTML과 유사한 문법을 사용하여 3D 장면을 정의하는 경우 A-Frame 및 model-viewer를 사용하는 것이 좋습니다.
- 더 많은 프레임워크 및 샘플 코드를 검토할 수도 있습니다.
네이티브 JavaScript 및 WebGL을 사용하는 것이 더 낫다면 GitHub의 WebXR을 참고하여 첫 번째 WebXR 실험을 만들어 보세요.
Android XR용 Adapt
다른 기기에서 실행 중인 기존 WebXR 환경이 있는 경우 Android XR에서 WebXR을 올바르게 지원하도록 코드를 업데이트해야 할 수 있습니다. 예를 들어 휴대기기에 중점을 둔 WebXR 환경은 Android XR에서 하나의 화면에서 두 개의 스테레오 화면으로 조정해야 합니다. 휴대기기 또는 기존 헤드셋을 타겟팅하는 WebXR 환경에서는 입력 코드를 손 중심으로 조정해야 할 수 있습니다.
Android XR에서 WebXR을 사용할 때는 눈마다 하나씩 두 개의 화면이 있다는 점을 보완하도록 코드를 업데이트해야 할 수 있습니다.
WebXR에서 깊이 감각을 보장하는 방법
사용자가 실제 공간에 가상 물체를 배치할 때는 가상 물체가 실제로 거기에 있는 것처럼 보이도록 크기가 정확해야 합니다. 예를 들어 가구 쇼핑 앱에서 사용자는 가상 의자가 거실에 딱 맞을 것이라고 신뢰해야 합니다.
Android XR용 Chrome은 WebXR의 깊이 감지 모듈을 지원합니다. 이 모듈은 기기의 실제 환경 크기와 윤곽을 인식하는 기능을 향상시킵니다. 이 깊이 정보를 사용하면 몰입도 높은 사실적인 상호작용을 만들어 사용자가 충분한 정보를 바탕으로 결정을 내릴 수 있습니다.
휴대전화의 깊이 감지와 달리 Android XR의 깊이 감지는 입체적이며, 양안 시력을 위해 두 개의 깊이 지도를 실시간으로 스트리밍합니다. 스테레오 깊이 프레임을 제대로 지원하도록 WebXR 코드를 업데이트해야 할 수 있습니다.
다음 예에서는 깊이 정보를 입체적으로 렌더링합니다.
// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
const session = frame.session;
session.requestAnimationFrame(onXRFrame);
const baseLayer = session.renderState.baseLayer;
const pose = frame.getViewerPose(xrRefSpace);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clears the framebuffer.
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Note: Two views will be returned from pose.views.
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if (depthData) {
renderDepthInformationGPU(depthData, view, viewport);
}
}
} else {
console.error('Pose unavailable in the current frame!'); }
}
코드에 관한 주요 사항
- 깊이 데이터에 액세스하려면 유효한 포즈를 반환해야 합니다.
pose.views는 각 눈의 뷰와 해당 루프를 두 번 실행합니다.
WebXR Depth Sensing API를 사용한 실시간 깊이 시각화 빨간색은 더 가까운 픽셀을, 파란색은 더 먼 픽셀을 나타냅니다.
WebXR에 손 상호작용 추가
WebXR 앱에 손 상호작용을 추가하면 더욱 직관적이고 몰입도 높은 환경을 제공하여 사용자 참여도를 높일 수 있습니다.
손 입력은 Android XR의 기본 상호작용 메커니즘입니다. Android XR용 Chrome은 Hand Input API를 기본 입력으로 지원합니다. 이 API를 사용하면 사용자가 동작과 손 움직임을 사용하여 장면의 요소를 잡거나 밀거나 조작하는 등 가상 물체와 자연스럽게 상호작용할 수 있습니다.
휴대전화나 컨트롤러 중심의 XR 기기와 같은 기기는 아직 손 입력을 지원하지 않을 수 있습니다. 손 입력을 올바르게 지원하려면 WebXR 코드를 업데이트해야 할 수 있습니다. 손이 있는 몰입형 VR 세션에서는 손 추적을 WebXR 프로젝트에 통합하는 방법을 보여줍니다.
다음 애니메이션은 꼬집기를 WebXR API와 결합하여 사용자가 가상 공간의 표면을 '닦아' 실제 세계로의 패스스루 창을 보여주는 예를 보여줍니다.
손가락을 모아 화면을 닦아 실제 현실을 투시하는 WebXR 데모
WebXR의 권한
권한이 필요한 WebXR API를 사용하면 Chrome에서 사용자에게 사이트에 권한을 부여하라는 메시지를 표시합니다. 모든 WebXR API에는 3D 매핑 및 카메라 추적 권한이 필요합니다. 추적된 얼굴, 눈, 손 데이터에 대한 액세스 권한도 권한으로 보호됩니다. 필요한 모든 권한이 부여되면 navigator.xr.requestSession('immersive-ar', options)를 호출하면 유효한 WebXR 세션이 반환됩니다.
사용자가 선택한 권한 환경설정은 각 도메인에 유지됩니다. 다른 도메인의 WebXR 환경에 액세스하면 Chrome에서 권한을 다시 요청합니다. WebXR 환경에 여러 권한이 필요한 경우 Chrome에서 각 권한을 한 번에 하나씩 메시지로 표시합니다.
웹의 모든 권한과 마찬가지로 권한이 거부되는 상황을 적절하게 처리해야 합니다.