Android XR 版 Chrome は WebXR をサポートしています。WebXR はオープン スタンダード W3C で、サポートされているブラウザ に高性能の XR API を提供します。ウェブ向けに構築する場合は、3D モデルで既存のサイトを強化したり、新しい没入型エクスペリエンスを構築したりできます。
Android XR 版 Chrome では、次の WebXR 機能がサポートされています。
WebXR の動作を確認するには、Android XR デバイスまたは Android XR エミュレータで Chrome を起動し、公式の WebXR サンプルを参照してください。
前提条件: WebXR フレームワークを選択する
開発を始める前に、適切な WebXR フレームワークを選択することが重要です。 これにより、生産性が大幅に向上し、作成するエクスペリエンスの品質が向上します。
- 3D シーンを完全に制御し、カスタムまたは複雑な インタラクションを作成するには、three.js と babylon.js をおすすめします。
- 迅速なプロトタイピングや、HTML のような構文を使用して 3D シーンを定義するには、we おすすめします A-Frame と model-viewer。
- 他のフレームワークとサンプルコードも確認できます。
ネイティブ JavaScript と WebGL の使用を希望する場合は、GitHub の WebXR を参照して、最初の WebXR エクスペリエンスを作成してください。
Android XR に対応させる
他のデバイスで実行されている既存の WebXR エクスペリエンスがある場合は、Android XR で WebXR を適切にサポートするためにコードの更新が必要になることがあります。たとえば、モバイル デバイスに重点を置いた WebXR エクスペリエンスは、Android XR で 1 つの画面から 2 つのステレオ画面に適応させる必要があります。モバイル デバイスまたは既存のヘッドセットを対象とする WebXR エクスペリエンスでは、入力コードをハンドファーストにする必要がある場合があります。
Android XR で WebXR を使用する場合は、両眼に 1 つずつ 2 つの画面があるという事実を補うために、コードの更新が必要になることがあります。
WebXR での奥行き感の確保について
ユーザーが仮想オブジェクトを物理空間に配置する場合、そのオブジェクトが実際にそこにあるように見えるように、スケールを正確にする必要があります。たとえば、家具ショッピング アプリでは、仮想アームチェアがリビングルームにぴったり収まることをユーザーが信頼する必要があります。
Android XR 版 Chrome は、WebXR の Depth Sensing Module をサポートしています。これにより、デバイスが現実世界の環境の 寸法と輪郭を認識する能力が向上します。この深度情報を使用すると、より没入感のあるリアルなインタラクションを作成できるため、ユーザーは情報に基づいて意思決定を行うことができます。
スマートフォンでの深度検知とは異なり、Android XR での深度検知は立体視で、両眼視用に 2 つの深度マップをリアルタイムでストリーミングします。ステレオ深度フレームを適切にサポートするには、WebXR コードの更新が必要になることがあります。
次の例では、深度情報を立体視でレンダリングします。
// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
const session = frame.session;
session.requestAnimationFrame(onXRFrame);
const baseLayer = session.renderState.baseLayer;
const pose = frame.getViewerPose(xrRefSpace);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clears the framebuffer.
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Note: Two views will be returned from pose.views.
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if (depthData) {
renderDepthInformationGPU(depthData, view, viewport);
}
}
} else {
console.error('Pose unavailable in the current frame!'); }
}
コードに関する主なポイント
- 深度データにアクセスするには、有効なポーズを返す必要があります。
pose.viewsは、各眼のビューとその対応する for ループを 2 回返します。
WebXR Depth Sensing API を使用したリアルタイムの深度の可視化。赤は近いピクセル、青は遠いピクセルを示します。
WebXR でハンド インタラクションを追加する
WebXR アプリにハンド インタラクションを追加すると、より直感的で没入感のあるエクスペリエンスが可能になり、ユーザー エンゲージメントが向上します。
ハンド入力は、Android XR の主要なインタラクション メカニズムです。Android XR 版 Chrome は、デフォルトの入力としてHand Input APIをサポートしています。この API を使用すると、ユーザーはジェスチャーや手の動きを使用して、シーン内の要素をつかんだり、押したり、操作したりして、仮想オブジェクトを自然に操作できます。
スマートフォンやコントローラ中心の XR デバイスなどのデバイスでは、ハンド入力がまだサポートされていない場合があります。ハンド入力を適切にサポートするには、WebXR コードの更新が必要になることがあります。Immersive VR Session with Hands では、 WebXR プロジェクトにハンド トラッキングを統合する方法を示しています。
次のアニメーションは、ピンチと WebXR API を組み合わせて、ユーザーが仮想空間の表面を「拭き取り」、現実世界へのパススルー ウィンドウを表示する例を示しています。
手のピンチを使用して画面を拭き取り、物理的な現実を透視する WebXR デモ。
WebXR での権限
権限が必要な WebXR API を使用すると、Chrome はサイトに権限を付与するようユーザーに促します。すべての WebXR API には、3D マッピングとカメラ トラッキングの権限が必要です。追跡された顔、目、手のデータへのアクセスも権限によって保護されます。必要な権限がすべて付与されている場合、navigator.xr.requestSession('immersive-ar', options) を呼び出すと
有効な WebXR セッションが返されます。
ユーザーが選択した権限設定は、ドメインごとに保持されます。 別のドメインで WebXR エクスペリエンスにアクセスすると、Chrome は権限を再度要求します。WebXR エクスペリエンスに複数の権限が必要な場合、Chrome は各権限を 1 つずつ要求します。
ウェブ上のすべての権限と同様に、権限が拒否された状況を適切に処理する必要があります。