Android XR 版 Chrome は WebXR をサポートしています。WebXR は、サポートされているブラウザに高性能の XR API を提供する W3C のオープン標準です。ウェブ向けに構築する場合は、3D モデルで既存のサイトを強化したり、新しい没入型エクスペリエンスを構築したりできます。
Android XR 版 Chrome では、次の WebXR 機能がサポートされています。
WebXR の動作を確認するには、Android XR デバイスまたは Android XR エミュレータで Chrome を起動し、公式の WebXR サンプルを参照してください。
前提条件: WebXR フレームワークを選択する
開発を始める前に、適切な WebXR フレームワークを選択することが重要です。これにより、生産性が大幅に向上し、作成するエクスペリエンスの品質が向上します。
- 3D シーンを完全に制御し、カスタムの複雑なインタラクションを作成するには、three.js と babylon.js をおすすめします。
- ラピッド プロトタイピングや HTML のような構文を使用して 3D シーンを定義する場合は、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 つずつ要求します。
ウェブ上のすべての権限と同様に、権限が拒否された状況を適切に処理する必要があります。