開発
開発
プラットフォームを選択

Browserでの複合現実サポート

Meta Connect 2022で発表されたように、Meta Quest 2およびMeta Quest Proでは、ブラウザーのヘッドセットにWebXR複合現実サービスのサポートが追加されました。
ブラウザーで次のWebXR仕様に対応するようになりました。

パススルーモード

パススルー機能は、Meta Questヘッドセット内で、物理世界の快適な3Dビジュアリゼーションをリアルタイムで知覚できるように提供します。以前は、WebXRを使ってユーザーに現実世界を見せることはできませんでした。
パススルーはMeta Quest Proではカラー、Meta Quest 2ではグレースケールです。
パススルーを使用するには、WebXRセッションのリクエスト時に新しい"immersive-ar"モードを使用します。
navigator.xr.requestSession("immersive-ar").then((session) => {
  xrSession = session;
});
ここに示すように、パススルーがブラウザーでサポートされているかどうかを検出することができます。
navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
  if (!supported) { return; }
  // 'immersive-ar' sessions are supported.
  // Page should advertise AR support to the user.
}
コンテンツを透明な背景に描く必要があります。そうでない場合、パススルー環境は表示されません。例えば、不透明な色で塗りつぶさないでください。
パススルーコンテンツのピクセルに到達する方法はありませんが、透明ピクセルを使用して操作することは可能です。
基本的なパススルーの例はこちらで体験できます。
パススルー動画の例を次に示します。

平面検出

ガーディアンで作業スペースを定義するだけでなく [Settings (設定)] > [Boundary (境界線)] > [Mixed Reality (複合現実)]に移動して、デスクやソファなどのルーム設定を定義することもできます。
定義されたオブジェクトは、ブラウザーによって、ワールド位置を持つ平らな形状である平面として公開されます。
この機能を有効にするには、セッションのリクエスト時に"plane-detection"機能記述子を渡す必要があります。

const session = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["plane-detection"]
});
その後、ブラウザーはスペース設定情報へのアクセスをユーザーにリクエストし、許可された場合は、それをセッションに提示します。
この機能を有効にすると、XRSessionはXRPlanesを含んだ新しい配列“detectedPlanes”を含めます。それぞれのXRPlaneには、ワールド位置とポリゴンが含まれています。今のところ、Meta Questヘッドセットでは、これらのポリゴンは常に水平または垂直の長方形です。これらのポリゴンを使用して、ヒットテスト、VRオブジェクトとのやり取り、オクルージョンなどを行うことができます。
ガーディアンのスペース設定を実行する人が少ないため、XRSessionに“initiateRoomCapture”という新しいヘルパー機能が追加されました。このヘルパー機能は、没入型セッションからガーディアンのスペース設定をトリガーします。“detectedPlanes”配列に平面が存在しないことが明らかな場合は、この関数を呼び出すことをおすすめします。この“detectedPlanes”配列はすぐには表示されないので、セッションの作成後2~3秒待ってから呼び出しを決断してください。この関数は、セッションごとに1回だけ呼び出すことができます。
基本的な平面検出の例はこちらで体験できます。
平面検出動画の例を次に示します。

永続的アンカー

アンカーを使用すると、現実世界の場所を定義できます。一度定義すると、デバイスの起点がどこにあるかに関係なく、アンカーは同じ空間に残ります。これにより、現実世界に仮想オブジェクトを配置したり、シーンに共通の起点を設定したりできます。
Meta Questヘッドセットは、永続的アンカーにも対応しています。これらのアンカーにより、没入型セッション中にアンカーの位置を保存したり復元したりすることができます。
非永続的アンカーは、位置およびXRSpaceを指定した“createAnchor”を呼び出して作成します。これは、ワールド位置を取得するためのAPIを持つオブジェクトを返します。この位置は、現実世界では常に同じになります。コントローラーの Meta Quest button ボタンを長押しするなどしてヘッドセットの起点がリセットされても変わりません。
永続的アンカーを作成するには、アンカーオブジェクトで“requestPersistentHandle”を呼び出します。結果の文字列はサイトで保存することができます。サイトの読み込み時などにアンカーを復元するため、サイトで“restorePersistentAnchor”を呼び出すことができます。これにより、同じ位置にあるアンカーオブジェクトが返されます。
現在、サイトで一度に作成できる永続的アンカーは8つだけです。セッションがプライベートモードで実行されている場合、アンカーも永続しません。つまり、プライベートモードでアンカーを保存し、プライベートモードを閉じてからもう一度開くと、永続的アンカーを復元できなくなります。サイトの履歴をクリアすると、永続的アンカーも削除されます。
基本的な永続的アンカーの例はこちらで体験できます。
永続的アンカー動画の例を次に示します。
ナビゲーションロゴ
日本語
© 2026 Meta