WebXR Hit Test Manager: 몰입형 경험을 위한 레이 캐스팅 시스템 구현

증강 현실(AR) 및 가상 현실(VR) 기술의 부상은 몰입감 있고 상호 작용적인 디지털 경험을 만들 수 있는 흥미로운 새로운 가능성을 열었습니다. WebXR은 웹 브라우저에서 VR 및 AR 기능에 액세스하기 위한 JavaScript API로, 전 세계 개발자가 다양한 장치에서 이러한 경험을 구축할 수 있도록 지원합니다. 매력적인 WebXR 경험을 만드는 데 있어 핵심 구성 요소는 가상 환경과 상호 작용하는 기능입니다. 여기서 WebXR Hit Test Manager와 레이 캐스팅이 중요한 역할을 합니다.

레이 캐스팅이란 무엇이며 왜 중요한가요?

WebXR 컨텍스트에서 레이 캐스팅은 가상 광선(직선)이 AR 시스템에서 감지한 실제 표면 또는 VR 환경의 가상 객체와 교차하는지 여부를 확인하는 데 사용되는 기술입니다. 주변에 레이저 포인터를 비추고 어디에 맞는지 확인하는 것과 같다고 생각하십시오. WebXR Hit Test Manager는 이러한 레이 캐스트를 수행하고 결과를 검색하는 도구를 제공합니다. 이 정보는 다음과 같은 다양한 상호 작용에 매우 중요합니다.

• 객체 배치: 사용자가 가상 의자를 거실에 놓는 것과 같이 가상 객체를 실제 표면에 배치할 수 있습니다(AR). 도쿄에 있는 사용자가 가구 구매를 결정하기 전에 가상으로 아파트를 꾸미는 것을 생각해 보십시오.
• 타겟팅 및 선택: 사용자가 가상 포인터나 손을 사용하여 가상 객체를 선택하거나 UI 요소와 상호 작용할 수 있도록 합니다(AR/VR). 런던에 있는 외과 의사가 AR을 사용하여 해부학적 정보를 환자에게 오버레이하고 검토할 특정 영역을 선택하는 것을 상상해 보십시오.
• 탐색: 위치를 가리키고 그곳으로 이동하도록 지시하여 가상 세계에서 사용자의 아바타를 이동합니다(VR). 파리의 박물관은 VR을 사용하여 방문객이 역사적 전시물을 탐색할 수 있도록 할 수 있습니다.
• 제스처 인식: 핀치하여 확대/축소하거나 스와이프하여 스크롤하는 것과 같이 히트 테스트와 핸드 트래킹을 결합하여 사용자 제스처를 해석합니다(AR/VR). 이는 시드니에서 열리는 공동 디자인 회의에서 참가자들이 가상 모델을 함께 조작하는 데 사용될 수 있습니다.

WebXR Hit Test Manager 이해

WebXR Hit Test Manager는 레이 캐스팅을 용이하게 하는 WebXR API의 필수적인 부분입니다. 광선의 원점과 방향을 정의하는 히트 테스트 소스를 만들고 관리하는 방법을 제공합니다. 그런 다음 관리자는 이러한 소스를 사용하여 실제 세계(AR) 또는 가상 세계(VR)에 대해 히트 테스트를 수행하고 교차점에 대한 정보를 반환합니다. 주요 개념은 다음과 같습니다.

• XRFrame: XRFrame은 뷰어의 포즈와 감지된 평면 또는 기능을 포함하여 XR 장면의 특정 시점 스냅샷을 나타냅니다. 히트 테스트는 XRFrame에 대해 수행됩니다.
• XRHitTestSource: 캐스팅할 광선의 소스를 나타냅니다. 원점(광선이 시작되는 위치)과 방향(광선이 가리키는 위치)을 정의합니다. 일반적으로 입력 방법(예: 컨트롤러, 손)당 하나의 XRHitTestSource를 만듭니다.
• XRHitTestResult: 교차점의 포즈(위치 및 방향)와 광선 원점으로부터의 거리를 포함하여 성공적인 히트에 대한 정보를 포함합니다.
• XRHitTestTrackable: 실제 세계에서 추적된 기능(예: 평면)을 나타냅니다.

기본 히트 테스트 시스템 구현

JavaScript를 사용하여 기본 WebXR 히트 테스트 시스템을 구현하는 단계를 살펴보겠습니다. 이 예제에서는 AR 객체 배치에 중점을 두지만 원리는 다른 상호 작용 시나리오에 적용할 수 있습니다.

1단계: WebXR 세션 및 히트 테스트 지원 요청

먼저 WebXR 세션을 요청하고 'hit-test' 기능이 활성화되었는지 확인해야 합니다. 이 기능은 Hit Test Manager를 사용하는 데 필요합니다.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

설명:

• `navigator.xr.requestSession('immersive-ar', ...)`: 몰입형 AR 세션을 요청합니다. 첫 번째 인수는 세션 유형('AR의 경우 'immersive-ar', VR의 경우 'immersive-vr')을 지정합니다.
• `requiredFeatures: ['hit-test']`: 결정적으로 Hit Test Manager를 활성화하여 'hit-test' 기능을 요청합니다.
• `xrSession.requestHitTestSource(...)`: 광선의 원점과 방향을 정의하는 XRHitTestSource를 만듭니다. 이 기본 예제에서는 사용자의 시점에 해당하는 '뷰어' 참조 공간을 사용합니다.

2단계: 렌더링 루프 생성

렌더링 루프는 WebXR 애플리케이션의 핵심입니다. 장면을 업데이트하고 각 프레임을 렌더링하는 곳입니다. 렌더링 루프 내에서 히트 테스트를 수행하고 가상 객체의 위치를 업데이트합니다.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

설명:

• `xrFrame.getHitTestResults(xrHitTestSource)`: 이전에 생성된 XRHitTestSource를 사용하여 히트 테스트를 수행합니다. 발견된 모든 교차점을 나타내는 XRHitTestResult 객체의 배열을 반환합니다.
• `hitTestResults[0]`: 첫 번째 히트 결과를 가져옵니다. 보다 복잡한 시나리오에서는 모든 결과를 반복하고 가장 적절한 결과를 선택할 수 있습니다.
• `hit.getPose(xrReferenceSpace)`: 지정된 참조 공간에서 히트의 포즈(위치 및 방향)를 검색합니다.
• `object3D.position.set(...)` 및 `object3D.quaternion.set(...)`: 히트 포즈와 일치하도록 가상 객체(object3D)의 위치와 방향을 업데이트합니다. 이렇게 하면 객체가 교차점에 배치됩니다.
• `object3D.visible = true/false`: 가상 객체의 가시성을 제어하여 히트가 발견된 경우에만 나타나도록 합니다.

3단계: 3D 장면 설정(Three.js 예제)

이 예제에서는 널리 사용되는 JavaScript 3D 라이브러리인 Three.js를 사용하여 큐브가 있는 간단한 장면을 만듭니다. Babylon.js 또는 A-Frame과 같은 다른 라이브러리를 사용하도록 조정할 수 있습니다.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

중요: Three.js 라이브러리를 HTML 파일에 포함해야 합니다.

            


            

              
                Copy
              
            
          

고급 기술 및 최적화

위의 기본 구현은 WebXR 히트 테스트를 위한 기반을 제공합니다. 보다 복잡한 경험을 구축할 때 고려해야 할 몇 가지 고급 기술 및 최적화가 있습니다.

1. 히트 테스트 결과 필터링

경우에 따라 특정 유형의 표면만 고려하도록 히트 테스트 결과를 필터링할 수 있습니다. 예를 들어 수평 표면(바닥 또는 테이블)에만 객체 배치를 허용할 수 있습니다. 히트 포즈의 법선 벡터를 검사하고 위쪽 벡터와 비교하여 이를 달성할 수 있습니다.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. 임시 입력 소스 사용

핸드 트래킹과 같은 보다 고급 입력 방법의 경우 일반적으로 임시 입력 소스를 사용합니다. 임시 입력 소스는 손가락 탭 또는 손 제스처와 같은 임시 입력 이벤트를 나타냅니다. WebXR Input API를 사용하면 이러한 이벤트에 액세스하고 사용자 손 위치를 기반으로 히트 테스트 소스를 만들 수 있습니다.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. 성능 최적화

WebXR 경험은 특히 모바일 장치에서 계산 집약적일 수 있습니다. 성능 최적화를 위한 몇 가지 팁은 다음과 같습니다.

• 히트 테스트 빈도 줄이기: 모든 프레임에서 히트 테스트를 수행하는 것은 비용이 많이 들 수 있습니다. 특히 사용자의 움직임이 느린 경우 빈도를 줄이는 것을 고려하십시오. 타이머를 사용하거나 사용자가 작업을 시작할 때만 히트 테스트를 수행할 수 있습니다.
• BVH(Bounding Volume Hierarchy) 사용: 객체가 많은 복잡한 장면이 있는 경우 BVH를 사용하면 충돌 감지 속도를 크게 높일 수 있습니다. Three.js 및 Babylon.js는 BVH 구현을 제공합니다.
• LOD(Level of Detail): 카메라로부터의 거리에 따라 3D 모델에 대해 다양한 세부 수준을 사용합니다. 이렇게 하면 먼 객체에 대해 렌더링해야 하는 폴리곤 수가 줄어듭니다.
• 오클루전 컬링: 다른 객체 뒤에 숨겨진 객체는 렌더링하지 마십시오. 이렇게 하면 복잡한 장면에서 성능이 크게 향상될 수 있습니다.

4. 다양한 참조 공간 처리

WebXR은 사용자의 위치와 방향을 추적하는 데 사용되는 좌표계를 정의하는 다양한 참조 공간을 지원합니다. 가장 일반적인 참조 공간은 다음과 같습니다.

• Local: 좌표계의 원점은 사용자의 시작 위치를 기준으로 고정됩니다. 이는 사용자가 작은 영역에 머무는 경험에 적합합니다.
• Bounded-floor: 원점은 바닥 수준에 있고 XZ 평면은 바닥을 나타냅니다. 이는 사용자가 방을 돌아다닐 수 있는 경험에 적합합니다.
• Unbounded: 원점이 고정되어 있지 않고 사용자가 자유롭게 이동할 수 있습니다. 이는 대규모 AR 경험에 적합합니다.

적절한 참조 공간을 선택하는 것은 WebXR 경험이 다양한 환경에서 올바르게 작동하도록 하는 데 중요합니다. XR 세션을 만들 때 특정 참조 공간을 요청할 수 있습니다.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. 장치 호환성 처리

WebXR은 비교적 새로운 기술이며 모든 브라우저와 장치가 동일하게 지원하는 것은 아닙니다. WebXR 세션을 초기화하기 전에 WebXR 지원을 확인하는 것이 중요합니다.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

또한 WebXR 경험이 올바르게 작동하는지 확인하기 위해 다양한 장치에서 테스트해야 합니다.

국제화 고려 사항

전 세계 사용자를 위한 WebXR 애플리케이션을 개발할 때는 국제화(i18n) 및 현지화(l10n)를 고려하는 것이 중요합니다.

• 텍스트 및 UI 요소: 현지화 라이브러리를 사용하여 텍스트 및 UI 요소를 다른 언어로 번역합니다. UI 레이아웃이 다양한 텍스트 길이를 수용할 수 있는지 확인합니다. 예를 들어 독일어 단어는 영어 단어보다 더 긴 경향이 있습니다.
• 측정 단위: 지역마다 적절한 측정 단위를 사용합니다. 예를 들어 대부분의 국가에서는 미터와 킬로미터를 사용하지만 미국과 영국에서는 피트와 마일을 사용합니다. 사용자가 선호하는 측정 단위를 선택할 수 있도록 허용합니다.
• 날짜 및 시간 형식: 지역마다 적절한 날짜 및 시간 형식을 사용합니다. 예를 들어 일부 국가에서는 YYYY-MM-DD 형식을 사용하고 다른 국가에서는 MM/DD/YYYY 형식을 사용합니다.
• 통화: 지역마다 적절한 형식으로 통화를 표시합니다. 통화 변환을 처리하려면 라이브러리를 사용하십시오.
• 문화적 감수성: 문화적 차이를 인식하고 일부 문화권에서 불쾌감을 줄 수 있는 이미지, 기호 또는 언어를 사용하지 않도록 합니다. 예를 들어 특정 손 제스처는 문화권마다 다른 의미를 가질 수 있습니다.

WebXR 개발 도구 및 리소스

WebXR 개발에 도움이 되는 여러 도구와 리소스가 있습니다.

• Three.js: WebGL 기반 경험을 만들기 위한 널리 사용되는 JavaScript 3D 라이브러리입니다.
• Babylon.js: WebXR 지원에 중점을 둔 또 다른 강력한 JavaScript 3D 엔진입니다.
• A-Frame: HTML을 사용하여 VR 경험을 구축하기 위한 웹 프레임워크입니다.
• WebXR 에뮬레이터: 실제 VR 또는 AR 장치 없이 WebXR 경험을 테스트할 수 있는 브라우저 확장 프로그램입니다.
• WebXR 장치 API 사양: W3C의 공식 WebXR 사양입니다.
• Mozilla Mixed Reality 블로그: WebXR 및 관련 기술에 대해 배우는 데 유용한 리소스입니다.

결론

WebXR Hit Test Manager는 상호 작용적이고 몰입적인 AR/VR 경험을 만들기 위한 강력한 도구입니다. 레이 캐스팅 및 Hit Test API의 개념을 이해함으로써 사용자가 자연스럽고 직관적인 방식으로 가상 세계와 상호 작용할 수 있는 매력적인 애플리케이션을 구축할 수 있습니다. WebXR 기술이 계속 발전함에 따라 혁신적이고 매력적인 경험을 만들 수 있는 가능성은 무한합니다. 성능을 위해 코드를 최적화하고 전 세계 사용자를 위해 개발할 때 국제화를 고려하는 것을 잊지 마십시오. 차세대 몰입형 웹 경험을 구축하는 데 따르는 어려움과 보상을 받아들이십시오.