소개

완주할 수 있을까 비교할 수 없는 Three.js Advent Calendar , 첫날은 일단 지난달 말에 공개된 Three.js r111에 추가된 새로운 샘플, WebXR AR Paint를 소개해 차를 흐리게 하려고 합니다. 아니, 손을 뽑고 있는 것은 아니고, 최초의 엔트리로 장애물을 내리는 것으로 참가하기 쉽게 하려고 하는 심원한 이유가 있어요, 정말로.

WebXR AR Paint

WebXR AR Paint는 AR로 공간에 선을 그릴 수 있는 웹 앱입니다. ARCore이 공개되었을 때 Just a Line라는 샘플 앱도 공개되었지만, 유사한 앱을 웹 기술만으로 만들 수 있는 것은 꽤 감동적이네요. (Just a Line처럼 공간 공유는 할 수 없지만)

사전 준비

이제 빨리 샘플을 사용해 봅시다. 실제로 동작을 확인하려면 버전 80 이상의 AR 플래그를 사용하는 모바일 버전의 Chrome이 필요합니다. 즉, ARCore의 사용 가능한 새로운 모바일 기기와 Chrome Canary for Android를 준비하여 사전에 플래그를 사용하도록 설정해야 합니다.

Chrome Canary은 Google 크롬에 곧 탑재되는 기능을 한 발 앞서 사용할 수 있는 시험 운영 버전입니다. 아직 설치하지 않았다면 Google Play에서 설치하세요.

Chrome의 AR 플래그를 사용하려면 chrome://flags를 열고 WebXR AR 등을 검색하여 'WebXR AR Module'항목을 'Enabled'로 설정합니다. 설정 변경 후에는 브라우저를 다시 시작해야 합니다. WebXR AR 모듈 은 WebXR Device API 의 추가 사양으로, 이 사양을 서포트하고 있는 브라우저는 XR 세션으로 실제의 주변의 환경 위에 표시를 거듭하는 "immersive-ar" 모드를 이용할 수 있습니다.

시도해보기

Android용 Chrome Canary에서 htps // three js. 오 rg / 에어 mp ぇ s / ぇ bxr_ 아 r_ 파인 t. HTML을 엽니다. 준비가 되어 있으면 화면 하단에 "START AR"이라는 버튼이 표시되어 있을 것입니다. 버튼이 표시되지 않거나 "WEBXR NOT AVAILABLE"이라는 버튼이 표시되면 준비에 문제가 있습니다. 이전 섹션의 내용을 다시 확인하십시오.

「START AR」버튼을 탭하면 다이얼로그가 표시되므로 「AR 시작」을 탭합니다.



버튼을 시작하면 대화 상자가 표시됩니다. 여기에 표시됨

환경의 3D 맵 만들기

카메라 움직임 추적

라는 항목이 WebXR AR Module 플래그를 유효하게 해 가능하게 된 내용입니다. 물론 'AR 시작'을 탭합니다.



응용 프로그램이 시작되면 화면에 영상이 비추어지고 화면을 추적하면 그 위치에 선이 그려집니다. 화면을 탭한 채로 단말을 전후하면 깊이 방향으로 선을 그리는 것도 가능합니다. 그린 도형은 실제 환경에 대응한 3D 좌표를 가지고 있으므로, 360도 좋아하는 방향에서 바라볼 수 있습니다.

구현 확인

그러면 Example의 코드를 확인해 봅시다・・・라고 말하고 싶은 곳입니다만, 첫날부터 여러가지 코드가 나오면 허들이 올라 버릴 것 같기 때문에 오늘은 이 근처까지 해, 3일 후 다음 번 그 2 로 구현에 대해서 설명하고 싶습니다.

아니, 시간이 없다든가 손을 뽑았다든가 아니에요. 단지 순수하게 장애물을 올리지 않기 때문입니다. 정말.

부탁

이런 느낌에 조금 사용해 본 것만으로도 전혀 괜찮아요. Three.js 코왁 나이요!