Android XR의 Chrome은 WebXR을 지원합니다. WebXR은 지원되는 브라우저에 고성능 XR API를 제공하는 W3C의 오픈 표준 입니다. 웹용으로 빌드하는 경우 3D 모델로 기존 사이트를 개선하거나 새로운 몰입형 환경을 빌드할 수 있습니다.
다음 WebXR 기능은 Android XR용 Chrome에서 지원됩니다.
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에 맞게 조정
다른 기기에서 실행되는 기존 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는 각 눈의 뷰를 반환하고 해당하는 for 루프가 두 번 실행됩니다.
WebXR 심도 감지 API를 사용한 실시간 심도 시각화 빨간색은 더 가까운 픽셀을 나타내고 파란색은 더 먼 픽셀을 나타냅니다.
WebXR에 손 상호작용 추가
WebXR 앱에 손 상호작용을 추가하면 더 직관적이고 몰입감 있는 환경을 지원하여 사용자 참여도를 높일 수 있습니다.
손 입력은 Android XR의 기본 상호작용 메커니즘입니다. Android XR용 Chrome은 손 입력 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에서 각 권한을 한 번에 하나씩 요청합니다.
웹의 모든 권한과 마찬가지로 권한이 거부되는 상황을 적절하게 처리해야 합니다.