이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹용 증강 현실

Joe Medley

Chrome 67에서는 증강 현실 (AR)과 가상 현실 (VR) 모두를 위한 WebXR Device API를 발표했지만 VR 기능만 사용 설정되었습니다. 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 히트 테스트 (#webxr-hit-test)

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

웹

올해 Google IO에서 Chrome의 초기 빌드를 사용한 증강 현실을 선보였습니다. 그 3일 동안 개발자와 비개발자 모두에게 몰입형 웹 도움말에 포함했어야 했던 말을 반복해서 말했습니다. '그저 웹일 뿐입니다.'

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

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

'어떤 앱을 설치해야 하나요?' "특별한 앱은 없습니다. 웹만 있으면 됩니다."

웹 전용 웹사이트에서 이 글을 읽고 있으므로 이 점이 분명할 수 있습니다. 이 새 API로 데모를 빌드하는 경우 이 질문에 대비하세요. 많이 받으실 겁니다.

IO의 경우, 몰입도 높은 웹(예: 위치, 위치)에 대한 전반적인 내용을 알고 싶다면 이 동영상을 확인하세요.

이 기능은 어떤 용도로 유용하나요?

증강 현실은 많은 기존 웹페이지에 가치 있는 추가 기능이 될 것입니다. 예를 들어 사람들이 교육 사이트에서 학습하고 잠재적 구매자는 쇼핑 중에 집에 있는 객체를 시각화할 수 있습니다.

데모를 통해 이를 확인할 수 있습니다. 이를 통해 사용자는 실제와 같이 실물 크기의 객체를 배치할 수 있습니다. 배치되면 이미지는 선택한 노출 영역에 머물고 실제 항목이 노출 영역에 있는 것처럼 표시되며 사용자가 이미지를 움직이거나 이미지에 더 가까이 또는 더 멀리 이동할 수 있습니다. 이렇게 하면 2차원 이미지보다 객체를 더 잘 이해할 수 있습니다.

이 모든 것이 무엇을 의미하는지 잘 모르겠다면 데모를 사용해 보면 명확해질 것입니다. 데모를 실행할 수 있는 기기가 없다면 이 도움말 상단의 동영상 링크를 확인하세요.

데모와 동영상에서 보여주지 않는 한 가지는 AR이 실제 물체의 크기를 어떻게 전달할 수 있는지입니다. 이 동영상에서는 Chacmool이라는 교육용 데모를 보여줍니다. 이 데모에 관한 자세한 내용은 함께 제공되는 도움말을 참고하세요. 이 논의에서 중요한 점은 차묵 석상을 증강 현실에 배치하면 실제로 방에 있는 것처럼 크기가 표시된다는 것입니다.

차크몰 예시는 교육용이지만 상업용으로도 쉽게 전환할 수 있습니다. 거실에 소파를 배치할 수 있는 가구 쇼핑 사이트를 예로 들 수 있습니다. AR 애플리케이션은 소파가 공간에 맞는지, 다른 가구 옆에 놓았을 때 어떤 모습일지 알려줍니다.

Ray 캐스트, 히트 테스트, 레티클

증강 현실을 구현할 때 해결해야 하는 주요 문제는 객체를 실제 뷰에 배치하는 방법입니다. 이를 위한 방법을 레이 캐스팅이라고 합니다. 광선 캐스팅은 현실 세계의 포인터 광선과 표면 사이의 교차점을 계산하는 것을 의미합니다. 이 교차점을 히트라고 하며 히트가 발생했는지 확인하는 작업을 히트 테스트라고 합니다.

이 시점에서 Chrome Canary의 새로운 코드 샘플을 사용해 보세요. 어떤 작업을 하기 전에 올바른 플래그가 사용 설정되어 있는지 다시 한번 확인하세요. 이제 샘플을 로드하고 '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 => {
  //
});

이 메서드의 세 인수는 레이 캐스트를 나타냅니다. 레이 캐스트는 광선의 두 지점 (origin 및 direction)과 이러한 지점이 계산되는 위치 (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 이벤트를 사용합니다. 이 단계에서 중요한 것은 배치할 위치를 아는 것입니다. 움직이는 레티클은 지속적인 히트 테스트 소스를 제공하므로 객체를 배치하는 가장 간단한 방법은 마지막 히트 테스트에서 레티클의 위치에 객체를 그리는 것입니다. 필요한 경우, 레티클을 표시하지 않아야 할 타당한 이유가 있다고 가정한다면 샘플에 표시된 대로 선택 이벤트에서 requestHitTest()를 호출하면 됩니다.

결론

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

몰입형 웹 API를 빌드하는 작업은 아직 멀었습니다. 작업이 진행됨에 따라 여기에 새로운 기사가 게시됩니다.