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 つずつ求めるメッセージを表示します。
ウェブ上のすべての権限と同様に、権限が拒否された場合の処理を適切に行う必要があります。