WebXRヒットテスト結果：没入型体験のためのレイキャスティング結果処理

WebXR Device APIは、ブラウザ内で直接没入型の拡張現実（AR）および仮想現実（VR）体験を作成するためのエキサイティングな可能性を切り開きます。インタラクティブなWebXRアプリケーションを構築する上で基本的な側面の1つは、ヒットテスト結果を理解し、効果的に利用することです。このブログ投稿では、レイキャスティングを通じて取得されたヒットテスト結果を処理するための包括的なガイドを提供し、WebXRシーン内で直感的で魅力的なユーザーインタラクションを作成できるようにします。

レイキャスティングとは何か？なぜWebXRで重要なのか？

レイキャスティングは、特定の点と方向から発せられるレイが、3Dシーン内のオブジェクトと交差するかどうかを判断するために使用される手法です。WebXRでは、レイキャスティングは通常、ユーザーの視線または仮想オブジェクトの軌道をシミュレートするために使用されます。レイが現実世界のサーフェス（ARの場合）または仮想オブジェクト（VRの場合）と交差すると、ヒットテスト結果が生成されます。

ヒットテスト結果は、いくつかの理由で重要です。

• 仮想オブジェクトの配置：ARでは、ヒットテストを使用すると、テーブル、床、壁などの現実世界のサーフェス上に仮想オブジェクトを正確に配置できます。
• ユーザーインタラクション：ユーザーが見ている場所または指している場所を追跡することで、ヒットテストにより、選択、操作、またはアクティブ化などの仮想オブジェクトとのインタラクションが可能になります。
• ナビゲーション：VR環境では、ヒットテストを使用してナビゲーションシステムを実装し、ユーザーが特定の場所を指すことによって、シーン内をテレポートまたは移動できるようにすることができます。
• 衝突検出：ヒットテストは基本的な衝突検出に使用でき、仮想オブジェクトが別のオブジェクトまたは現実世界と衝突するタイミングを判断できます。

WebXRヒットテストAPIの理解

WebXRヒットテストAPIは、レイキャスティングを実行し、ヒットテスト結果を取得するために必要なツールを提供します。主要な概念と関数を以下に示します。

XRRay

XRRayは、3D空間内のレイを表します。これは、原点と方向ベクトルによって定義されます。XRFrame.getPose()メソッドを使用してXRRayを作成できます。このメソッドは、追跡された入力ソース（ユーザーの頭、ハンドコントローラーなど）のポーズを返します。ポーズから、レイの原点と方向を導き出すことができます。

XRHitTestSource

XRHitTestSourceは、ヒットテスト結果のソースを表します。XRSession.requestHitTestSource()またはXRSession.requestHitTestSourceForTransientInput()メソッドを使用して、ヒットテストソースを作成します。最初のメソッドは通常、ユーザーの頭の位置などの永続的なソースに基づいて継続的なヒットテストに使用されるのに対し、2番目のメソッドは、ボタンの押下やジェスチャーなどの一時的な入力イベントを対象としています。

XRHitTestResult

XRHitTestResultは、レイとサーフェス間の単一の交点を表します。レイの原点からヒットポイントまでの距離、およびシーンの参照空間内のヒットポイントのポーズなど、交点に関する情報が含まれています。

XRHitTestResult.getPose()

このメソッドは、ヒットポイントのXRPoseを返します。ポーズには、ヒットポイントの位置と向きが含まれており、仮想オブジェクトを配置したり、他の変換を実行したりするために使用できます。

ヒットテスト結果の処理：ステップごとのガイド

WebXRアプリケーションでヒットテスト結果を取得して処理するプロセスを見ていきましょう。この例では、three.jsやBabylon.jsなどのレンダリングライブラリを使用していることを前提としています。

1. ヒットテストソースのリクエスト

まず、XRSessionからヒットテストソースをリクエストする必要があります。これは通常、セッションが開始された後に行われます。ヒットテスト結果を返す座標系を指定する必要があります。例：

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

説明：

• xrSession.requestHitTestSource()：この関数は、XRセッションからヒットテストソースをリクエストします。
• { space: xrSession.viewerSpace }：これは、ヒットテスト結果が返される座標系を指定します。viewerSpaceはビューアーの位置を基準とし、localはXR原点を基準としています。床を基準に追跡するには、localFloorも使用できます。
• エラー処理：try...catchブロックは、ヒットテストソースの作成中にエラーが発生した場合に、エラーがキャッチされてログに記録されるようにします。

2. アニメーションループでのヒットテストの実行

アニメーションループ（各フレームをレンダリングする関数）内で、XRFrame.getHitTestResults()メソッドを使用してヒットテストを実行する必要があります。このメソッドは、シーン内で見つかったすべての交点を表すXRHitTestResultオブジェクトの配列を返します。

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

説明：

• frame.getViewerPose(xrSession.referenceSpace)：ビューアー（ヘッドセット）のポーズを取得します。これは、ビューアーがどこにいて、どこを見ているかを知るために必要です。
• frame.getHitTestResults(xrHitTestSource)：以前に作成したヒットテストソースを使用してヒットテストを実行します。
• hitTestResults.length > 0：交点が見つかったかどうかを確認します。

3. ヒットテスト結果の処理

processHitTestResults()関数は、ヒットテストの結果を処理する場所です。通常、これには、ヒットポイントのポーズに基づいて仮想オブジェクトの位置と向きを更新することが含まれます。

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

説明：

• hitTestResults[0]：最初のヒットテスト結果を取得します。複数の交差が可能である場合は、配列全体を反復処理し、アプリケーションのロジックに基づいて最適な結果を選択する必要がある場合があります。
• hit.getPose(xrSession.referenceSpace)：指定された参照空間内のヒットポイントのポーズを取得します。
• virtualObject.position.set(...)およびvirtualObject.quaternion.set(...)：ヒットポイントのポーズに合わせて、仮想オブジェクト（three.jsのMeshなど）の位置と回転（クォータニオン）を更新します。
• 視覚的なフィードバック：この例には、ユーザーがシーンとのインタラクションの場所を理解するのに役立つように、ヒットポイントに円または単純なマーカーなどの視覚的なフィードバックを表示するコードも含まれています。

高度なヒットテストテクニック

上記の基本的な例を超えて、ヒットテストの実装を強化するために使用できる高度なテクニックがいくつかあります。

一時的な入力を使用したヒットテスト

ボタンの押下やハンドジェスチャーなど、一時的な入力によってトリガーされるインタラクションの場合、XRSession.requestHitTestSourceForTransientInput()メソッドを使用できます。このメソッドは、単一の入力イベントに固有のヒットテストソースを作成します。これは、継続的なヒットテストに基づいて意図しないインタラクションを回避するのに役立ちます。

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

ヒットテスト結果のフィルタリング

場合によっては、レイの原点からの距離や交差したサーフェスの種類など、特定の基準に基づいてヒットテスト結果をフィルタリングする必要がある場合があります。これを行うには、取得後にXRHitTestResult配列を手動でフィルタリングします。

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

異なる参照空間の使用

参照空間の選択（viewerSpace、local、localFloor、またはその他のカスタム空間）は、ヒットテスト結果の解釈方法に大きく影響します。以下を検討してください。

• viewerSpace：ビューアーの位置を基準とした結果を提供します。これは、ユーザーの視線に直接結び付けられたインタラクションを作成するのに役立ちます。
• local：XR原点（XRセッションの開始点）を基準とした結果を提供します。これは、オブジェクトが物理環境内で固定されたままになるエクスペリエンスを作成するのに適しています。
• localFloor：localに似ていますが、Y軸が床に揃えられています。これにより、オブジェクトを床に配置するプロセスが簡素化されます。

アプリケーションの要件に最適な参照空間を選択してください。さまざまな参照空間を試して、その動作と制限を理解してください。

ヒットテストの最適化戦略

ヒットテストは、特に複雑なシーンでは、計算負荷の高いプロセスになる可能性があります。検討すべき最適化戦略をいくつか示します。

• ヒットテストの頻度を制限する：毎回フレームを実行するのではなく、必要な場合にのみヒットテストを実行します。たとえば、ユーザーがシーンと積極的に対話している場合にのみ、ヒットテストを実行できます。
• バウンディングボリューム階層（BVH）を使用する：多数のオブジェクトに対してヒットテストを実行する場合は、BVHを使用して交差計算を高速化することを検討してください。 three.jsやBabylon.jsなどのライブラリには、組み込みのBVH実装が用意されています。
• 空間分割：シーンをより小さな領域に分割し、交差が含まれる可能性の高い領域に対してのみヒットテストを実行します。これにより、確認する必要があるオブジェクトの数を大幅に減らすことができます。
• ポリゴン数を減らす：テストする必要があるポリゴンの数を減らすために、モデルのジオメトリを簡略化します。これは、特にモバイルデバイスでパフォーマンスを向上させることができます。
• WebWorker：計算をWebワーカーにオフロードして、ヒットテストプロセスがメインスレッドをロックしないようにします。

クロスプラットフォームに関する考慮事項

WebXRはクロスプラットフォームを目指していますが、デバイスやブラウザによって動作に微妙な違いがある場合があります。次の点に注意してください。

• デバイスの機能：すべてのデバイスがすべてのWebXR機能をサポートしているわけではありません。機能検出を使用して、どの機能が利用可能かを判断し、それに応じてアプリケーションを調整します。
• 入力プロファイル：デバイスによって、異なる入力プロファイル（generic-touchscreen、ハンドトラッキング、ゲームパッドなど）を使用する場合があります。アプリケーションが複数の入力プロファイルをサポートし、適切なフォールバックメカニズムを提供していることを確認してください。
• パフォーマンス：パフォーマンスは、デバイスによって大きく異なる場合があります。サポートする予定の最もローエンドのデバイスに合わせてアプリケーションを最適化してください。
• ブラウザの互換性：アプリがテストされ、Chrome、Firefox、Edgeなどの主要なブラウザで動作することを確認します。

ヒットテストを使用したWebXRアプリケーションのグローバルな例

ヒットテストを効果的に利用して、魅力的で直感的なユーザーエクスペリエンスを作成しているWebXRアプリケーションの例を次に示します。

• IKEA Place（スウェーデン）：ARを使用して、IKEAの家具を自宅に仮想的に配置できます。ヒットテストは、家具を床や他の表面に正確に配置するために使用されます。
• Sketchfab AR（フランス）：Sketchfabの3DモデルをARで表示できます。ヒットテストは、モデルを現実世界に配置するために使用されます。
• 拡張画像（さまざまな場所）：多くのARアプリケーションでは、画像追跡とヒットテストを組み合わせて使用​​し、仮想コンテンツを現実世界の特定の画像またはマーカーに固定します。
• WebXRゲーム（グローバル）：多数のゲームがWebXRを使用して開発されており、その多くはオブジェクトの配置、インタラクション、およびナビゲーションにヒットテストを利用しています。
• バーチャルツアー（グローバル）：場所、美術館、またはプロパティの没入型ツアーでは、ユーザーナビゲーションと仮想環境内のインタラクティブな要素にヒットテストがよく使用されます。

結論

Web上で魅力的で直感的なARおよびVRエクスペリエンスを作成するには、WebXRヒットテストの結果とレイキャスティング処理を習得することが不可欠です。根本的な概念を理解し、このブログ投稿で説明されているテクニックを適用することで、仮想世界と現実世界をシームレスに融合させたり、自然で直感的なユーザーインタラクションを備えた魅力的な仮想環境を作成したりできる、没入型アプリケーションを構築できます。パフォーマンスのためにヒットテストの実装を最適化し、クロスプラットフォームの互換性を考慮して、すべてのユーザーにスムーズなエクスペリエンスを提供することを忘れないでください。 WebXRエコシステムが進化し続けるにつれて、ヒットテストAPIがさらに進歩し、改良され、没入型Web開発の創造的な可能性がさらに広がることが期待されます。最新の情報については、常に最新のWebXR仕様とブラウザのドキュメントを参照してください。