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용 Chrome XR은 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 코드를 업데이트해야 할 수 있습니다. Immersive VR Session with Hands는 WebXR 프로젝트에 손 추적을 통합하는 방법을 보여줍니다.
다음 애니메이션은 WebXR API와 핀치 동작을 결합하여 사용자가 가상 공간의 표면을 '닦아' 실제 세계로 연결되는 패스스루 창을 표시하는 예를 보여줍니다.
손가락으로 화면을 닦아 물리적 현실을 투시하는 WebXR 데모
WebXR의 권한
권한이 필요한 WebXR API를 사용하면 Chrome에서 사용자에게 사이트에 권한을 부여하라는 메시지를 표시합니다. 모든 WebXR API에는 3D 매핑 및 카메라 추적 권한이 필요합니다. 추적된 얼굴, 눈, 손 데이터에 대한 액세스도 권한으로 보호됩니다. 필요한 모든 권한이 부여되면 navigator.xr.requestSession('immersive-ar', options)를 호출하면 유효한 WebXR 세션이 반환됩니다.
사용자가 선택한 권한 환경설정은 도메인별로 유지됩니다. 다른 도메인에서 WebXR 환경에 액세스하면 Chrome에서 권한을 다시 묻는 메시지가 표시됩니다. WebXR 환경에 여러 권한이 필요한 경우 Chrome에서 각 권한을 한 번에 하나씩 묻습니다.
웹의 모든 권한과 마찬가지로 권한이 거부되는 상황을 적절하게 처리해야 합니다.