웹용 증강 현실

조 메들리
조 메들리

Chrome 67에서는 VR 기능만 사용 설정되었지만 증강 현실 (AR)과 가상 현실 (VR) 모두를 위한 WebXR Device API를 발표했습니다. VR은 오직 컴퓨팅 기기 안에 있는 내용을 기반으로 하는 경험입니다 반면 AR을 사용하면 현실 세계에서 가상 객체를 렌더링할 수 있습니다. 이러한 객체의 배치 및 추적을 허용하기 위해 Google은 몰입형 웹 코드가 실제로 객체를 배치할 수 있는 새로운 메서드인 WebXR Hit Test API를 Chrome Canary에 추가했습니다.

어디에서 얻을 수 있나요?

이 API는 당분간 Canary를 유지하기 위한 것입니다. API 제안서가 매우 새로운 것이고 개발자에게 모두 강력하고도 적합하도록 하기 위해 테스트 기간을 길게 하는 것이 좋습니다.

Chrome Canary 외에 다음 항목도 필요합니다.

  • Android O 이상을 실행하는 호환 스마트폰
  • ARCore를 설치하려면 다음 안내를 따르세요.
  • Chrome 플래그 2개 (chrome://flags): WebXRDevice API (#webxr) 및 WebXR Hit Test (#webxr-hit-test)

이를 통해 데모를 자세히 살펴보거나 Codelab을 사용해 볼 수 있습니다.

단순한 웹입니다.

올해 Google IO에서는 Chrome의 초기 빌드를 통해 증강 현실을 선보였습니다. 이 3일 동안 개발자와 비개발자 모두에게 반복적으로 말씀드렸는데, 저의 몰입형 웹 기사에 '바로 웹이다'라는 말을 넣었으면 좋겠네요.

'어떤 Chrome 확장 프로그램을 설치해야 하나요?' " 연장은 없습니다. 이건 그냥 웹일 뿐"이라고 말하고

"특별한 브라우저가 필요한가요?" "바로 웹입니다."

"어떤 앱을 설치해야 하나요?" "특별한 앱은 없으며 오직 웹일 뿐입니다."

여러분은 웹 전용 웹사이트에서 이 글을 읽고 있으므로 아마 당연한 과정일 것입니다. 이 새로운 API로 데모를 빌드하는 경우 이 질문에 대비하세요. 꽤 많이 얻을 수 있을 거예요.

IO와 관련하여 몰입형 웹에 관한 일반적인 내용, 현재 위치, 진행 상황에 대해 자세히 알아보려면 이 동영상을 확인하세요.

어떤 부분에 유용한가요?

증강 현실은 기존의 많은 웹페이지에 유용하게 사용될 것입니다. 예를 들어 이를 통해 사람들이 교육 사이트에서 학습할 수 있고 잠재적 구매자가 쇼핑하는 동안 집에 있는 물건을 시각화할 수 있습니다.

데모를 통해 확인할 수 있습니다. 이를 통해 사용자는 실제로 있는 것처럼 객체를 실물 크기로 표현할 수 있습니다. 배치되면 이미지는 선택된 표면에 머무르고 실제 항목이 그 표면에 있을 때의 크기로 표시되며 사용자가 이동할 수 있을 뿐만 아니라 가까이 또는 더 멀리 이동할 수 있습니다. 따라서 뷰어는 2차원 이미지를 사용할 때보다 더 깊이 있게 객체를 이해할 수 있습니다.

무슨 뜻인지 잘 모르시겠다면 데모를 사용해 보세요. 데모를 실행할 수 있는 기기가 없다면 이 도움말 상단에 있는 동영상 링크를 확인하세요.

데모와 동영상에서 보여주지 않는 한 가지는 AR이 실제 객체의 크기를 전달하는 방법입니다. 이 동영상은 Google에서 빌드한 Chacmool이라는 교육 데모를 보여줍니다. 함께 제공되는 도움말에서 이 데모를 자세히 설명합니다. 이 논의에서 중요한 점은 샤물 조각상을 증강 현실에 배치하면 실제로 여러분과 있는 방에 있는 것처럼 그 크기를 보는 것입니다.

Chacmool의 예는 교육적인 것이지만 마찬가지로 쉽게 상업적인 내용일 수도 있습니다. 거실에 소파를 배치할 수 있는 가구 쇼핑 사이트를 떠올려 보세요. AR 애플리케이션은 소파가 공간에 맞는지, 다른 가구와 나란히 어떻게 표시되는지 알려줍니다.

Ray 전송, 적중 테스트, 레티클

증강 현실을 구현할 때 해결해야 하는 주요 문제는 실제 뷰에 객체를 배치하는 방법입니다. 이를 위한 방법을 레이 전송이라고 합니다. 레이 전송이란 포인터 광선과 실제 표면 사이의 교집합을 계산하는 것을 의미합니다. 이 교집합을 조회라고 하며, 조회가 발생했는지 확인하는 것을 조회 테스트라고 합니다.

이 시점에서 Chrome Canary의 새 코드 샘플을 사용해 볼 수 있습니다. 조치를 취하기 전에 올바른 플래그를 사용 설정했는지 다시 확인합니다. 이제 샘플을 로드하고 'Start AR(AR 시작)'을 클릭합니다.

몇 가지 사항에 주목하세요. 첫째, 다른 몰입형 샘플에서 인식할 수 있는 속도계에는 초당 60프레임이 아닌 30프레임이 표시됩니다. 이는 웹페이지가 카메라에서 이미지를 수신하는 속도입니다.

AR은 초당 30프레임으로 실행됩니다.

AR 조회 테스트 데모

또 한 가지 눈에 띄는 것은 해바라기 이미지입니다. 이동 시 움직이고 바닥 및 테이블 상판과 같은 표면에 스냅됩니다. 화면을 탭하면 해바라기가 표면에 놓이고 새로운 해바라기가 기기와 함께 움직입니다.

기기와 함께 움직이고 노출 영역에 고정하려는 이미지를 레티클이라고 합니다. 레티클은 증강 현실에서 객체를 배치하는 데 도움이 되는 임시 이미지입니다. 이 데모에서 레티클은 배치할 이미지의 사본입니다. 하지만 꼭 그래야 할 필요는 없습니다. 예를 들어 Chacmool 데모에서는 배치 중인 객체의 밑변과 거의 동일한 모양의 직사각형 상자입니다.

코드 요약

Chacmool 데모는 프로덕션 앱에서 AR이 어떻게 표시되는지 보여줍니다. 다행히 WebXR 샘플 저장소에 훨씬 간단한 데모가 있습니다. 샘플 코드는 해당 저장소의 AR 조회 테스트 데모에서 가져온 것입니다. 참고로, 진행 상황을 이해하는 데 도움이 되도록 코드 예를 단순화하려고 합니다.

AR 세션을 시작하고 렌더링 루프를 실행하는 기본적인 방법은 AR의 경우와 VR에서 모두 동일합니다. 익숙하지 않다면 이전 문서를 참고하세요. 더 구체적으로 AR 세션을 시작하고 실행하는 것은 VR 매직 창 세션에 진입하는 것과 거의 똑같습니다. 매직 창과 마찬가지로 세션 유형은 몰입적이어야 하며 참조 유형의 프레임은 'eye-level'여야 합니다.

새로운 API

이제 새 API의 사용 방법을 보여드리겠습니다. AR에서 레티클은 항목이 배치되기 전에 표면을 찾으려고 합니다. 이 작업은 히트 테스트를 통해 실행됩니다. 히트 테스트를 실행하려면 XRSession.requestHitTest()를 호출합니다. 상태 메시지가 표시됩니다.

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

이 메서드의 세 가지 인수는 광선 캐스트를 나타냅니다. 광선 변환은 광선의 두 점 (origindirection)과 이러한 점이 계산되는 위치 (frameOfReference)로 정의됩니다. 원점과 방향은 모두 3D 벡터입니다. 제출하는 값과 관계없이 길이가 1로 정규화(변환)됩니다.

레티클 이동

기기를 이동할 때 레티클은 객체를 배치할 수 있는 위치를 찾으려고 시도할 때 이와 함께 이동해야 합니다. 즉, 모든 프레임에서 레티클을 다시 그려야 합니다.

requestAnimationFrame() 콜백으로 시작합니다. VR과 마찬가지로 세션과 포즈가 필요합니다

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

세션과 포즈를 취했으면 광선이 전송되는 위치를 결정합니다. 샘플 코드는 gl-행렬 수학 라이브러리를 사용합니다. 하지만 gl-Matrix가 필수는 아닙니다. 중요한 것은 무엇을 계산하고 기기의 위치를 기반으로 하는지 아는 것입니다. XRPose.poseModalMatrix에서 기기 위치를 가져옵니다. 레이 캐스트를 손에 쥐고 requestHitTest()를 호출합니다.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

히트 테스트 샘플에서는 명확하게 보이지 않지만 장면을 그려내려면 여전히 뷰를 순환해야 합니다. 그리기는 WebGL API를 사용하여 완성합니다. 정말 야심 찬 사람이라면 그렇게 할 수 있습니다. 하지만 프레임워크를 사용하는 것이 좋습니다. 몰입형 웹 샘플은 Cottontail이라는 데모를 위해 만들어진 샘플을 사용하며, Three.js는 5월부터 WebXR을 지원했습니다.

객체 배치

사용자가 화면을 탭하면 객체가 AR에 배치됩니다. 이를 위해 select 이벤트를 사용합니다. 이 단계에서는 배치할 위치를 아는 것이 중요합니다. 움직이는 레티클은 히트 테스트의 지속적인 소스를 제공하므로 객체를 배치하는 가장 간단한 방법은 마지막 히트 테스트에서 레티클 위치에 객체를 그리는 것입니다. 필요한 경우 레티클을 표시하지 않아야 하는 타당한 이유가 있다면 샘플과 같이 select 이벤트에서 requestHitTest()를 호출하면 됩니다.

결론

이 문제를 해결하는 가장 좋은 방법은 샘플 코드를 단계별로 진행하거나 Codelab을 사용해 보는 것입니다. 이 두 가지를 모두 이해하실 수 있도록 충분한 배경 지식이 있었기를 바랍니다.

몰입형 Web API의 빌드가 끝나지 않은 게 아닙니다. 진행에 따라 여기에 새로운 기사를 게시할 예정입니다.