Google I/O를 준비하면서 웹에서 증강 현실 (AR)의 흥미로운 가능성을 강조하고 싶었습니다. Chacmool은 웹 기반 AR이 사용자가 AR 환경에 얼마나 쉽게 참여할 수 있는지 보여주기 위해 Google에서 빌드한 교육용 웹 환경 데모입니다. 웹 덕분에 어디서나 편리하게 AR을 사용할 수 있습니다.
이제 Android O 이상을 실행하는 ARCore 호환 Android 기기의 Chrome Canary에서 이 데모를 사용할 수 있습니다. 또한 ARCore를 설치해야 합니다.
이 작업은 새로운 WebXR 제안 (WebXR Hit Test API)을 사용하므로 플래그 아래에 있으며 몰입형 웹 커뮤니티 그룹의 다른 구성원과 함께 새 API 제안을 테스트하고 개선하는 동안 Canary를 유지합니다. 실제로 데모에 액세스하려면 chrome://flags:
#webxr 및 #webxr-hit-test에서 두 개의 플래그를 사용 설정해야 합니다. 이를 모두 사용 설정하고 Canary를 다시 시작한 후에는 Chacmool 데모를 확인할 수 있습니다.
Chacmool AR 경험은 AR의 몰입형 및 대화형 특성을 활용하여 사용자가 고대 샤물 조각품에 대해 배울 수 있도록 교육을 중심으로 합니다. 사용자는 실물 크기 조각상을 실제로 배치하고 여기저기 움직여 다양한 각도와 거리에서 조각상을 볼 수 있습니다. 몰입감 넘치는 AR을 통해 사용자는 실제 세상에서와 마찬가지로 자유롭게 콘텐츠를 탐색하고 발견하며 즐길 수 있습니다. AR로 객체를 볼 때는 평면 2D 화면에서 보는 것과는 다르게 사물 주위를 걷거나 물리적으로 더 가까이 또는 더 멀리 이동하는 등 매우 직관적인 상호작용 모델을 사용하여 사물을 다양한 각도와 거리에서 볼 수 있기 때문에 우리가 보고 있는 사물을 깊이 있게 이해할 수 있습니다. 또한 이 환경에서는 조각품에 직접 주석이 달립니다. 이를 통해 사용자는 텍스트에 설명된 내용과 이러한 특징이 조각에서 어디에 있는지 직접 연결할 수 있습니다.
이 데모는 WebXR팀의 첫 번째 웹 기반 AR 데모인 WebAR-Article의 일부 구성요소를 활용하여 빌드하는 데 약 한 달 동안 진행되었습니다. 조각상에 관한 정보는 Google 아트 앤 컬처 페이지에서 제공되었으며 3D 모델은 Google 아트 앤 컬처의 파트너인 CyArk에서 제공했습니다. 웹에서 3D 모델을 준비할 수 있도록 Meshlab과 메시 믹서의 조합을 사용하여 모델을 복구하고 메시를 제거하여 파일 크기를 줄였습니다. 그런 다음 3D 기하학적 메시와 포인트 클라우드를 압축하고 압축 해제하기 위한 라이브러리인 Draco를 사용하여 모델의 파일 크기를 44.3MB에서 225KB로 줄였습니다. 마지막으로 웹 작업자는 모델을 백그라운드 스레드에서 로드하는 데 사용되므로 모델이 로드되고 압축 해제되는 동안 페이지가 대화형으로 유지됩니다. 이 작업은 일반적으로 버벅거림을 일으키고 페이지가 스크롤되지 않도록 합니다.
데스크톱 환경에서 개발하고 휴대전화에 배포했기 때문에 Chrome의 원격 디버깅 도구를 사용하여 환경을 검사함으로써 코드 변경 사이에 매우 빠른 반복 주기를 만들 수 있으며 Chrome에는 디버깅 및 성능 확인을 위한 훌륭한 개발자 도구가 있습니다.
AR/VR 환경 권장사항
네이티브 AR 환경 디자인을 위한 대부분의 설계 및 엔지니어링 가이드라인이 웹 기반 AR 환경을 만드는 데 적용됩니다. 일반적인 권장사항에 관한 자세한 내용은 최근 출시한 AR 디자인 가이드라인을 참고하세요.
특히 웹 기반 AR 환경을 설계할 때는 AR 사용 시 전체 화면을 사용하는 것이 좋습니다 (즉, 동영상 플레이어가 모바일에서 전체 화면으로 전환하는 방식과 유사하게 전체 화면으로 사용). 이렇게 하면 사용자가 뷰를 스크롤하거나 웹페이지의 다른 요소에 방해가 되지 않습니다. AR 온보딩을 시작하기 전에 (예: 레티클 그리기) AR로의 전환이 원활하고 원활해야 합니다. 즉, AR 온보딩을 시작하기 전에 카메라 뷰를 표시해야 합니다. 웹 기반 AR에 관해 알아야 할 중요한 점은 네이티브와 달리 개발자가 카메라 프레임, 조명 추정, 앵커 또는 평면에 (아직) 액세스할 수 없다는 것입니다. 따라서 디자이너와 개발자는 웹 기반 AR 환경을 설계할 때 이러한 제한사항을 염두에 두어야 합니다.
또한 웹 환경에 사용되는 기기는 다양하므로 최상의 사용자 환경을 만들기 위해서는 성능을 최적화하는 것이 중요합니다. 따라서 다각형 수를 낮게 유지하고, 가능한 한 적은 광원을 사용하고, 가능한 경우 그림자를 미리 계산하고, 그리기 호출을 최소화하세요. AR로 텍스트를 표시할 때는 최신 텍스트 렌더링 기법 (즉, 부호 있는 거리 필드 기반)을 사용하여 텍스트가 모든 거리와 각도에서 명확하고 읽을 수 있도록 하세요. 주석을 배치할 때는 사용자의 응시를 또 다른 입력으로 생각하고 관련이 있을 때만 주석을 표시하세요 (사용자가 관심 영역에 집중할 때 표시되는 근접 기반 주석).
마지막으로 이 콘텐츠는 웹 기반이므로 웹에 대한 일반적인 권장사항도 적용하는 것이 중요합니다. 사이트는 모든 기기 (데스크톱, 태블릿, 모바일, 헤드셋 등)에서 우수한 환경을 제공해야 합니다. 점진적 개선을 지원한다는 것은 AR이 지원되지 않는 기기 (예: AR이 아닌 기기에서 3D 모델 뷰어를 표시)용으로 설계한다는 의미이기도 합니다.
자체 웹 기반 AR 환경을 개발하는 데 관심이 있다면 웹에서 AR을 직접 빌드하는 방법을 자세히 설명하는 부속 게시물을 확인하세요. (Chacmool 데모의 소스도 확인할 수 있습니다.) WebXR Device API는 현재 개발 중이며 모든 유형의 애플리케이션과 사용 사례를 지원할 수 있도록 의견을 보내주세요. GitHub로 이동하여 대화에 참여하세요.