Chacmool: Chrome Canary의 증강 현실

Chris Wilson
Chris Wilson

Google I/O를 준비하면서 웹에서 증강 현실 (AR)의 흥미로운 가능성을 강조하고자 했습니다. Chacmool은 웹 기반 AR이 얼마나 쉽게 사용자가 AR 환경에 참여하도록 도와줄 수 있는지 보여주기 위해 제작된 교육용 웹 환경 데모입니다. 웹을 사용하면 어디서나 편리하게 AR을 이용할 수 있습니다.

이제 Android O 이상을 실행하는 ARCore 호환 Android 기기Chrome Canary에서 이 데모를 사용할 수 있습니다. ARCore를 설치해야 합니다. 이 작업은 새로운 WebXR 제안서 (WebXR 히트 테스트 API)를 사용하므로 플래그가 지정되어 있으며 몰입형 웹 커뮤니티 그룹의 다른 구성원과 함께 새 API 제안서를 테스트하고 수정하는 동안 Canary에 유지될 예정입니다. 실제로 데모에 액세스하려면 chrome://flags: #webxr#webxr-hit-test에서 두 플래그를 사용 설정해야 합니다. 두 가지를 모두 사용 설정하고 Canary를 다시 시작하면 Chacmool 데모를 확인할 수 있습니다.

Chacmool AR 환경은 교육을 중심으로 AR의 몰입도 높은 양방향 특성을 활용하여 사용자가 고대 차크물 조각에 관해 학습할 수 있도록 지원합니다. 사용자는 실물 크기의 조각상을 현실에 배치하고 돌아다니면서 다양한 각도와 거리에서 조각상을 볼 수 있습니다. AR의 몰입형 특성 덕분에 사용자는 실제 환경에서와 마찬가지로 콘텐츠를 자유롭게 탐색, 탐색, 플레이할 수 있습니다. 평면 2D 화면에서 보는 것과 달리 AR에서 객체를 보면 매우 직관적인 상호작용 모델(예: 객체 주위를 걸어 다니거나 물리적으로 더 가까이 또는 더 멀리 이동)을 사용하여 다양한 각도와 거리에서 객체를 볼 수 있으므로 보고 있는 대상을 더 깊이 이해할 수 있습니다. 또한 이 환경에는 조각품에 직접 배치된 주석이 있습니다. 이를 통해 사용자는 텍스트에 설명된 내용과 조각품에서 이러한 특징이 있는 위치를 직접 연결할 수 있습니다.

이 데모는 WebXR팀의 첫 번째 웹 기반 AR 데모인 WebAR-Article의 일부 구성요소를 활용하여 빌드하는 데 약 한 달이 걸렸습니다. 조각에 관한 정보는 Google 아트 앤 컬처 페이지에서 가져왔으며 3D 모델은 Google 아트 앤 컬처의 파트너인 CyArk에서 제공했습니다. 3D 모델을 웹에 사용할 수 있도록 하기 위해 Meshlab과 Mesh Mixer를 함께 사용하여 모델을 수리하고 메시를 삭제하여 파일 크기를 줄였습니다. 그런 다음 3D 기하학적 메시와 포인트 클라우드를 압축 및 압축 해제하는 라이브러리인 Draco를 사용하여 모델의 파일 크기를 44.3MB에서 225KB로 줄였습니다. 마지막으로 웹 워커는 백그라운드 스레드에 모델을 로드하는 데 사용되므로 모델이 로드되고 압축 해제되는 동안 페이지가 상호작용 상태로 유지됩니다. 이 작업은 일반적으로 버벅거림을 일으키고 페이지 스크롤을 방지합니다.

데스크톱에서 개발하고 휴대전화에 배포하고 있으므로 Chrome의 원격 디버깅 도구를 사용하여 환경을 검사하면 코드 변경사항 간에 빠른 반복 주기를 만들 수 있습니다. Chrome에는 디버깅 및 성능 확인을 위한 훌륭한 개발자 도구가 있습니다.

AR/VR 환경 권장사항

네이티브 AR 환경 설계를 위한 대부분의 설계 및 엔지니어링 가이드라인은 웹 기반 AR 환경을 만드는 데도 적용됩니다. 일반적인 권장사항에 대해 자세히 알아보려면 최근에 출시된 AR 디자인 가이드라인을 확인하세요.

특히 웹 기반 AR 환경을 설계할 때는 AR을 사용할 때 전체 화면을 사용하는 것이 가장 좋습니다 (예: 동영상 플레이어가 휴대기기에서 전체 화면으로 전환되는 것과 유사하게 전체 화면으로 전환). 이렇게 하면 사용자가 뷰를 스크롤하거나 웹페이지의 다른 요소에 방해를 받지 않습니다. AR로의 전환은 원활하고 자연스러워야 하며 AR 온보딩 (예: 레티클 그리기)을 시작하기 전에 카메라 뷰를 표시해야 합니다. 웹 기반 AR에 관해 중요한 점은 네이티브와 달리 개발자가 아직 카메라 프레임, 조명 추정, 앵커, 평면에 액세스할 수 없다는 것입니다. 따라서 디자이너와 개발자는 웹 기반 AR 환경을 설계할 때 이러한 제한사항을 염두에 두어야 합니다.

또한 웹 환경에 사용되는 다양한 기기 때문에 최상의 사용자 환경을 제공할 수 있도록 성능을 최적화하는 것이 중요합니다. 따라서 다각형 수를 적게 유지하고, 조명을 최대한 적게 사용하고, 가능하면 그림자를 사전 계산하고, 그리기 호출을 최소화하세요. AR에 텍스트를 표시할 때는 최신 (예: 부호화된 거리 필드 기반) 텍스트 렌더링 기법을 사용하여 모든 거리와 각도에서 텍스트를 명확하게 읽을 수 있도록 합니다. 주석을 배치할 때는 사용자의 시선을 다른 입력으로 생각하고 주석이 관련성이 있을 때만 표시합니다 (예: 사용자가 관심 영역에 초점을 맞출 때 표시되는 근접 기반 주석).

마지막으로 이 콘텐츠는 웹 기반이므로 웹에 일반적으로 적용되는 권장 설계 사항도 적용해야 합니다. 사이트가 여러 기기 (데스크톱, 태블릿, 휴대기기, 헤드셋 등)에서 우수한 환경을 제공하는지 확인하세요. 점진적 개선을 지원한다는 것은 AR 지원 기기가 아닌 기기 (예: AR 지원 기기가 아닌 기기에서 3D 모델 뷰어 표시)를 위해 설계하는 것도 의미합니다.

자체 웹 기반 AR 환경을 개발하는 데 관심이 있다면 웹에서 AR을 직접 빌드하는 방법을 자세히 설명하는 관련 게시물을 참고하세요. Chacmool 데모의 소스도 확인할 수 있습니다. WebXR Device API는 현재 활발히 개발 중이며 모든 유형의 애플리케이션과 사용 사례를 지원할 수 있도록 의견을 보내주시면 감사하겠습니다. GitHub로 이동하여 대화에 참여해 주세요.